Figma Variants and Component Properties

Combine related components into a component set and expose controls for consumers. Here’s how to do it in Figma on macOS, step by step — part of the free Figma beginner curriculum.

Lesson 6 of the Figma curriculum. Before this: Components and Instances. Next up: Prototyping Basics.

What you’ll do

• Select two or more similar components and click “Combine as variants” in the right sidebar
• Understand that the result is a component set (dashed purple outline)
• Add a Variant property (e.g. State = Default / Hover / Pressed)
• Add a Boolean property to toggle a nested layer’s visibility (e.g. an optional icon)
• Add a Text property to expose a nested text string as a named control
• Add an Instance swap property to let consumers swap a nested instance
• Use slash naming (Button/Primary/Default) to nest variants in the Assets panel
• Know that “Simplified instances” is being deprecated on March 23, 2026 — after that date, all component properties and layers appear by default

Do it hands-free with Skilly

Reading steps is one thing; doing them while the menus are in front of you is another. Skilly is a voice-first tutor for macOS: you ask out loud — “where’s the variants panel?” — and it answers while moving your cursor to the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. Free to start.

Keep going

This is one stage of the full Figma beginner curriculum. Previous: Components and Instances. Continue with Prototyping Basics.