Designilo

Introduction: From Clutter to Clarity

Figma’s component properties are a game-changer for design system maintainers. Instead of managing dozens of variants for every size, state, and icon combo, you can create smart, customizable components that are lean, scalable, and intuitive to use.

In this guide, we’ll show how to use Boolean, instance swap, text, and variant properties to create flexible components that reduce duplication and increase usability—without sacrificing control.

1. What Are Component Properties?

Component properties let you expose editable fields on component instances. Types include:

• ✅ Boolean — toggle visibility (e.g., show/hide icon)
• ✅ Text — edit content directly
• ✅ Instance Swap — choose from predefined icons/images
• ✅ Variant — pick between design states like size or type

Instead of creating 18 variants for every possible combination, you create just a few smart ones with customizable properties.

2. Start by Identifying What Should Be Customizable

Great component properties are intentional.

For a button, you might expose:

Property	Type	Use Case
Label	Text	Button text
hasIconLeft	Boolean	Show/hide icon on the left
hasIconRight	Boolean	Show/hide icon on the right
iconLeft	Instance Swap	Choose icon
Variant	Variant	Primary, Secondary, etc.
Size	Variant	Small, Medium, Large

✅ This setup supports dozens of permutations—without bloating your component panel.

3. How to Add Component Properties in Figma

When creating or editing a component:

1. Select the element you want to expose
2. In the right sidebar, click the “Create Property” icon
3. Choose property type:
   • Toggle → Boolean
   • Text override → Text
   • Icon slot → Instance Swap
   • Component state → Variant
4. Name your property clearly (label, hasIconLeft, size)
5. Group related properties logically

🧠 Use slotted frames for icons or images to allow instance swaps.

4. Use Boolean Properties for Visibility Control

Boolean properties are perfect for:

• Icons (left/right)
• Add-ons (badges, labels)
• Decorative elements (shadows, dividers)
• State elements (e.g., loading spinner)

📌 Combine booleans with Auto Layout to dynamically shift spacing when elements are hidden.

5. Add Instance Swap Properties for Dynamic Icons

Turn placeholder icons into instance swap targets.

Set up:

• An icon frame (e.g. “Icon Left”)
• Apply an Instance Swap property
• Choose a default (e.g. Icon / Arrow Left)
• Allow the consumer to change it (e.g. to Icon / Checkmark)

🎨 This is ideal for inputs, buttons, alerts, and cards with media slots.

6. Use Variant Properties to Simplify States

Rather than 50 nested variants, use one variant property with clear labels.

Example:

• State: Default, Hover, Pressed, Disabled
• Size: Small, Medium, Large
• Theme: Light, Dark

Avoid duplicating props across variants. Use shared layers and styles instead.

7. Combine Properties for Maximum Flexibility

The real power comes from combining property types.

With just 3–5 variants and smart properties, you can support:

• Multiple sizes
• Icon/no-icon options
• Custom text
• Developer-friendly instance swapping

🎯 Bonus: Dev Mode picks up these properties, making handoff seamless.

8. Document Properties for Better Usability

Not every designer will intuitively understand how to use your smart components.

Include:

• Descriptions next to the component
• Sticky notes or tooltips explaining each property
• A sample file with different use cases
• Property naming that matches design token logic

📘 A well-documented component is easier to use and harder to break.

9. Test with Real Scenarios

Before publishing:

• Use the component in a real UI frame
• Test all property toggles
• Check long vs short text
• Swap in different icons
• Preview all variant combinations

💡 Smart properties = fewer components + more flexibility—but only if they’re tested in the wild.

Conclusion: Build Once, Reuse Everywhere

Component properties are more than a convenience—they’re a powerful design system feature that makes your Figma libraries leaner, smarter, and easier to maintain.

Stop duplicating components for every edge case. Instead, build smart, expose what matters, and let your team fly.

Next up: “The 7 Worst Mistakes Designers Make with Figma Components (and How to Avoid Them)” — a field guide to the bugs and bloopers that cost teams time and trust.