Figma Components and Instances (beginner guide)

Build your first reusable component and understand the main-vs-instance relationship. Here’s how to do it in Figma on macOS, step by step — part of the free Figma beginner curriculum.

Lesson 5 of the Figma curriculum. Before this: Auto Layout. Next up: Variants and Component Properties.

What you’ll do

• Select a frame and create a component with Option Command K
• Recognize the purple diamond icon that marks a main component in the Layers panel
• Drag an instance out of the Assets panel onto the canvas
• Edit the main component and watch every instance update
• Override a property on a single instance (change its text, fill, etc.)
• Reset overrides from the right sidebar
• Detach an instance with Option Command B — and understand this is one-way
• Name components with slashes (e.g. Button/Primary) to organize them in the Assets panel

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 components 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: Auto Layout. Continue with Variants and Component Properties.