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