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 pointing at the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. 15-minute trial, no card.

Keep going

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