How to Create Components in Figma
Learn how to create reusable Figma components with variants. Build buttons, cards, and inputs that stay consistent across your entire design.
Step-by-step
How to Create Components in Figma
Design your base element
Design the element you want to reuse — for example, a button with a background rectangle, text label, and optional icon. Use auto layout (Shift+A) so the component resizes based on its content.
Convert to a component
Select the element and press Ctrl/Cmd+Alt+K (or right-click then 'Create component'). The element becomes a main component (purple diamond icon). Any copies you make are instances that stay linked to the main component.
Add variants
Select the main component and click 'Add variant' in the right panel. This creates a variant group. Add variants for different states (default, hover, disabled) and sizes (small, medium, large). Name the properties clearly: 'State=Default', 'Size=Medium'.
Add component properties
Use component properties to make instances configurable without creating new variants. Add boolean properties (show/hide icon), text properties (editable label), and instance swap properties (swap the icon). This keeps your component set lean.
Use and override instances
Drag instances from the Assets panel (Alt+2) into your designs. Override text, swap nested instances, and toggle boolean properties in the right panel. Changes to the main component propagate to all instances; instance overrides are preserved.
Tips
Pro tips
- *
Name components with a clear hierarchy using slashes: 'Button/Primary/Large' creates nested categories in the Assets panel
- *
Always build components with auto layout — it ensures they resize correctly when text content changes
- *
Use the 'description' field on the main component to document usage guidelines that appear as a tooltip on hover
- *
Create a dedicated 'Components' page in your design file to organize and document all main components
Related guides