Description
As designers, we often create many versions of the same element, like buttons, cards and icons, and it gets messy fast with lots of copy and pasting just to make our design look the way we want. Luckily, Figma gives us a way to make our components not only cleaner but also smarter, with properties.
If you know React, this will feel familiar. In React we don't always know what text a button or a card will show, but we know we will use it a lot, so we pass in props. Properties in Figma are exactly the same idea: ONE component, many versions, controlled from the right panel. And this is how the developers in your group will build these components in code, so it makes the handoff so much easier!
The 4 types of properties:
Text property
- Lets you change the text of a component without detaching it, for example the label of a button: "Buy now", "Read more", "Sign up".
- How: select a text layer inside your main component, and in the right panel click the small property icon in the text section to create a text property.
Boolean property (true / false)
- Shows or hides a layer, for example an icon in a button or a badge on a card. Instead of making 2 versions of the button, you have ONE with a toggle "Show icon".
- How: select the layer, and in the Layer section of the right panel click the property icon to create a boolean property.
Instance swap property
- Lets you swap one nested component for another, for example which icon is inside the button (arrow, plus, heart...).
- How: select the nested instance, and in the right panel create an instance swap property. Tip: make your icons into components first!
Variant property
- Different versions of the same component, like Type (primary, secondary), Size (small, medium, large) or State (default, hover, pressed, disabled).
- How: select your component and click "Add variant". Figma creates a component set where you can add more variants and give the properties names.
Naming is important!
Good names make your components easy to use for you, your team AND the developers. Use the same names a developer would use in code, for example:
- Component:
Button - Properties:
Type = Primary,Size = Large,State = Hover,Show icon = true,Label = "Sign up"
Avoid names like "Frame 432" or "button new FINAL 2", nobody knows what those are, not even you in two weeks ;)
Also use auto layout inside your components, so a button grows when the text gets longer instead of the text sticking out of it.
What about AI?
You can ask AI to help you plan your components, for example "which states does a text input usually need?". It's a great checklist so you don't forget the error or the disabled state. But building and naming the components is your job, that's the skill this guide is about.
By the end of this guide you'll be designing with flexibility and scalability in mind, like a pro.