Who ever said you had to limit spring cleaning to your bathroom drawers?
The sun is shining, flowers are blooming, and your Figma files are hankering for some love. Give 'em the 'ol KonMari treatment, with this latest installment of Figma Tips.
We gathered all the best techniques to tidy up your Figma world, like using frames to organize components or shortcuts to rename your layers en masse. See what sparks joy in your designs with these ideas and more.
In every epic, long-standing design project, the layers panel deteriorates over time. You create, duplicate, and adjust a ton of layers, with a lot of them being similar or related, and as a result, your layers panel becomes a sea of names lost without context. However, to fix this, it can be quite a painful process to go back, one by one, renaming everything to your liking.
This is where our batch rename feature comes in handy! With a few clicks, you can give all of your layers the proper names they deserve.
To use it, start by selecting multiple layers then right-click and select Rename or use the keyboard shortcut
Command + R.
From here you have a few options:
I highly recommend checking out our help article on bulk renaming as it dives deeper into each of these options.
When you add a custom thumbnail image to your Figma files, it can greatly help in keeping things organized and easily scannable. We know this Figma tip has been shared before, but it's so useful we thought it was worth publicizing again! You can create custom thumbnails for your files through a few simple steps.
Adding custom thumbnails makes browsing through your files easier. You can also use them to communicate project status, versions, etc.
When it comes time to organize and clean up your files, take advantage of the sorting options in the file browser. By sorting by File Name, you can find all the files named "Untitled" that you probably don't need. Other options: Sort by Date Created and Last Modified.
Spring cleaning is a good opportunity to air out your design system and component libraries. Do all your components make sense to everyone on your team? Are there redundancies? This could be base components like a button background or just a component that is no longer needed. To clean up your library all you have to do is go to the components tab, right click, and select
Remove from Library.
You can also achieve this by adding a
. or a
_ to the beginning of the component name.
What good is a library if it isn't organized? We recommend using frames and pages to organize your component libraries and design systems into collections that make sense for you and your team. By doing this you can cut down on all the forward slashes and keep your component names nice and simple. This also helps your team browse through your library with ease!
Looking for a deeper dive into how to get organized in Figma? Check out our recent Multiplayer Live Session where we go through some of these tips above and more! Have a favorite tip or trick? Be sure to let us know on Twitter with #FigmaTip.
Happy Spring Cleaning! 🌸