Designilo

Introduction: Design Smarter, Not Harder

What if you could toggle icons, badges, strokes, or entire content sections in a component with a single click? That’s the magic of Boolean properties in Figma. They let you add optional functionality—without exploding your variant count or duplicating components.

In this guide, we’ll show how to use Boolean properties to simplify your components, clean up your libraries, and unlock new design flexibility with a tiny switch.

1. What Are Boolean Properties in Figma?

A Boolean property is a true/false toggle assigned to any layer, element, or instance inside a component.

• ✅ Show or hide an icon (hasIcon)
• ✅ Display a notification badge (isNew)
• ✅ Toggle a stroke or highlight
• ✅ Include/exclude a helper label or status tag
• ✅ Swap between primary/secondary layouts

Boolean properties = modular thinking. Your components become customizable, not duplicated.

2. Where to Use Boolean Properties

Here are perfect places to use them:

Use Case	Boolean Name
Icon on a button	hasIcon
Required asterisk	isRequired
Badge on a tab	hasBadge
Avatar border	showBorder
Tooltip visibility	showTooltip
Toggle expanded row	isExpanded

🎯 Keep property names human-readable and action-oriented.

3. How to Set Up a Boolean Property

1. Create a component with the optional element (e.g. icon or badge)
2. Right-click the layer or frame
3. Select “Create Property” > “Boolean”
4. Name it something clear (e.g. hasIcon)
5. Figma will expose a toggle in the instance panel

✅ You now have an interactive, reusable switch that affects visibility—no variants needed.

4. Combine Booleans with Auto Layout

This is where things get powerful.

When you toggle visibility inside an Auto Layout frame:

• The remaining elements automatically adjust position
• Padding, spacing, and alignment all update instantly
• Layouts remain clean and scalable

🔄 Example: Turn off a right icon, and the text realigns neatly with no manual fixes.

5. Use Boolean Logic to Reduce Variants

Instead of:

Button / Icon Left
Button / Icon Right
Button / No Icon

Use:

• hasIcon: true/false
• iconPosition: left/right (via instance swap or text prop)

🧠 Result: fewer variants, more logic, faster updates.

6. Nest Booleans Inside Variants

You can use Boolean properties alongside variants:

Variant Property	Values
Size	Small / Medium
State	Default / Hover
hasIcon (Boolean)	True / False
isLoading	True / False

Each variant responds to toggled props without needing a separate component. It’s clean, flexible, and highly reusable.

7. Naming Best Practices

For clarity:

• ✅ Start with verbs or “is/has/should”
• ✅ Keep names lowercase with camelCase
• ✅ Avoid negations (e.g. !noBadge → confusing)

✅ Good: hasIcon, isActive, showLabel
🚫 Bad: iconToggle, offState, noLabel

Clear names improve usability for others (especially devs).

8. Preview in Instance Panel

When an instance is selected, Booleans appear in the right sidebar:

Properties
☑ hasIcon
☐ isLoading

Designers (and devs using Dev Mode) can toggle states instantly without detaching or overriding anything.

💬 This is especially powerful when building component galleries or prototypes.

9. Combine Booleans with Instance Swaps

You can go even further by pairing Booleans with:

• Instance swap slots (for icons, avatars)
• Text properties (for labels, statuses)
• Variant properties (for states, themes)

📦 This gives you a dynamic, flexible component without overwhelming your library with 30+ variants.

Conclusion: One Toggle, Endless Power

Boolean properties are small, but mighty. They make your components smarter, faster to edit, and easier to scale. Instead of relying on endless variants or overrides, use Booleans to build clean, logical, future-proof designs.

Next up: “Figma Branching: How to Experiment Without Breaking Your Design System” — a full breakdown of the most overlooked but essential UI element.