Designers, dreaming of building your own product?
Many designers, myself included, are held back by a lack of the necessary knowledge and skills to build products. For those of you, I have an option that is free, doesn’t require a ton of coding knowledge, guarantees users, and you can finish your first product today.
If you haven’t acted upon this dream of yours yet, I believe you should find the smallest baby step in the right direction. Avoid big or complex projects at this stage as they rarely get finished, resulting in demotivation. Pick something embarrassingly small and finish it within days. Gather momentum and practical knowledge and move on. Great initial goal is getting one free user.
Creating Figma widgets is a straightforward option to build your first product. Widgets can be inserted into your Figma files and other users can see and interact with them. They have some code under the hood that enables various functionality (calculations, sorting, randomisation, data fetching, etc.). You can explore their possibilities by trying existing widgets in the community.
The controversial question “Should designers code?” might also find its answer. If there is a way to quickly learn and apply the basics, why wouldn’t you learn to code? Just like a potter and clay, shoemaker and leather, carpenter and wood, I think designers should also have at least a basic understanding of how the code works.
Why build a Figma widget?
Obviously, it isn’t the only way to start building products. Let’s leave out expensive options, like hiring an agency or contractors to work for you. You might consider alternatives like learning full-stack framework (e.g. Ruby on Rails, Laravel) or popular tech stack (e.g. MERN, LAMP), leveraging low or no code solution (e.g. Bubble, Webflow) and building widget, plugin or extension in some other marketplace (e.g. 69 B2B SaaS marketplaces). All those are valid options, but I think building Figma widget is the best way to get you started, for the following reasons:
- Free of charge and commitments. All you need to create and publish a widget is a free Figma account and a development environment (e.g. Visual Studio). No hassle with paying for domains, hosting, submissions, or any tooling subscriptions. You can always remove your creation from the community, when you no longer want to support it.
- Improve your Figma workflow. Widgets can speed up and simplify the actions and processes you and your team do. There is a good chance, it might be helpful to others as well.
- UI generator. Widget Code Generator plugin converts your Figma designs into widget code. You can draw your user interface in Figma instead of manually coding it.
- Low bar of coding knowledge. Since the code for the user interface can be generated, your only job is underlying logic. You can create a compelling widget even with the most basic programming concepts (variable, condition, click event, array, and cycle). Don’t worry about more complicated concepts like data fetching, API calls, propMenu, etc. You can try all those later along the way and ignore them in the beginning, because Figma will take care of all synchronisation.
- Simple and common tech. TypeScript and JSX are at the core. Both are very common and they have a lot of resources available. Typically, you can google a solution to your problems and bugs in no time. JSX defines the UI of your widget and it uses the same terms as Figma does when you are drawing (see the example below).
<AutoLayout
name="Button"
fill="#EEF2FF"
cornerRadius={12}
padding={{
vertical: 16,
horizontal: 24,
}}
>
<Text
name="Label"
fill="#0F172A"
horizontalAlignText="center"
fontFamily="Inter"
fontSize={18}
fontWeight={800}
>
Show discussed
</Text>
</AutoLayout>- Distribution is taken care of. All Figma users are also your potential users. Community automatically promotes newly published creations; therefore you don’t need to spend any time and money on marketing. I have built 5 simple Figma widgets that were used by nearly 10 000 free users during the last 6 months. This isn’t a mind-blowing number, but it is greater than 0 and that is the point.
It isn’t perfect, so consider the following two downsides. Figma community doesn’t support native monetisation, but it is possible through third party tools (e.g. Buymeacoffee, Gumroad). There is already a lot of stuff in the community, so it is hard to stand out and make some hits. The fate of your widget is fully tied to the fate of Figma.
How to get started?
Firstly, you should explore capabilities and limitations of widgets by trying existing ones in the community. If you struggle to come up with an idea for a simple widget here is an inspiration: status indicator, to-do list, notes, report card, joke generator, random design exercise assignment, bingo game or calculator. Then turn your idea into user interface design in Figma, ideally using autolayout and properly naming the layers. Follow this setup guide to prepare your development environment.
Create a widget for development by following this guide. It also includes a description of each file. For starters, you should work only in one file “code.tsx”, everything else isn’t relevant yet. Go back to your user interface design, run Widget Code Generator plugin, copy, and paste generated code into “code.tsx”. Now you have built a dummy widget, that looks like your idea, but it is dead.
Let’s give it a life with underlying logic. I don’t have a lot of coding knowledge. I learned how to do stuff I want by looking at the code of others. While creating a widget, you can select “Simple widget” or “With iFrame & browser APIs” and explore its code. Figma provides several samples to demonstrate basic concepts. A bunch of people are sharing their widget code on GitHub. There is an official documentation for widgets you can search to find all options for element. If you prefer more detailed guide, here is Building Interactive Figma Widgets article with concrete demonstrations.
Arm yourself with patience. Open console to see all error messages after every edit. When something doesn’t work as expected, use “console.log()” function to see your variables in the console. Use Google and Stack Overflow to solve the problems. If you get stuck, ask for help in “Friends of Figma” discord. Since TypeScript and JSX are common, you can ask your developer friends or colleagues to help you as well and there is a big chance they will.
Once your widget finally works as expected, submit it for review. It will get approved in a few days and then you can impatiently watch the page to see your first users.
Thank you for reading this. If this article helped you to build your first product, I would love to see it. Let’s get in touch on Twitter and keep in mind “You don’t learn, then start. You start, then learn. — Sahil Lavingia”.
