Many designers have that one paid tool they swear by to bring their work to life, but I wanted to challenge that and run real-world projects with nothing but free tools. I’ve tried all of them, from open-source and self-hostable to proprietary, but there’s one tool that managed to do everything I needed — Figma.

I know, not exactly a shocking pick. However, the free version is far more capable than we give it credit for. I don’t just “get by” with it. It carries entire projects from ideation to the final export with no need to switch apps at any point, even for the more advanced functions. Here’s how I squeeze every drop out of the free Figma version…

I start with the free whiteboard tool

FigJam is a free extension of Figma

Before I touch anything design-related, I map out my plans and goals for a design (in this case, a redesign of an existing onboarding screen). FigJam is an all-in-one project planner, brainstorming, and whiteboard tool within the Figma system. It’s primarily designed for collaboration, but it can also be used by solo creators.

Here, I'm drawing a simplified flowchart to outline the steps. You can also ask the AI to generate something for you or pick something from the templates. You’ve got drawing tools, sticky notes, text, shapes, and other inserts to map out whatever you need. Nothing complicated, it’s meant to be a minimal tool for laying out ideas fast.

Getting the design started

It couldn’t be simpler than this

After gathering all the relevant materials, it's time to start laying the foundation of the design. I don’t use any plugins to clone screens; instead, I design from scratch, so this is where I dive into the tool panel. The Frame tool is my main companion here, followed by the Text and Shape tools and their relevant property settings. I use them for a general layout of the screen before going in with the details. Also, be sure to check out the Figma library for its massive collection of free elements, or simply import your own.

Applying Auto-Layout

To keep everything aligned perfectly

Auto-Layout is Figma’s version of CSS’s Flexbox, a tool that grows or shrinks elements proportionally as they move around the screen, or if the screen size changes. This feature is primarily useful for maintaining consistency in responsive designs. I don’t need it for every element on my mockup because I’m mainly working with stills and individual buttons, but it comes in handy for cluster icons, buttons, and layout shapes. I’m impressed that this feature is available for free because it saves so much time with manual spacing adjustments.

Creating master components and variants

To keep things fast and consistent

Previously, I’d only create a Component to keep changes across the text consistent, using the feature as a static style holder for the text. But Components are meant for larger applications, such as keeping the style consistent across all the buttons or layouts of a web design. Components and their instances have a parent-child relationship, so changes made to the main component will be reflected across all instances, but not vice versa.

This is where the free plan does seem to limit me a bit — I can detach an instance from the main component in some cases, but not in others. So I can’t say with certainty whether detaching is a pro feature or not. Either way, Components is available in the free version, and you should definitely take advantage of it.

This time, I’m also using Variants. These nuggets are versions of a component grouped into a component set, allowing you to repeat the same main component with whichever variable properties you want. My collection of buttons is rather small here, consisting of only four variants. I also found that creating a Text property in a component set is much more effective than turning plain text into a component. It prevented me from tediously copying and pasting and adjusting every new button and its text from scratch.

Components and Variants are advanced Figma features, so I’m once again impressed that they’re available for free.

Utilizing Version History

For rolling back to older document versions

Version History lets you roll a file back to a previous state, which can be a lifesaver if you need to undo a big change or revisit an older design. This is another feature where the free Figma version limits you a bit — it only keeps a document’s version history for up to 30 days. I usually complete my projects well within this timeframe, so it’s not an issue, but a quick workaround is simply exporting your Figma file from any key point in the Version History and importing it at a later stage.

Many proprietary software don’t even offer this level of version control, so getting it in Figma for free, albeit with a limit, is a big win. I ended up going back to two older versions of this project because undoing my changes to a previous state would have been too time-consuming.

Playing with Smart Animate

Creating dynamic prototypes in no time

There was no need for me to animate anything on this onboarding screen, but I wanted to play with Smart Animate anyway. Here, I duplicated a frame and its contents, and changed the content in the second frame to what the end result should look like. Then I set up the Flow start point in the Prototype panel. You’ll find Smart Animate in the Interactions, which creates a smooth animation for you by analyzing the layer properties.

I can see this coming in very handy for larger projects that have many interactive components. I also like how Smart Animate still lets you edit the Bézier curve to create a custom animation. As a motion graphics editor, this is probably my favorite thing to play around with in the app. And again, it’s very nice of Figma to include these advanced features in the free version.

Exporting my project

There is no lack of options

Figma gives you various ways to get your design out of the app, but they’re not all the same. I prefer saving the .fig file to my device (Save local copy) as it’s a backup of the entire document. But you can also export layers separately as PNG, JPG, SVG, and PDF, and export multiple at the same time. The latter is a great option for responsive images and app icons. There’s also the option to export frames to PDF, which is great for presentations. And, of course, you can share the file with anyone or publish it via the Share icon at the top.

Making free tools feel premium

After completing this mockup and the prototype with just the free version, I’m convinced many underestimate what Figma gives you without a subscription. For larger and professional teams, the Pro version makes sense, as it offers extensive collaboration features. However, for solo projects, personal work, or even some client work, Figma Free holds its own. The trick is knowing the limits and then leaning into what is available rather than finding workarounds for every missing feature.