Choose your language

9 Figma design system tips

Marc Andrew
  • #Design
  • #UX
  • #UI
  • #Figma
  • #VisualDesign

9 Figma design system tips

Marc Andrew
  • #Design
  • #UX
  • #UI
  • #Figma
  • #VisualDesign

Image showing Figma's logo

9 Figma design system tips

A collection of handy tips to improve your design system workflow in Figma.

Originally published at on October 6th, 2021.

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 get started…

1. Use Selection Colors when changing colours in bulk.

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

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.

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

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

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.

3. To locate Text Styles faster, just use Search.

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

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.

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

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

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.

5. To navigate your Layers faster, use these keyboard shortcuts.

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

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.

6. Swap-out Components faster with this handy shortcut.

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

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.

7. Resize your Auto-Layout powered Components in the blink of an eye.

An example of the Eye icon being used in the Layer Panels in Figma to quickly hide and show 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.

8. Avoid text-alignment confusion when using Auto-Layout.

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

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.

9. Component not resizing correctly? Have you checked the Spacing?

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

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.

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.