9 Figma Design System Tips

With this article, I've listed a few quick and easy methods to help you speed up your design workflow in Figma.

9 Figma Design System Tips
Photo by Shubham Dhage / Unsplash

With this article, I've listed a few quick and easy methods to help you speed up your design workflow in Figma.

Most of these suggestions are ideal for when you're dealing with design systems or huge design files, but they're also suitable for regular day-to-day use within Figma.

Some of these you may already be familiar with, but hopefully, you'll find the occasional undiscovered treasure in here as well.

Let's dive on in...

Use Selection Colors when changing colours in bulk.

When working with more substantial Components and needing to change colours quickly, don’t waste time by clicking into separate elements and changing colours one by one.

Use the Selection Colors panel to modify those colours in bulk and much more quickly.

An example of Selection Colors being used on Mobile App design in Figma

With this helpful shortcut, you can keep your Layers tidy.

In the past, I’ve been guilty of leaving my Layers panel looking like organised chaos, with group after group, element after element open, making it difficult to discover items in the Layers panel.

Use the simple keyboard shortcut Alt + L to collapse all Layers and keep your panel tidy and focused on the project at hand.

An example of a keyboard shortcut being used in Figma to collapse the Layers Panel

When swapping out Text Styles, don’t endlessly scroll through the options to find what you need. Use the Search.

It’s faster to type in Headline 2 or H2 than to navigate through an extensive list of Text Styles to find a suitable option.

And don’t always feel that you have to go ahead and type out the full style name in the Search field, for example, ‘Headline 37’.

Something shorthand like ‘H 37’ is all you need.

Keep it short and sweet, and work through your designs even faster.

An example of the Text Styles Search feature being used in Figma

To navigate Color Styles more quickly, choose the List option.

As I previously mentioned, when working with an extensive Design System, it is beneficial to navigate Colour Styles, Text Styles, and so on as quickly as possible.

Switching to the List option (rather than the Grid option) in the Inspector, in my opinion, always makes it easier to browse your Color Styles with the extra benefits of the Label displayed rather than just the colour swatch alone.

An example of the List option being selected in the Colors Panel in Figma

To navigate your Layers faster, use these keyboard shortcuts.

I’ve been guilty in the past of scrolling and clicking through numerous Groups and Parent containers in the Layers panel to find the relevant element.

Save yourself some time and avoid using the mouse.

Use the keyboard commands Tab and Enter to quickly drill down through elements in your Layers panel to locate what you’re looking for fast.

Oh. And hold Shift while using the keys I just mentioned to navigate back up through your Layer groups and parent containers.

An example of keyboard shortcuts being used to navigate quickly through the Layers Panel in Figma

Swap-out Components faster with this handy shortcut.

This tip has proven useful when working on different design revisions, and it works best when switching out Icons in a project.

For example, select an icon from your Assets panel and then, while holding down Alt + Cmd, drag your icon across your design, where you’ll notice a purple border around your existing icon, and then swap it out in record time.

An example of a keyboard shortcut being used in Figma to quickly swap out elements in a design

When working with a Main Component that you’ve inserted into your project, call upon the Eye icon in the Layers panel to quickly hide elements you don’t require.

This handy little icon will also make your Component resize and adjust accordingly and enable you to have a Component perfectly suited to your requirements.

An example of the Eye icon being used in the Layer Panels in Figma to quickly hide and show elements in a design

Avoid text-alignment confusion when using Auto-Layout.

When it comes to using Auto Layout powered Components, one thing that can cause users a bit of confusion is why those pesky text elements are not aligning like everything else in the component.

Worry no more.

With text elements, remember to jump into the text alignment settings and make the necessary changes there to have your text align correctly with the rest of the elements.

An example of Text Alignment being used on a text element in Figma

Component not resizing correctly? Have you checked the Spacing?

On certain Components with Auto Layout attached to them, you may see some strange visual quirks when you try to resize them manually.

For example, with something simple like a Chip Component. You type away to change the label, and everything expands perfectly.

But, when you want to go ahead and grab those resizing handles, things don’t always look so great.

No problem. Just jump into the Auto Layout settings and set the spacing from Packed to Space Between.

An example of the Auto Layout spacing options being used on a design in Figma

Hopefully, you’ve found a few helpful tips here that you can put into action right now to help enhance your workflow today.

Figma is an excellent tool with so many valuable and time-saving shortcuts that I’m sure you’ll discover many more as well.

By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Creating amazing designs is hard when you’ve got deadlines to meet. So we built Cabana, a Design System for Figma that enables you to start projects faster.

Thanks for reading the article,