HomeNews & updatesA Guide to Figma Component Properties - Designmodo

A Guide to Figma Component Properties – Designmodo

Luca Vavassori • 6 minutes READ
Last month, during the Config 2022 conference, Figma announced a bunch of exciting new features. One of them is surely the launch of Component Properties, which brings a significant change to the way components are created and managed in Figma.
Before this release, we used variants to create every possible variation of a component and include it into a component set, having the ability to set up a wide range of properties and values combinations (size, color, state, icon visibility, elements positioning, you name it).
Variants are great but the problem comes with larger and more complex projects and design systems, where you could end up with hundreds of variants for a single component, leading to an oversized and hard-to-manage Figma file which can also cause performance issues.
The introduction of component properties brings 3 main advantages to the way components are handled:
Let’s dive in and see which are the new component properties:
It allows you to change the text of a layer included in a component directly from the sidebar properties panel, instead of having to click on each individual text layer in the canvas and edit it. This comes in very handy when you need to change the text of multiple components.
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
It allows you to easily toggle the visibility of a layer within a component, directly from the sidebar panel. Figma does this by letting you set a True or False value to a specific layer, which will make it visible or hidden. Out of the 3 component properties released, this is probably the one that will enable you to significantly cut down the number of variants needed.
This property allows you to quickly swap an instance within a component, straight from a dropdown menu in the sidebar panel, choosing from all the instances included in a local or shared library.
The most common example is a button with an icon next to the text. Thanks to this property, you can easily swap the icon with other icons included in your library.
In this tutorial, we’ll show off the new Figma component properties by creating a button component that will allow you to easily create many variations just by tweaking the component properties in the sidebar panel.
We’ll be able to:
We won’t be using variants in this tutorial, only component properties!
Let’s get started:
Figma will create a new frame which will be your button and will adapt its layout automatically depending on the text length and the icons we will add to it.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
To do that, simply drag an instance of each icon component into the button. Auto layout will take care of everything and will position the icons according to the spacing rules we set earlier (Spacing between items: 12 – Horizontal padding: 24).
We are now ready to enable the component properties!
You will notice that a “Text” property is now visible in the component properties section on the right.
As you can see in the image below, once you select the instance of the button (I made it yellow to make it stand out) you can easily tweak the button properties by using the properties panel on the right.
You can quickly change the button text, the icons in use and their visibility, without ever having to use the layers panel on the left.
This is a truly remarkable new feature. It might take some time getting used to, but once you are up to speed, you will be able to combine it with the already great Variants feature and create solid components for your design systems.
You can duplicate the Figma file for this tutorial here.
I’m a UI/UX Designer and Solopreneur. Founder of UXCrush, one of the largest aggregators of free and premium resources for Figma.
Sign up to get fresh stuff in your email monthly. For those who want to keep in touch with web design and development trends and tools.
We create beautiful website and email builders, helping 30,000 customers to grow their business.
A simple tool to create emails and newsletters.
Create an animated website in minutes.
A perfect tool to create Bootstrap website.
Earn 25% commission on affiliate sales. We have everything you need to make money.
Our useful services seamlessly integrated with each other and our products to get you to the finish line faster.
Drag-n-drop solution for your static website to quickly host your static website.
Design in the cloud and create new websites seamlessly, without any coding skills.
Talk to your audience at scale. Send your email marketing campaign quickly and easily.
Get website downtime alerts by phone call, SMS, email, Slack, etc when your website went down.
Whether you’re an experienced web designer, developer, marketer, or a newbie looking to learn the basics, there’s something for everyone on this blog.
28 articles
13 articles
32 articles
47 articles
21 articles
23 articles
5 articles
4 articles
23 articles
78 articles
18 articles
91 articles
87 articles
24 articles
9 articles
18 articles
122 articles
24 articles
18 articles
7 articles
17 articles
9 articles
89 articles
10 articles
11 articles
4 articles
16 articles
22 articles
We’re always looking for new authors. We’re happy to publish useful articles and tutorials related to web design.
Made by Designmodo.
This website design and code was built using our tools. Treat it as a proof of concept.
Subscribe now to receive discounts, news, and updates. We pinky swear to not spam you. 😉
Copyright © 2010-2022. All Rights Reserved
We use cookies to ensure that we give you the best experience on our website. Privacy Statement.
Your cart is empty 🙀
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Create an amazing static website in minutes and export ready-to-use template.


- Advertisment -

Most Popular

- Advertisment -