10+1 Commandments for Using Figma
It’s hard to find any product designers in 2023 who don’t use, or at least don’t know about Figma. By now, it is our primary go-to user experience design tool at UX studio. It is easy to use, however, you need to have some experience with it to know about the finest tricks and how-tos in order to make your design processes as smooth as possible.
As we always work on many projects and in-house innovations, our UX professionals have a massive familiarity with the golden rules of using Figma. So, I asked my colleagues what they consider to be the most important commandments of using this popular tool - read this article to check out what they mentioned!
Figma Is Your Best Design Friend
Figma is a vector-based collaborative design tool made for creating digital products. Probably you already know that. Whether you use the web application or the desktop app, you can design final UI screens and prototypes as well. Real-time collaboration lets you work together with your colleagues, but you can still choose to work alone. You can deliver your designs to the developers in the same tool you created them, which definitely makes life easier.
Although there are amazing tools out there, Figma became the most popular one for user experience design quite fast, as it only has a decade-long history. The company’s success might lie in the attitude it has - they are always working on updates to essential features, continuously pushing development forward.
When starting to discover this great tool you might feel that the world is yours. But beware - using Figma doesn’t necessarily make you a good designer. It is a tool that helps you in your professional product design journey, even at the very beginning of the discovery phase. And of course, it will make designing much faster, smoother, more effective - all in all, easier.
To make the most of Figma, it is useful to have a collection of golden rules that guide us to a simpler professional life as designers. To gather all the useful tricks and tips, I asked our amazing UX studio designers to reveal their best practices for using Figma. Based on that, our 10+1 commandments were born.
Our 10+1 Commandments For Using Figma
Dreaming about saving yourself from making adjustments to your designs for hours? Or maybe you just want to finally do the work properly, and handover nice and understandable files. Whichever you find more important, there are solutions to your needs.
UX studio designers Gábor Némethi, Janka Holicska, Laura Sima, Gábor Szabó, and Agostina Marmai know what you have to do. Follow our professionals’ bits of advice on using the great not-so-new-anymore Figma, and see what happens to your work process.
#1 Forget about groups - auto layout is here
Auto layout might be one of the hottest features of Figma nowadays. When I asked our designers about the most important things about this tool, the first answer came very quickly: “make auto layout your bestie and say goodbye to groups for the sake of everyone's mental health.”
“Use auto layout on every component level, set up constraints properly, to represent responsive design. This gives you a lot of understanding of the box model and spares you from a lot of effort when you have to make dimension-based adjustments (per flows).
#2 “Always. Name. Your. Layers (and your frames).”
“Name your layers (at least on finalized stuff). There’s a search function in Figma now - that spectators will also use, so proper naming should start from an atomic level. What is more, some features, like variants or smart animate, function well only after proper naming.”
A consistent naming strategy doesn’t only make everything understandable but makes your static screens come alive, too. Of course, naming everything in Figma pays off also in the earlier phases of the work. So, if you feel the drive to do things really properly, allocate some time for that, even before creating your final designs.
#3 Have separate pages for playground, prototypes, and handover
Having different pages for different types of work can lead to better and more organized cooperation with your colleagues - it generally creates a clear and easy-to-use environment, even only for your individual work: “clearly separate what you have to work on and what developers have to work from to avoid confusion. This can quickly evolve into a very low-effort design versioning.”
Keep in mind that separating your pages is not only good for humans, but also makes your Figma file’s life easier: “create separate pages for all the different flows and prototypes to avoid running low on memory.”
#4 Use templates for creating new flows
For a consistent and clean file structure, you should use your once-created flows as templates when you are about to jump onto the next part of the work. As our designers suggest, “use a template that you can duplicate before starting to work on a new flow (page) to make your file consistent and your life easier, and invest time into making your file tidy.”
#5 Use clear versions and status indicators
When iterating, duplicate your screens instead of deleting them - this might rather be a design process commandment, but you should keep that in mind when using Figma for designing.
“Use clear version and status indicators, even in your playground to make your workflow clearer – in the long run, it will be easier to reason for your decisions.”
#6 Create a table of contents
“Use a Figma index (table of contents) with hyperlinks when your file is getting big and/or complicated and use it as the file cover. Links are not updating, so make sure you are constantly checking if the index is up-to-date. This is also a great opportunity to communicate the logic and structure of the file for newcomers.”
#7 Figma structure should be up for iteration
Make sure that you create a Figma file structure that is flexible enough to make adjustments when it is needed. You are the designer, so it is important for you to find your way around the file, but don’t forget about the developers who will have to be able to work from that file, and also the client who asked for the product to be designed - they need to find what they are looking for easily.
“Make the structure clear and logical to spectators as well, and talk to the client and devs to see what structure would fit their workflow (with room for improvement from your POV, obviously).”
#8 Simple documentation makes it easier for everyone
When designing a digital product, you as the creator probably know exactly why you put one screen after another. You understand how it would be used after development because you were the one who had the idea in your mind. However, it might not be totally clear to everyone why you structured your file the way you did. Because of this, it is essential that you document your files in an easily understandable way.
“Use low-effort, light documentation. Nobody wants pages of documentation, the simple combo of screen flow arrows and annotations will work like magic. Remember: Figma screens next to each other is only logical to you. Make the extra effort to clarify the actions and the causes of those actions.”
#9 Make your files and design system clean and organized
Nobody likes to work in a chaotic environment. Make sure that keeping your files clean is a necessary task with what you should calculate. It will be easier to see everything through and thus work better and faster.
The overall goal would be to always have everything organized. “Something like coders have: to create "clean" files that everyone could understand, even if you are working alone. This could include naming conventions, structuring your file, etc”
Design system hygiene should be considered as a top priority issue: “allocate time for DS / Figma hygiene. Define what Figma cleaning means in the context of your current project and make sure that the client/PO/manager understands that this is an effort to calculate with.”
#10 Create rules for commenting and use it as a backlog
Figma allows its users to comment on the files you are working on: the designer, the researcher, the client, the developer, and everyone invited to that file can note their ideas and opinions there. However, it can get messy if you don’t take care and create rules for using this option. “If you drop an insight or task as Figma comments, you’re the owner of that thread. You have to manage or close the thread based on your judgment.”
“If the previous point is clear to everyone, and there’s no design task management in place so far, use Figma comments as your design backlog. Outdated Figma comments should be cleaned up as well in Figma hygiene efforts.”
+1 Know when to use what in Figma
“Know when to use specific features of Figma. If you’re at the beginning of a project and you start ideating, maybe it’s not the time to think about components or variants. In doing so, you might waste time on organization rather than discovering new and better solutions. I was a bit overwhelmed with the number of features in Figma. Also, another designer mentioned in one of the squad weekly meetings that sometimes she feels pressure to use everything Figma has to offer, but it’s not always needed.”
However, “it’s okay to use components in a conceptual phase as you might want to incorporate the benefits of components early into your workflow. Just make sure it’s separated from the final design system, and place your component into the final DS when the conceptual ones are consolidated as implementable elements.”
What can also be beneficial, is the constructive use of the keyboard: “accelerate your design process by learning how to use keyboard shortcuts effectively.” This can save you a lot of time while working in a comfortable way on your designs.
Final Thoughts
As you can see, we UX studio designers have quite a nice collection of Figma best practices, and you can believe me, we know what we are talking about. Having more than 10 years of experience in the field and an always-evolving professional background let us feel confident about knowing how to use this super UX design tool effectively.
Use our 10+1 commandments to speed up your professional life in product design, simplify your and your colleagues' lives, and make the most of using Figma. It will pay off.
