Work faster and more efficiently with these new options
Last month, Figma launched a great update to the component properties feature. This update helps us work faster and more efficiently with components during the design process.
Check out my full guide if you don’t know what component properties are.
You’ll be able to do three advanced things with component properties with the new update.
- Use components properties for nested components (Expose nested instances).
- Help the user pick a recommended component (Preferred values).
- Reduce complexity in the layers inside the tree by hiding component layers (Simplified instances).
I added videos to this article to help you understand the topic better.
Let’s take a look at how it works:
Turn on the beta
You have to activate the update first since it’s a beta.
- Open the Figma file browser.
- Go to your account.
- Click on “Setting.”
- Scroll down in the account tab to the “New features” section.
- Switch on the “Component properties.”
- You can now use this feature.
Expose nested instances
This option lets you work with the properties of nested components.
Imagine that you have a footer of a modal. If you want to change the buttons inside the modal, you need to click on the button and then change it. With this update, you can access all nested components on the right menu by clicking on the component once.
How to set this option:
- Select the master component.
- Click on the plus icon in the properties section.
- Click on nested instances.
- Select the components you want to enable.
Now when you click on the component, you can change the nested components.
Preferred values
Explaining how designers should design with Figma components is the biggest challenge. Because we work fast and don’t always pay attention to the design system documentation, we can make some errors.
Think about a button. If we add an expose nested instance on the button icons, then designers can access all the icons in the library. How can we explain to them what icons they can use and what icons to avoid?
This feature allows the design system manager to set which components to use. For our button example, the designer can set which icons to use inside the button.
How to set this option
- Select the main component.
- On the properties menu (right menu), Click on the edit property icon for the component.
- On the “Preferred values”, select the component that the designer should use.
From now, each time the designer wants to change the icons, they will have a list of the recommended icons to use.
Simplified instances
We do not need to work with layers when working with instances. If the library is created properly, we can change all the properties from the properties menu.
This feature hides all the unnecessary information when we work with instances. If it’s on, it’ll hide layers on the left menus and other properties on the right menu.
How to set this option
- Select the component.
- Click on the component configuration icon.
- Mark the “Simplify all instances” checkbox.
Now all the unnecessary stuff in the instance will be hidden. If you want to show all the layers of a specific component, click on “show all layers” (left menu) or “show more properties” (right menu).
To summary
This article aimed to explain the new component properties that Figma has released in the beta version. I showed you how to activate the beta, how the new options can help you, and how to add them to your design.
Thank you for reading the article. I hope this article helped you understand how to use Figma’s Component properties advanced options. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.
If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.
Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.
Read the full article here
