Organization is the foundation of great design. And yet many designers, including myself, often overlook its importance. We may set a few building blocks down in hopes that it will launch us in the right direction, but if we find ourselves scrambling later in the process, then we can’t say we’ve done an efficient job.
Spending twenty minutes searching for a file, or bouncing back and forth between pages in Figma because we’re not sure what version we’re supposed to be using, are key indicators of poor organization. And that’s not to be discouraging.
We can always improve, and I have a few suggestions to help you on your journey to becoming a more organized designer, specifically in Figma.
Figma can be as helpful or as daunting as you make it out to be. There are hundreds of tutorials, blogs, and videos on how to use Figma, but organization itself is somewhat of a newer topic (and I’m not talking about the organization plan).
Several impactful companies and web design agencies—like Solid Digital—are constantly evolving their approach to organization through the use of file covers, components, and design libraries. But it can be intimidating when there isn’t a one size fits all method.
As a designer, here are three best practices I’ve learned to keep your team on track.
1. File covers are more than just an aesthetic.
One of the most overlooked aspects of Figma organization is the use of file covers. Raquel Piqueras, a designer at Microsoft, uses color-coded thumbnails to relay the status of any given project at a glance. Beyond the obvious title and designer, she names every important contact such as the project manager, developer, and researcher. This way, stakeholders know exactly who’s involved.
So if your Figma dashboard looks like a bunch of random screens with disorganized names, it’s time for an overhaul. Speaking of naming conventions, every designer has their own way of naming files, pages, and layers, but it’s important for teams to have a single method that anyone in their organization can recognize.
Whatever you choose, keep it short and easy to remember. No “final_final_[projectname]_v10”, please.
Pro Tip: Did you know that you can rename layers in bulk? Just select the layers you want to edit, press Command – R (Control + R on Windows), and rename as you see fit. You can even add descending or ascending numbers!
2. The second an element repeats, make it into a component.
Say you’re a master of naming the basic stuff, but what about organizing your components? Here at Solid Digital, we know pretty early on when we need to make an element into a component, like a navigation bar, a footer, buttons, etc. This practice cuts down on having to remake specific items and saves a lot of time. There are a few different ways to organize these components, and it’s important to experiment and figure out what works best depending on the needs of your team.
For example, is it better for components to live within your design?
Or should they be housed on a separate page?
According to the design team at Spotify, design work such as branding assets, icons, styles, and components should have a designated home in your Figma file. If your design is complex, or you simply want to streamline your workflow, then a library is crucial.
3. Craft your library with intention.
Your team library should be an ever-growing ecosystem as your design evolves. Thomas Lowry, a design advocate at Figma, broke down the importance of organizing your design library, and again, the method of doing so is entirely up to your team. If you have a smaller number of components, it would probably make more sense to contain it all in a single library. That way, everything is accessible in a single space.
However, if your organization is quite large, sifting through dozens of elements may get frustrating for everyone involved. Another solution, as Lowry points out, would be to create several smaller libraries, say one for mobile components, and another for desktop.
Pro Tip: Figma allows the well-known slash naming convention for components! If you have several interactions of the same elements, you could name them according to their identity, function, and state, i.e. button/primary/hover.
Whatever you decide, it’s best practice to keep components grouped together in a single frame.
Everything should be clear, and most importantly, simple.
Imagine you’re a stakeholder exploring a project in Figma. Wouldn’t it be nice if you could find everything you needed without consulting someone on the design team? It’s an ambitious goal, but by being more intentional at the start, you can make it into a reality.
I know it can be exciting to dive head first into your Figma file, and you may even be tempted to organize everything later, but if you get into the habit of organizing at the beginning and as you go, you’ll save some big headaches down the road.
