7 Things I Wish Someone Told Me About Figma (And a Free Template)
With the technology world’s rapid transition from Sketch, Zeplin, Adobe XD (and so on, and so on) over to the web-based solution Figma, designers everywhere have had to relearn old skills for a new program. When the product team at Axial first started using Figma, our component library was essentially our former Sketch library imported into Figma with some minor adjustments.
This didn’t work very well. After a complete redesign of our messaging system, I realized how futile it was to try to recreate the same practices I used in Sketch. It led to sloppy designs that were quite difficult to work with and even more difficult to find in Figma’s UI. As a result, earlier this year I set out to fully leverage Figma by creating a design system that was just as robust, responsive, and flexible as the web components that our engineering team uses. What I discovered through this project are three major Dos & Don’ts of building a design system in Figma. As a bonus, I’ve also included a free component library, based off of the one we use here at Axial, for download at the bottom of this article.
- Don’t name components the way you would in Sketch
One of the first things I noticed (and that others have written about) is that naming components the same way you would name symbols in Sketch can be chaotic. You’ll soon see that objects can get nested in very redundant ways, because Figma automatically sorts everything for you based on how you group it. - Use component variants whenever possible
One of the biggest differences between Sketch and Figma is the variable components feature. With variants, the need to have primary_button_icon_right and primary_button_icon_left is gone! With variants, you can simply have Button and inside that it can hold every single variation for a button that you’d like. - Never detach instances
Everyone has been there before: you’re working on a design and you hit a brick wall: you have to add a new element that the component doesn’t accommodate for and the only option is to detach the instance. While this can be fine for small projects, doing this can have a snowball effect where you end up with many designs detached from the master design file. - Look at what can be changed about the component
Instead of detaching an instance, look at the component and think about what needs to be changed. Maybe it’s something as simple as adding a new icon next to a piece of text. What I’ve found to be the best is to go to the master component, duplicate it as a variant and create the necessary design changes there. After that, go back to the original design you were working on and apply the new variant. If the design is approved, replace the old variant if necessary, if not — simply remove it from the library. This will make it so that all of your designs still point towards a single source of truth. - Never create components with detached text or color styles
When making new components, it’s really easy to forget about text and color styles. Just like detaching components from their instances, using components detached from text or color styles will also have a snowball effect. It’s best to be cognizant of this early on because retroactively applying styles to your components can be a tedious and loveless job. - Use auto-layout for (almost) everything
But really, everything. Perhaps the most powerful feature that Figma has for creating responsive components is the auto-layout feature. Using auto-layout, you can create buttons that resize dynamically, modals that can change to accommodate for different content or nested components, etc. It’s the closest that a design tool has come to replicating web components that I’ve used. - And finally, one of the most important lessons I learned was to nest components inside of each other. Having a button with an icon is much less powerful than having a button with an icon component that can be instantly swapped out for any other icon. By following the atomic design principles, you can create robust templates filled with many different components that can all be swapped and customized to your preference.
And that’s it! With enough of these lessons, you can hopefully avoid some of the mistakes I made and create a truly robust component library that never has a part that needs to be detached. To see some of the ways that we implemented these features in our own design library, check out our free Microlite Design System for Figma. It’s a modified version of what we use here at Axial and showcases the end result of the many lessons learned.
