As your Figma design system grows, combining components becomes essential. Whether you’re building buttons with icons, cards with nested UI elements, or multi-state dropdowns, combined components help you create modular, reusable patterns that scale.
In this guide, you’ll learn:
- What it means to combine components in Figma
- How to nest components inside other components
- Best practices for using instances, variants, and props
- Pro tips to avoid broken or uneditable combos
🧩 What Does “Combining Components” Mean?
In Figma, components are reusable design blocks. Combining components means placing one component inside another—creating a structure where changes can cascade and parts can be reused.
This is often called nesting, and it’s one of the most powerful features in Figma.
Real-world examples:
- A button that includes an icon component
- A card that contains a user avatar and a text label component
- A dropdown menu built with list item components
🔁 How to Combine Components (Step-by-Step)
Let’s walk through an example: adding an icon component inside a button component.
Step 1: Create the Individual Components
- Make your icon a component:
Right Click → Create Component - Make your button base a component too
Step 2: Insert the Icon Into the Button
- Open the main button component
- Drag in an instance of the icon component
- Position it inside the button (use Auto Layout for flexibility)
Now your button is a combined component made of two reusable pieces.
🧠 Why Use Combined Components?
- Reusability: Change the icon in one place, update it everywhere
- Scalability: Use the same base button with multiple icons or labels
- Variants: Add states (hover, active, disabled) without duplicating inner elements
- Developer Handoff: Clean layers and consistent naming
💡 Use Auto Layout for Flexibility
Auto layout makes combining components much easier.
- Apply auto layout to the parent component
- Add padding and spacing
- Nest icon and label components as children
- Set alignment rules (e.g., center-left)
This ensures your combined component responds well to content changes.
🧪 Add Variants to Combined Components
Want to switch icons or text styles?
Use Variants + Component Properties.
Example:
- Create a button with an icon on the left
- Add variants for:
- Icon only
- Text only
- Icon + Text
- Use “Instance Swap” properties to switch nested components like icons
- Use Boolean or Text props for content toggling
🎯 This is how you create advanced, yet manageable, UI systems.
🧼 Keep It Clean: Best Practices
| Tip | Why It Matters |
|---|---|
| Name your layers clearly | Helps developers & future-you |
| Don’t detach instances | You lose reusability |
| Use “Swap Instance” props | Makes updates painless |
| Group variants logically | Improves dropdown menu UX |
| Avoid nesting too deep | Too many levels = confusion |
🚫 What Not to Do
- ❌ Don’t flatten combined components just to reposition elements
- ❌ Don’t build one-off combinations if you’ll reuse them
- ❌ Don’t skip props—it’s what makes combination powerful
✅ In Summary: Combining Components in Figma
| Goal | Action |
|---|---|
| Add an icon to a button | Nest icon instance inside button |
| Make scalable components | Use auto layout and variants |
| Swap inner parts easily | Use instance swap props |
| Reuse nested parts | Make each part its own component |
Combining components in Figma is like building LEGO: small, modular pieces that click together into powerful interfaces. Done right, it makes your UI design cleaner, faster, and future-proof.
Want more smart Figma techniques, component strategies, and system architecture guides? Browse the full collection at Designilo.com.
Designilo 