Figma Best Practices

As many of you might remember, in the early days of UI design, we didn’t have the excellent tools we have now. We dealt with Photoshop files with thousands of layers or massive Illustrator files until Sketch came along, solving many of our problems and becoming an essential tool at UXDivers. InVision played an important role in those days when it came to presenting, prototyping, and interacting with the client. Then came Figma, which seemed to have potential, but was still very young at the time. However, after a short period of using it and seeing the community support behind it, quickly replaced the entire process with a single tool, and we made the switch without hesitation.

With our experience working with Figma since its early days, we believe some best practices are very useful to know. These practices help streamline design processes and development, both in our Grial UI Kit product and in the numerous services we provide.

‍

Use Variable Libraries

Even though this is a relatively new addition, it has enormous potential in many aspects such as colors, typography, properties, prototyping, and much more. But the basics would be to have libraries at least for the things we use most, for example:

• Units (spacing, radius)
• Colors (more than one theme if necessary)
• Typography (family, weight, sizes)

This way, the design process is significantly accelerated, and we avoid inconsistencies in the UI.

Learn more here.

‍

Create Components 

The use of components and variants in our designs is vital for maintaining consistency and avoiding having to repeat changes to the same element in multiple places.

• Consider all the possible variations or states that a component might have and create variants for each one.
• Nest components, if needed, allow you to create more complex elements and also inherit properties from one component within another.

Learn more here.

‍

Use Auto-Layout 

This is another powerful tool that can be a little bit tricky at first but is without doubt one of our best friends when designing elements whether for a component, organizing elements on a screen, making our designs responsive, and much more.

‍

Learn more here.

‍

Utilize Constraints 

Hand-in-hand with auto-layout is the use of constraints, which are fundamental in understanding how elements behave when modifying their container. The main use would be when we need to ensure that our design behaves well on different screen sizes.

Related to this, we could also link it with the use of variables and Min/Max sizes.

• Variables: We can define specific properties that change depending on a particular value. 

For example, we can have two button sizes: Mobile and Desktop. If our design switches from one mode to another, our button will too.

• Min/Max size: By defining minimum and maximum sizes in our components, we avoid elements being too small or too large, ensuring they look good on any screen.

‍

Learn more here.

‍

Frames for (Almost) Everything 

Challenge yourself to only use Frames, not groups or rectangles. Frames have many functionalities and generally simplify and improve your designs. Avoid adding rectangles as backgrounds, the same for images. Frames allow corner radius and, if that weren’t enough, they enable auto-layout among many other benefits.

‍

Learn more here.

‍

Organize, Organize 

Keep in mind that there’s usually a team working, and you’re not alone, so everything must be accessible and easy to understand, whether for another designer or the developer who will later implement your design.

While this isn’t a feature unique to Figma, there are some tools to help us with this:

• Use Sections to organize flows or groups of screens of the same type.
• Also, use Pages and try to keep them as organized as possible.

Tip: Recently, the option was added to create a separator when naming a Page with three "---". Say goodbye to those "________" pages we’ve all made to keep things organized.

‍

Learn more here.

‍

Create Branches

Related to organization, a good practice is using Branches. Despite being common in development, it’s not that common in design, but it’s very useful. We can create a specific Branch to share with a client while working on something else without overlap. Another common use is when we are willing to work on a new feature; create a Branch and make all the necessary tests or modifications without altering the Master file.

Caution: At least for now, comments made in each Branch don’t merge with the master; they remain visible only in that Branch.

‍

Learn more here.

‍

Use a Design System 

Last but not least is the use of a Design System. Much of what we viewed earlier could be part of it and used as a library in as many files as we want.

Having a Design System is something that’s constantly evolving. For Grial Kit, it’s crucial to have a library with all the necessary pieces to build any UI we want or to add new elements while maintaining the essence of our Kit.

‍

Learn more here.

‍

Conclusion 

We could make an entire blog about each of these options, but for now, this is a way to get familiar with the concepts and understand how to implement them, It’s important to be aware of some of Figma’s capabilities, which will greatly improve your productivity and save you a lot of time.

Are you familiar with or do you use any of these practices in Figma? Please share them with people who might find them helpful.