Components & Variants in Figma

Introduction

Consistency and efficiency are essential in UI design, and Figma’s Components and Variants help you achieve both. They let you reuse elements like buttons, icons, and cards across your designs — while keeping everything in sync. In this guide, you’ll learn how to create components, edit instances, and get started with variants — all within the Figma Free plan.

1. Creating Components in Figma

Image Placeholder: Selected UI element with “Create Component” option highlighted

To convert any element into a Component:

1. Select the element or group of elements (e.g., a styled button)
2. Right-click and choose “Create Component”, or use the shortcut Cmd/Ctrl + Alt + K

A purple outline will appear around the component, and it will now appear in the Assets panel. You can drag out multiple instances of this component wherever you need them.

Why use components?

• Make changes once, and see updates everywhere
• Maintain design consistency
• Speed up repetitive UI creation

2. Making Changes to Component Instances

Image Placeholder: A component instance being overridden with different text or icon

When you drag an instance of a component onto the canvas, you can customize certain parts — like text, colors, or icons — without breaking the connection to the main component.

Instance overrides let you:

• Change text or nested content
• Swap icons or images
• Adjust layout properties if they’re exposed
• Replace with another component (via “Swap Instance”)

If you need to break the connection, use “Detach Instance”, though it’s best to do so sparingly to maintain consistency.

3. Intro to Variants (Yes, Even on Free Tier)

Image Placeholder: Component set with variants like Default, Hover, and Disabled

Variants allow you to group related versions of a component — like buttons with different states or inputs with different types — into a single, manageable structure.

To create variants:

1. Select two or more similar components (e.g., Button/Default and Button/Hover)
2. Right-click → “Combine as Variants”

This creates a Component Set with variant properties (e.g., state=default, state=hover, type=primary). You can adjust or add properties in the right panel.

🟢 Good news: Variants are fully available in the free version of Figma — as long as you’re working within a single file.

4. Best Practices for Naming & Organizing Components

Image Placeholder: Assets panel with well-named, categorized components

Keep your component library clean and scalable with these tips:

✅ Naming conventions:

• Use slashes (/) to create folders in the Assets panel (e.g., Button/Primary, Button/Secondary)
• Use meaningful variant properties (e.g., state=hover, size=large)
• Prefix reusable components (e.g., Icon/Arrow, Input/Text)

✅ Organization tips:

• Keep all base components in a dedicated page like 📦 Components
• Use consistent spacing, sizing, and Auto Layout inside components
• Document how components should be used if working in teams

Conclusion

Figma’s Components and Variants let you design smarter, faster, and more consistently. Even if you’re using the free version, you can build powerful component sets, override instances, and organize your design system within a single file. Master these tools, and you’ll unlock one of Figma’s greatest strengths.