Why It Matters
Variant properties are the backbone of flexible component systems. Each property (like Size, State, Type) can have multiple values (Small/Medium/Large, Default/Hover/Disabled, Primary/Secondary). Well-named properties make components intuitive; poorly named ones create confusion. Boolean properties can be exposed as simple toggles in the properties panel.
Examples
1
Property "Size" with values "sm", "md", "lg" controls button dimensions.
2
Property "hasIcon" (boolean) toggles icon visibility in a button component.
3
Property "State" with values "default", "hover", "active", "disabled" handles interaction states.
How BiblioKit Helps
Use RenameVariantsAI to standardize your variant property names across all components. AI-powered suggestions help you adopt consistent naming conventions.
Related Terms
Component Set
A group of related component variants combined into a single component with configurable properties, allowing users to switch between variants without swapping components.
Naming Conventions
Standardized rules for naming design elements like layers, components, variants, and tokens to ensure consistency and improve team collaboration.
Component States
The different visual appearances a component can have based on user interaction or context, such as default, hover, active, focus, disabled, and error states.
Instance
A linked copy of a main component that inherits its properties and automatically updates when the main component changes.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.