Base component architecture in Figma - Step-by-Step Guide

Introduction

Base component architecture helps you create reusable building blocks in your design. It solves the problem of repeating the same elements many times by letting you update one main component that changes all copies.

When you want all buttons in your dashboard to have the same style and update together

When you need consistent icons across multiple report pages

When you want to create a standard card layout for data visuals that repeats

When you want to quickly change colors or fonts for many elements at once

When you want to keep your design organized and easy to update

Steps

Step 1: Select the element or group of elements to reuse

- Canvas

The elements are highlighted for editing

💡 Group related elements before creating a component

Step 2: Click Create component

- Top toolbar

The selected elements become a base component with a purple outline

Step 3: Drag instances of the base component onto other frames

- Assets panel

Copies of the component appear on the canvas linked to the base

Step 4: Edit the base component

- Canvas or Layers panel

All instances update automatically to reflect changes

Step 5: Use Variants to create different states or versions

- Properties panel when base component is selected

You can switch between versions in instances without creating new components

Before vs After

Before

Multiple buttons on different pages are separate elements with different styles

After

All buttons are instances of one base component; changing the base updates all buttons

Settings Reference

Create component

📍 Top toolbar

Turns selected elements into a reusable base component

Default: Create component

Variants

📍 Properties panel when component selected

Manage different versions or states of a base component

Default: No variants

Instance swapping

📍 Properties panel of an instance

Change the instance to a different component or variant without breaking the link

Default: Original base component

Common Mistakes

Editing an instance instead of the base component

Changes only affect that one instance, not all copies

Always edit the base component to update all instances

Not grouping elements before creating a component

Component may not behave as expected or parts may be missing

Group related elements first to keep them together in the component

Creating many similar components instead of using variants

Makes managing components harder and less efficient

Use variants to handle different states or versions within one component

Summary

Base component architecture creates reusable design blocks that update all copies when changed

Use it to keep styles consistent and save time updating repeated elements

Remember to edit the base component, group elements before creating, and use variants for versions