Component

properties
This playground is designed to help you
get started with component properties.

Start ->
Contents
-> What are component properties? Choose your own
-> Create and use a text property adventure or press
-> Create and use a boolean property the N key to navigate
-> Create and use the instance swap property to the next frame.
(Shift + N to navigate backwards)
-> Expose nested instances
-> Additional things to note
-> More examples
-> Additional resources
What are
component
properties?
This playground is designed to help you
get started with component properties.
What are Button Button Button

component
properties?
Component properties assign
Button Checkout Button
names and values to elements
that can to be customized in a
component, such as: an instance
that can be swapped, a text layer Button Button
that can be updated, or a
element’s visibility that can 

be toggled on/off.
Boolean property
Text property
Swap instance property

toggles layer visibility overrides text from design panel instance swap from design panel
What are the main benefits

Reduction in manually-created
variant
Easier discovery of which parts
of a component can be
customize
Closer alignment between Button
design and code-- your
developers will love you!
We can combine all three properties

to build a robust component

Reduce the
amount of
variants
With component properties it will
be possible to significantly reduce
the amount of variants needed,

For example: You can use a boolean

Button Button Button
property to eliminate the need to
create multiple versions of a button
with and without an icon. Button Button Button

A component with variants only A component with variants

and component props
Better alignment
with code
<Button icon=”bell” />
Component properties allow you to
set up your components with the <ModalPopup title=”Warning!” />
same attributes you'd have in code.

For example:

<button iconBefore="bell"> 

can now be represented with a
button using an instance swap
property called "iconBefore" set to
bell. This alignment makes it easier Button label
to update and maintain consistency Warning!
between your design sytem and
codebase. Hi, I’m a modal with a title prop.

OK
Text property
Learn how to create and use text
properties
Create a text
property Select the text layer
Click me
If you have text layers in a
component that are intended to be
customized, you can create a text
property that will surface in the
1 Select the “Click me” text layer. In 2 Give it the name “Label”. You can
design panel.

the properties panel, in the new also set it’s default value. It will
This will allow you to content section, click on the default to whatever text is currently
property icon to create an new text in the text box.
Create a text property with a
property.
named value like code
components often have, 

ex: label=”Click me
Update text in components
Apply text property
without diving into sublayers
Edit a text

property from

the design panel

Let’s try using our new text

property.

1 Select the CTA button. In the

design panel you will now

see a “Label” text property. Search

Searchfor
forsomething
somethingcool
cool Click
Click me
me

Change the text using the label property

2 Edit and change “Click me”

to “Search” directly in the

design panel.
Batch editing a
text property
You can select multiple objects and
override text at once. This should
speed up your workflow.

1 Select both CTA buttons

2 Go to the design panel and Figma FigJam

edit the “Label” text
property for both buttons at A collaborative design tool for teams An online whiteboard for teams to
once. to design and prototype together. explore ideas together.

Click me Click me

Select both buttons to change the

labels at once using the text property
Boolean
property
Learn how to create and use boolean
properties.
Create a boolean Select the image layer. In the Layer
property 1
section of the design panel, click on
Select the image layer the property icon to apply a new
Boolean properties enable you to boolean property.
toggle the visibility of a layer inside
your component from the design
panel.

Apply boolean property

This will allow you to
Add toggleable items in your
components without having to 2 Change the name to something
make additional variant descriptive. Let’s call it “Image” and
Surface a toggle switch in the set the default value to true. 

design panel for easy on/off (true = visible, false = hidden)
Excursion name
A short description of the adventure.

Book excursion
Using a boolean
property
Let’s try using the new “Image” Select me
boolean property that you created.

1 Select the instance of the

card component.

2 Now when you select the

instance, you will see the
option to toggle the image
property. Try turning it off
and on! Backpack bonanza!
A short description of the adventure.

Book excursion
Instance swap
property
Learn how to create and use instance
swap properties
Create an Double click to select the icon
instance swap
property Message title

A message to communicate to the user.

No more digging into the layers
panel to swap an instance – you
can do this all from the parent
property in the design panel.
Click the information icon on the Change the name to something
1 2
This will allow you to right side of the component, then descriptive, e.g. “Icon”.

go to the instance in the design

Add customizable nested The value field is where you set the
panel and apply a new instance
instances in your component default instance, in which case can
swap property.
Set a default instance from any be “info”.
local or enabled library

Apply instance swap property

Icons
 Beta
Create a list of
preferred values Select me
You can also define a list of Message title

preferred values for instance swap. A message to communicate to the user.

This helps prioritize and focus
users on the most relevant
instances that should be used.

3 To edit preferred values for existing 4 Click on the plus button next to
Go here to learn how to opt-in to instance swap properties, click on Preferred values and check which
the open beta. the “edit properties” icon next to instances you want to appear as a
the desired property to access its prefered value.
settings and preferred values.
Icons

Edit property
Use instance
swap property
1 Select the notification
instance by clicking on it.

2 Head over to the design

panel on the right and click
on “info” to swap the icon for Select me
“heart” instance. Message title

A message to communicate to the user.

Expose
nested
instances
Learn now to bubble up the properties of
nested instances
 Beta
Expose nested
instance
properties Select me

You can bubble up nested

components and their properties to
the properties panel of the main
container component.

1 Select the card component.

2 Click the plus button next to

Properties and select
Figma
“Nested instances” to
expose the nested button A collaborative design tool for teams
instance. to design and prototype together.

Button
 Beta
Customize
nested instance
properties Select me

Now that we’ve exposed the nested

button component’s properties, you
can edit them directly from the
properties panel without navigating
to the button’s layer.

1 Select the card component

instance.
Figma
2 Edit the nested button
component’s label and icon.
A collaborative design tool for teams
to design and prototype together.

Button
 Go to component configuration
Beta
Simplify
instances
Simplify all component instances to
reduce the complexity of the design
panel and focus user attention on
what can be changed using
component properties.

For example:

Here you see instances of identical

components. However, the
component of the instance on the
left has “Simplify all instances”
selected, while the right one
doesn’t. Click on each to see how Figma Figma
the layer and design panels change.
A collaborative design tool for teams A collaborative design tool for teams
to design and prototype together. to design and prototype together.

Button Button

Simplified instance experience Standard instance experience

Additional
things to note
Learn more about how you can use
component properties more efficiently
When to use
component Variant Component
properties properties
properties?
Component properties and variants
work together, but sometimes a
Different size,
property makes sense, and in other color, styling
a variant is a better choice.

Use variants properties if

You have a major visual change, Different states

like a variant in size, color, or (i.e. interactive)
other styling
You need to communicate an
interactive state (ex: hover)

 Has boolean
logic (on/off
visibility)
Use component properties if

Your component has toggleable

configurations (like a version Has instances
with/without an icon that need
Your component has instances customization
or text layers that need
customization
Making batch
edits in a
component set
In order to make it easier to make A message to communicate to the user.
batch changes across your
variants, we’ve added a new
feature which will allow you to
easily select all matching layers A message to communicate to the user.
across your entire component set.
1 Select only the text layer in A message to communicate to the user.
the first variant.
2 Click on the target icon to
select all of the matching A message to communicate to the user.
layers across all of the
variants. Now you can batch
changes all at once.
More Ana Boyer
Hey! Do you want to grab some din

examples Jake Albaugh

Typing....
Let’s bring it all together with some
examples for you to explore and
Hugo Raymond
deconstruct!
#Config2022 is global this year! Ch
Message list

You can create a more dynamic and

FirstName LastName 00:00am

customizable component set using

a combination of features.
Subline

Play around with the message list

FirstName LastName 00:00am

example and see how

Typing....

Text property is used to

customize name, message

preview, and timestam

Boolean property is used to Ana Boyer 10:32am

switch on/off online and read Hey! Do you want to grab some dinner later?

statu

Variant properties is still used

for different messaging state Select Message Jake Albaugh 9:12am

You can bring it all together instance

Typing....

with auto layout to create a

dynamic messaging feed

Hugo Raymond 7:15am

#Config2022 is global this year! Check it...

Interactive
button
You can create a set of buttons that
combine the power of variant
properties, component properties,
as well as interactive components
Button Button Button Button
Select and copy a button from the
example to see how
Button Button Button Button
Text property is used to
customize the button CT
Boolean property is used to turn Button Button Button Button
on/off the heart ico
Instance swap property is used
to let you swap out the heart
ico
Variant properties are used for
different button colors and Button
state
And finally, tab over to
Prototype to see how the Select Button instance
buttons can also be interactive
Engagement
cards Collaboration card title

Here’s on more example to see how 2 days

text, boolean, and instance swap
properties all come together to
create visually different instances.

Submit expense reports Submit expense reports

for Config travels for Config travels
Related tickets Collaborators 2 days
291 4

Select Task card instance and play with the different properties
 Help Center

Component
All about component
properties

properties
Read the article

resources
Office Hours
More resources to help you use
component properties and streamline your Learn more best practices
design systems and tips
Watch the recording