Component Properties
Create Boolean, Text, Instance Swap, and Variant properties for flexible, customizable components.
Components
No shortcutAdvanced14 min readQuick Reference
Component Properties
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Advanced⏱ 1–2 hours to master
Key Settings
Boolean:Text:Instance Swap:Variants:
Component Properties make your components flexible and customizable. You can expose certain parts of a component for editing without detaching the instance.
Where to Find It
Select a component, then click the Add Property button in the Design panel under Component Properties.
How to Use
- Boolean: Toggle visibility of specific layers (show/hide an icon, label, etc.).
- Text: Allow instances to change text content without detaching.
- Instance Swap: Let instances swap between different component sets (swap icons, avatars).
- Variants: Appears automatically when using variants to switch between states.
Pro Tips
- Use Boolean properties for optional elements like badges, icons, or dividers in card components.
- Text properties are perfect for button labels, card titles, and any dynamic text content.