This article covers a cross-platform open-source GUI prototyping tool. One of the essential aspects of making a good software product is the design and designing starts with prototyping. We start with a GUI prototype, adding all the essential design components and then converting them into a beautiful and binding with codes. Here, I’m covering a free GUI prototyping tool that you can use to get product roadmap started.
Pencil is an open-source designing and GUI prototyping tool available for Windows, macOS, and Linux. This tool packs built-in shape collection with components available for various design types including common, web, Android, iOS, etc. with an option to import more. All those components can be easily dragged and dropped to the canvas to create a design. Apart from that, it has capabilities to design flowcharts and diagrams as well. Once done, you can export the design to raster as well as vector formats.
Also read: 3 Best Free Sketch File Viewer Software for Windows
Cross-Platform Open Source GUI Prototyping Tool: Pencil
Working with Pencil is simple, the tool is available on the website from where you can the respective setup file as per your operating system. When installed, the tool is ready to use. The UI of this tool has a grid in the center with two hideable panels on each side. The panel on the left is like a library where it lists all the design components along with clipart and images. Whereas, the panel on the right shows the properties of the selected design components.
Users can drag and drop the components from the library to the canvas and customize them accordingly to build your design. At the top of the canvas, there are a few essential clipboard and zoom options that make it easy to work with the canvas. Apart from that, there is an inter-page linking option that links a design element to a web address.
Developer Tools
Pencil packs a set of developer tools within itself. You can access these tools from the “Tools” section in the menu bar. Here is a list of all the tools you get with Pencil:
- Stencil Generator
- N-Path Script Generator
- Export as Collection Layout
- Check Missing Resource and more
If the provided developer options are not enough for you then you can send arguments to external editors installed on your PC. Under the Pencil settings, there is an option to add a command argument to perform a specific action with an external editor.
Once your design is ready, you can either save it as a Pencil file with full editing capabilities or export to the following formats:
- PNG
- Webpage
- SVG
- ODT
Closing Words
Pencil is a decent designing and GUI prototyping tool that helps you easily create a prototype for your design. The build-in resources makes it easy to work with and the option to import more resources and clipart make it even better. The best thing is that there is no learning curve, anyone with basic understanding can easily find their way around this tool.
