5 Figma tips from a reformed messy designer
Keeping Figma design files consistent, simple, and organized is trickier than you think! Here are a few tips I’ve picked up.
When starting a design project, a fast pace and multiple design iterations can easily lead to a cluttered mess. Taking the time in the beginning to build good organizational habits will save you time later.
You’ll thank your past self when you don’t have to rename countless files and do the tidying the day before final handoff.
Here are five tips that help me keep my files organized and easy to browse. No one likes inheriting a messy design file!
1. Give Components & Layers Descriptive Names
Figma’s layer panel, located on the left side of the screen showcases all of your layers. It’s important to keep these logically ordered and descriptive!
Keep your layer panel neat and ordered! Each frame, group, and component should have a descriptive name that tells you what it is and what it is for. For complex designs, it’s a real pain when you can’t immediately tell the difference between “Vector 21” and “Vector 22”.
If you like making a lot of groups, it can be helpful to order those groups in the order that they appear on your frame. For example, for one of my homepage designs, my largest groups represented large sections on the page, starting with the page’s header, and ending with its footer.
2. Order Your Frames/Artboards
Make sure your screens follow a logical progression! Especially if you are prototyping a user flow!
If you’ve spent any time on a project involving multiple pages, you know Figma files can get visually cluttered very quickly! If you are creating a user-flow for a prototype, ensure that your naming and numbering conventions are consistent.
For prototypes with multiple flows, it can be helpful to separate each user-flow into its own group. From there, consistently follow a right-to-left or top-to-bottom ordering convention.
3. Use Pages to Keep Things Tidy
There’s no need to crowd a single page of your Figma file. If you can group user-flows, iteration, or components on separate pages it’s incredibly useful to do so. You can add or duplicate pages via the menus above the layer panel.
4. Use Components/Symbols
If you have any repeatable elements in your design, like icons or buttons, build them out as components first!
Rather than painstakingly tweaking every single copy of a design element, using symbols ensures that any change to your original element will be transferred to all copies of it. This is a tremendous time-saver and the organized use of components is crucial for any kind of handoff.
5. Make Use of Styles
Much like components, text, color, and effect styles are crucial time-savers that are worth every second it takes to set up. Styles are standard configurations for your elements and will save you from having to manually select the details for each element you make.
What’s also special about styles is that like components, changing the core style will affect all instances of the style. If you need a deeper blue for your pressed button state, changing your “Button Pressed” color style will save you the trouble of manually updating it throughout your whole design.
These are the quickest and most useful tips I’ve learned throughout my time as a designer. Putting in the effort early exponentially saves you time near the end of your project!
You can learn more and read more in-depth organizational advice from Figma’s Guides & Practices section on their website.