code • Figma components with props - martindubenet/wed-dev-design GitHub Wiki
[ Figma 101 ][ Figma components with props ][ Figma for React code ]
Figma components with props
Building flexible components with "slots"
We often find ourselves creating lots of different variations of similar components, this can be tedious and difficult to maintain. Using a technique called « slots », we can swap out components very easily from a single component. This gives our teams flexibility to create new designs whilst still using the guidelines from our design system.
- 2021 tutorial on YouTube with it's related Figma file
Props as in « Available Properties »
Instead of displaying all of your component's variants in a Design System file since we can now rely on properties, just as developers do within their ReactJS or VueJS templating files. The advantage with this feature is that the component now contains all his allowed variants within himself.
So everytime a new version of that component is saved and pushed on Figma's server everywhere the component is used gets the added features (and fixes).
4 types of properties
| Type | Description | UI within Figma's right sidebar |
|---|---|---|
| Instance Swap | Dropdown | |
| Text | Text input | |
| Bolean | Switch (toggle) | |
| Variant | A duplicated (child) component that either is styled differently according to the parent in which he is used, or is an interactive component. |
Component properties can be created from two levels: the parent layer or the child layer of a main component or component set. Learn about the relationship between parent and child layers →
Managing existing components
- Until Figma optimise it a plugin « Safely delete components » is available.
- Forum : How to delete a property variant
Figma documentation
- Component Properties Playground (figma design file)
- Figma Design ➥ Build design systems ➥ Components ➥ Create and manage component properties
Video tutorials
Component properties video tutorial from Figma's YouTube channel
Play with Figma's Component Properties Playground file while following the tutorial.
- 01:18 - Introduction to the 4 Types of properties
- 02:32 - Instance swap property
- 03:39 - Text property
- 04:07 - Boolean property
- 05:24 - Apply component properties
- 05:53 - Variant property
- 07:36 - Example of editing an E-commerce card component
- 09:26 - Add component properties to an existing variaty of buttons from a Design System