Figma Components Basics

Components are reusable design elements. Build a button once as a component, then use it on every screen without rebuilding it. Change the component once, and every copy updates automatically. Components are the foundation of an efficient Figma workflow.

The Problem Components Solve

Without Components:
  You design a blue button on screen 1.
  You copy-paste it to screens 2, 3, 4, 5...
  Client says: "Change all buttons to green."
  You manually update every single button. ✗

With Components:
  You create one "Button" component.
  You use instances of it on screens 2, 3, 4, 5...
  Client says: "Change all buttons to green."
  You change the main component once. All buttons update. ✓

Main Component vs Instance

• Main component – The original. Changes here update all instances. Marked with a solid diamond icon (◆) in the layers panel.
• Instance – A copy you place on your canvas. Marked with an outlined diamond icon (◇). Inherits everything from the main component.

Creating a Component

1. Design the element — for example, a button with a rectangle and a text label inside.
2. Select the frame or group.
3. Right-click and choose Create component, or press Ctrl/Cmd + Alt + K.
4. The element turns purple in the layers panel to show it is now a main component.

Using Instances

Find your component in the Assets panel (left panel, Assets tab). Drag it onto any frame to create an instance. You can also copy-paste any existing instance to create another.

Overrides

Instances inherit everything from the main component. But you can override specific properties on each instance without affecting others.

Main Component: Blue button, text "Submit"
                Fill: Blue  Text: "Submit"

Instance 1: Override text → "Buy Now"
            Fill: Blue  Text: "Buy Now"   ← text overridden

Instance 2: Override fill → Red
            Fill: Red   Text: "Submit"   ← fill overridden

If main component text changes to "Go":
  Instance 1 stays: "Buy Now" (text is overridden, protected)
  Instance 2 changes to: "Go" (text was not overridden)

Common Overrides

• Text content
• Fill/color of a specific layer
• Image inside a shape
• Visibility of specific layers (show or hide an icon)

Resetting Overrides

Right-click any instance and choose Reset all overrides to return it to exactly the main component's state. You can also reset just one override by right-clicking that specific layer inside the instance.

Detaching an Instance

Right-click an instance and choose Detach instance. This breaks the link to the main component and converts it back to a regular frame. Changes to the main component will no longer affect it. Use this only when you need a truly one-off version of a component.

Naming Components with Slashes

Use forward slashes in component names to create folders in the assets panel. This keeps a large library of components organized and searchable.

Component Names with Slashes:
  Button/Primary
  Button/Secondary
  Button/Danger
  Input/Text Field
  Input/Search
  Icon/Home
  Icon/Settings
  Icon/Cart

In the assets panel, these appear as folders: Button, Input, Icon — each containing their variants.

Where to Store Main Components

Keep all main components on a dedicated page called "Components" or "Library" so they do not clutter your design screens. Instances appear on the design pages, but the source lives on the component page.

Component Properties

Component Properties (added via the right panel when a main component is selected) let you expose specific controls to anyone using the instance. Instead of digging into layers to change text or toggle a layer, the user sees simple controls right in the right panel.

• Text property – Exposes a text field directly on the instance panel.
• Boolean property – Exposes a true/false toggle (show/hide a layer like an icon or a badge).
• Instance swap property – Lets users swap the nested component (like swapping one icon for another) from the right panel without entering the component.