Essential (No Code) Tools For Product Designers

With the rise of no-code and low-code alternatives continuing their path to prominence, I have compiled a list of tools that I find useful (or even essential) to involve in the product design process.

This list is by no means exhaustive of the useful product design tools out there, this is just an interpretation of great ones to lead you in the right direction.

Webflow: Clean and Simple Web Design

Webflow is a fantastic tool when it comes to web design. It has a modest learning curve to become efficient with the tool. For example, you must use the right-hand sidebar to control all styling aspects of your design. Yet once you become more experienced with the tool you can apply the best practices of Webflow to other aspects of front-end product design, and I find it even helps with code development!

The benefits include:

1. Immediate visual feedback of your design changes;
2. It can help further your understanding of styling, structure and interactivity of web design code through the semantic code output; and
3. It has useful SEO tools, powerful and reliable hosting, and a growing catalogue of awesome templates to get started with (I recommend messing around with a free template as your first activity in Webflow).
   

Some things to note:

1. Unlike some other web design tools, Webflow forces you to become a lot more disciplined with the structure and styling of elements within your webpage, this turns out to be a great benefit for future skill development but begins as a modest learning curve.

Figma: The King of UI Design

Figma is given massive praise for the simplicity yet extensiveness of its design tool, and deservedly so. After using Photoshop to conduct any UI or layout design, Figma is a breath of fresh air. It has a very flat learning curve to perform many basic tasks, such as designing a static web page. Yet there is so much to uncover with Figma beneath the surface, as I was long to discover. My favourite inspirations for Figma are Jordan Singer and Joey Banks.

The benefits include:

1. It’s super simple to use - starting with dragging and dropping different shapes onto the canvas and trying to recreate your favourite page design is actually fun and easy;
2. It’s surprisingly powerful - custom plugin integrations and nifty shortcuts make your Figma experience increasingly powerful and efficient as you progress; and
3. It’s free to use as a solo designer - which I find is incredible given the value it can provide.
   

Some things to note:

1. It’s extremely focused on UI design, for example, you will still want to make sure you have a tool like Photoshop for more extensive image editing; and
2. As you scale your design prototypes on Figma, you need to become disciplined with your workflow, otherwise your canvas can become a mess and it can be tricky to keep on top of the design; find an organised workflow that works for you early on!  

The community tab is an excellent place to get started learning what is possible with Figma. They have also released a collaborative ideation tool called FigJam, which again focuses on simplicity and ease-of-use.

Zapier: Automate and Integrate Your Product

Zapier makes you happier: their slogan, and it is fairly true! Zapier is basically a drag-and-drop integrator of a vast collection of different APIs. You can connect your Webflow site to Google Sheets, so that a form input creates a new row; you can connect your Facebook Ad to ClickSend, so that a new lead gets sent an sms automatically, etc.

Zapier is great for when you have designed a product, and you want to add some automated integration into the behind-the-scenes processes.

The benefits include:

1. It is a really wonderful tool that can save you many hours on mundane tasks;
2. It supports nearly ever major SaaS app, so you can automate many varieties of tasks; and
3. There is a great community as well as useful documentation to help you get the most out of Zapier.  
   

Some things to note:

1. You need to have intention before you start with Zapier - you need to have a specific task in mind that you want to automate; and
2. You need to ensure that the tool you need to integrate is supported by Zapier - though they have a vast ever-growing catalog so nearly all major SaaS tools are supported.

Airtable: Convenient, Powerful Database

Airtable is perfect for quickly creating convenient yet powerful databases. If you need to store data for your product, you can do this easily and effectively with Airtable. You can quickly create tables to keep track of any data, and use the powerful reporting and automation features of Airtable to achieve the results needed.

Zapier is best friends with Airtable! It is super easy to integrate various apps to flow into Airtable via Zapier integration. It is comparatively easy to integrate direct through Airtable too.

The benefits include:

1. It is a super easy and convenient way of storing data from your product, providing a simple framework for giving basic back-end features to your product;
2. It has an extensive list of features to help you make the most out of your data, from reporting and automation; and
3. It has a decent free pricing tier to let you trial Airtable to see how it works and if it will work for your use case.
   

Some things to note:

1. It is a tool best utilised once you have a basic understanding of databases and data analysis - fortunately there are useful templates and documentation to help, and if you have any prior experience in Excel then Airtable will feel familiar yet wildly better.

Bonus Tools

Spline: The (Possible) Figma for 3D Design

Spline was publicly launched just around a year ago. Since then, it has made great strides developing its product: a lightweight 3D design editor that takes many perceived cues from Figma. It is still in very early stages of development, and the team admit that themselves. But I think it shows great promise as an intuitive and convenient 3D design tool to supplement product design - you could design icons or assets in Spline after some time diving into their documentation guide.

Makerpad: Detailed Courses to Further Your Horizons

It is hard to mention no-code and not mention Makerpad. Makerpad is a no-code learning resource, with over 350 tutorials on how to utilise no-code or low-code design tools to your advantage. If you find this article interesting, I thorougly recommend trying Makerpad out to explore the varied collection of tutorials on the site, to help both deepen and widen your understanding of useful no-code product design tools. Their paid tier even includes 1-1 consultation and weekly workshops.

Design thinking: Something We Can’t Forget

Even though every item above is a tool or learning resource, I find it hard to excuse the principle of design thinking from this article. Design thinking should be one of the first ‘tools’ you obtain as a product designer. It is the principle and frameworks of understanding your user’s key problems and needs, and designing your product and systems in a way that best serves your customers and solves their problems. A great resource I recommend for brushing up on design thinking is reading IDEO, the design consultancy’s writing on the subject.