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 locations, use “Choose Similar.” This works for both design elements and text. Make sure to first 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 will inherit the variables and any changes. Therefore, avoid overriding spacing, padding, or other variables in instances unless absolutely necessary.

If you want to know more about variables, check out my 1 one-hour introduction course from beginner to advanced

Keep Your UI Clean: Use Scoping

To keep your UI clean, bulk scope variables by holding down Cmd, selecting all variables, and setting the scoping to limit their visibility to relevant areas, like padding, spacing and width settings or whatever makes sense in your system.

Remember, you can alias variables in Figma to set up your primitives and then organise them into a more semantic structure. How far you want to go with a semantic approach tailored to components is a topic worth discussing and depends on your project. Here is a great free video where Luis Ouriach from Figma and Ridd discuss this topic in more depth.

3. Automatically rename layers with AI

With the new Figma AI, you can automatically rename all your layers. Just select a frame, click the AI tool, and run the action.

Note: This will not rename any layers you’ve already renamed.

4. Use AI to generate and replace content in instances

Use Figma AI to quickly generate content in your instances. Ensure you use descriptive names, like “Location” or “Hotel Name,” instead of placeholders like “Lorem Ipsum.” This helps the AI understand what to alter and you can target specific areas. You can also bulk translate content into any other language.

Tip: Figma generates 4 images for you. If you would like to use more than one and save them for later, just drag them onto the canvas from the generator.

5. Magic handle

This is my favourite hidden feature. Within an Auto Layout frame with two or more identical instances, a small handle will appear. Pull it down to create additional instances and automatically adjust the content. I love it!

Note: If it doesn’t work, ensure you have two or more identical instances and that you’ve added content beforehand so the AI knows how to adjust the text. This feature currently only works with text, not images.

6. Embed light and dark modes into components

Instead of separating components for light and dark modes, use colour variables in your components. Create a second mode for dark colours. You can switch modes manually or, preferably, set components to auto and adjust the parent frame setting to light or dark (ensure the parent frame fill is also a variable). Components will automatically inherit the mode and adapt their colours as they move in and out of frames.

Use selection colours to quickly convert all colours to variables. To ensure all colours are variables, select the entire frame and use the selection colours tool. This helps you catch all colours at once.

Note: This is especially useful for ensuring all light and dark mode components are correctly set to 100% with variables.

7. Bind variants to modes to automate breakpoints

Step 1: Set up a collection with a mode for each breakpoint: Set up a collection with a string variable and two modes. Name the modes as you prefer, such as “breakpoints” or “mobile” and “desktop.” However, the variable name for the mode must exactly match the names of your variants. This is crucial for it to work properly!

Step 2: Bind the Variant to the Variable: Create an instance (this currently works only on instances of components). You will see the variable’s sign in the properties panel (hover over it!), then find the variable you created.

Step 3: Set the Mode on the Parent Frame: Drag the instance onto the parent frames representing the screens. Ensure your instances stay set to “auto,” but select the parent frame and change it to the breakpoint (the mode you created). As you move the instance, you will see it pick the right variant for each frame.

Note: You will only see the mode switch for the parent frame if it contains an element using a variable from that collection!

Extra tip, set min and max width for the frame

You can add minimum and maximum width to the parent frame (make sure you are using auto layout for this to work). This ensures it is not stretched beyond or below the given breakpoint while testing.

8. Boolean component

Instead of creating a variant for every breakpoint, you can use boolean variables in Figma. This feature is somewhat hidden; right-click the eye icon to access it. Using modes, You can bind boolean variables to different elements within your component, toggling them on and off at breakpoints.

Step 1: Set up a variable collection with a mode for each screen size and boolean variables to control when elements are shown or hidden per mode.

Step 2: Place all your elements in a single component and connect them with the created variables

Note: I recommend adding a documentation sheet to avoid confusion. By default, only the first mode is displayed, and hidden elements are not highlighted in dev mode, which can be confusing. Discuss this technique with your team, as while variants may require more work, they often provide clearer logic.

9. Bulk rename all

Press Cmd+R to quickly rename all elements. This is especially useful for adding or removing / naming conventions, adding numbers or replacing text e.g. in large groups, such as an icon set.

10. Use sections to create component subfolders

You can use the / naming convention to organise components, but I recommend using sections instead. Press Shift+S to create a section. Drag your components onto the section to automatically create a subfolder in the Assets panel. You can change the location of components and rename sections at any time.

Note: Ensure “Show subfolders” is activated in the Assets menu for this to work!

Tip: Mark the entire sections as “Ready for Development” to simplify communication about component states between design and development.

11. In-File preview interactive component shortcut

Select a frame with interactive instances and press Shift + Spacebar to quickly test your interactive component behaviour with the in-file preview.

12. Create multiple components and variants fast

Creating multiple components or entire component sets with one action has been available before; however, it has moved in the latest update and can now be found in the component dropdown.

13. Use props and ‘Preferred Values’ for slot components

Slot components hold a nested instance as a placeholder where sub-elements can be swapped in. Ensure the main component is set up with Auto Layout for this to work. Now, you can turn the nested instance into a component property and set preferred values for swapping. This helps users quickly identify which elements are intended for the slot and reduces confusion.

14. Creating Figma components from existing pages via URLs in seconds

In a perfect world, all your components between design and development are documented. However, as we know, the world is not always perfect, so sometimes you have to work backwards and create UI components from existing pages. The html.to.design plugin allows you to quickly create Figma pages from URLs.