How to Use Figma Components: A Practical Deep Dive

Figma components are the foundation of any scalable design workflow. Once you understand how they work, designing with them becomes significantly faster and your files stay consistent automatically.

Here's everything you need to know to use them well.

Main components vs instances

Every Figma component exists in two forms: the main component and instances.

The main component is the source of truth. Changes you make to it propagate to every instance automatically. You create a main component by selecting a frame or group and pressing Cmd+Alt+K (Mac) or Ctrl+Alt+K (Windows).

An instance is a copy of the main component placed in your designs. When you duplicate a component from the Assets panel or copy-paste it, you get instances. Instances inherit all changes from the main, but you can override specific properties locally.

Main components live in your library files (or in a dedicated page in your working file). A common convention is to have a _Components page where all mains live, and your design pages only contain instances.

What you can override on an instance

When you select an instance, you can change:

• Text content
• Fill and stroke colors
• Visibility of layers
• Swap nested component instances
• Any component property exposed by the designer

What you cannot change without detaching:

• The layout structure
• Adding or removing layers that aren't controlled by properties

To detach an instance and convert it to a regular frame, right-click and select "Detach instance" (Cmd+Alt+B). Detach sparingly — you lose the connection to the main.

Component properties

Component properties let you expose specific controls on an instance without detaching. There are four types:

Text properties. Expose a text layer so instance users can change it. Instead of double-clicking into a component to edit text, the text appears as a field in the right panel. Name the property clearly — "Label" not "Text 1".

Boolean properties. Toggle a layer's visibility on or off. Perfect for showing/hiding icons, badges, or decorative elements. "Show icon: true/false."

Instance swap properties. Let users swap a nested component for a different one from a specified set. Useful for icon slots — you define the allowed icon components, and users pick from a dropdown.

Variant properties. Control which variant of the component is shown. More on this below.

Variants

Variants are a way to group related component states into a single component set. Your button component probably has:

• Size: Small, Medium, Large
• Type: Primary, Secondary, Destructive, Ghost
• State: Default, Hover, Focused, Disabled, Loading

Instead of 60 separate components (5 states × 4 types × 3 sizes), you have one component set with those three properties. Users pick from dropdowns in the right panel.

To create variants: create multiple versions of your component, select them all, and click "Combine as variants" in the right panel. Then name each property and value consistently.

Naming matters. Use the same casing and same property names across all components in your library. "Size" not "size" not "Sz". "State" not "Status" not "Interaction State".

Nested components

Nested components are components inside other components. An icon inside a button. A badge inside a navigation item. A card inside a list.

When you use nested components, instance swapping becomes available. You can place an Icon component inside your Button component and give users the ability to swap which icon is shown without touching the button's structure.

Keep nesting shallow. Two to three levels is usually fine. Deeper than that and components become hard to understand and slow to work with.

Practical: building a button component

Here's how to build a proper button component from scratch.

Step 1: Build one state. Create a frame with Auto Layout. Add an icon on the left (an instance of your Icon component), a text layer for the label, and set horizontal padding to 16px, vertical to 10px. This is your default medium primary button.

Step 2: Create the main component. Select the frame, press Cmd+Alt+K. Rename it Button/Medium/Primary/Default.

Step 3: Add component properties. In the right panel, add:

• A Text property for "Label" — linked to your text layer
• A Boolean property for "Show icon" — controls icon layer visibility
• An Instance Swap property for "Icon" — allows picking from your icon set

Step 4: Create variants. Duplicate the component four times to create Hover, Focused, Disabled, and Loading states. Select all five, click "Combine as variants". Set the "State" property with five values.

Step 5: Create size variants. Duplicate your component set and create Small and Large variants. Combine them under a "Size" property.

Step 6: Create type variants. Add Secondary, Destructive, and Ghost type variants. Change fills and strokes accordingly.

Now you have a complete button component with 60 variants, three component properties, and a clean right-panel interface for anyone using it.

Try Figma Free

Organizing your library

Use a consistent naming convention. A common pattern: Category/Component/Variant. Examples: Forms/Input/Default, Navigation/Tab/Active, Feedback/Toast/Error.

Nest components in the Assets panel by using slashes in the name. Button/Primary and Button/Secondary will appear under a "Button" group in the panel.

Create one dedicated file for each major category of components (Forms, Navigation, Overlays, etc.) or keep everything in a single Components file. Publish it to your Figma team library so everyone can access it via the Assets panel.

The more intentional your naming and structure, the easier your library is to use. Sloppy naming creates friction every time someone tries to find a component.