Creating components in Figma - Complete Walkthrough

Introduction

Creating components in Figma lets you reuse design elements easily. This saves time and keeps your dashboard or report visuals consistent.

When you want to reuse a chart style across multiple report pages without redrawing it each time

When you need consistent buttons or icons on different dashboard screens

When you want to update a design element once and have it change everywhere it is used

When collaborating with a team to keep design elements uniform

When building templates for reports or dashboards that share common visuals

Steps

Step 1: Select the design elements you want to reuse

- Canvas area

The elements are highlighted with selection boxes

💡 Group elements first if they belong together

Step 2: Click the Create Component button

- Top toolbar (icon looks like a diamond)

The selected elements become a component with a purple outline

Step 3: Name your component

- Layers panel on the left

The component is easier to find and reuse

Step 4: Drag instances of the component from the Assets panel

- Assets panel on the left sidebar

Copies of the component appear on the canvas for reuse

Step 5: Edit the main component to update all instances

- Select the main component on the canvas or Layers panel

All instances on the canvas update automatically

Before vs After

Before

Multiple separate shapes and text boxes on the canvas with no connection

After

A single component with a purple outline replaces the shapes, and multiple instances can be placed from the Assets panel

Settings Reference

Component name

📍 Layers panel

Helps organize and find components easily

Default: Untitled

Assets panel visibility

📍 Left sidebar

Allows you to drag component instances onto the canvas

Default: Show

Common Mistakes

Editing an instance instead of the main component

Changes only affect that one instance, not all copies

Select and edit the main component to update all instances

Not grouping related elements before creating a component

Component may not behave as expected or parts may be missing

Group all elements that belong together before creating the component

Summary

Components let you reuse design elements easily in Figma

Create a component from selected elements and reuse it via the Assets panel

Editing the main component updates all instances automatically