Advanced Figma components tips & tricks: little gems we love 2024

At Config 2024, Figma rolled out a fresh new user interface design with some fantastic new features and hidden gems.

**************************************************************

Not a Medium member? Read the full article, bypassing the paywall, here: https://www.moonlearning.io/articles

**************************************************************

At Config 2024, Figma rolled out a fresh new user interface design with some fantastic new features and hidden gems. Let me quickly share some of my old favourites and plenty of new tips and highlight what you might have missed when working with components in Figma.

1. Select matching layers in components

This is one of my favourites! To select or modify identical elements across multiple components, use “Select matching layers” This works for both design elements and text. Make sure first to select an element inside the component for this option to appear.

Lock multi-edit for variants

Instead of selecting matching layers within a variant set, use the multi-edit option. It works similarly but automatically selects all matching layers to keep your variants in sync. This is very handy!

📌Note: The old UI had a target icon for this feature; in the new UI, this was replaced with multi-edit.

2. Use variables for component padding and spacing

Use variables for all padding and spacing in your components. Your component must be set up with Auto Layout for this to work. All instances…