Creating components in Figma - Mechanics & Internals

Overview - Creating components

What is it?

Creating components in Figma means making reusable design elements that you can use multiple times across your projects. These components can be buttons, icons, or any design piece that stays consistent. When you change a component, all copies update automatically. This helps keep designs uniform and saves time.

Why it matters

Without components, designers would have to manually update every instance of a repeated element, which is slow and error-prone. Components solve this by centralizing changes, ensuring consistency and speeding up design work. This is crucial for teams working on big projects or products where uniformity matters.

Where it fits

Before learning components, you should understand basic Figma tools like frames, shapes, and layers. After mastering components, you can explore advanced topics like variants, component libraries, and design systems to scale your work.

Mental Model

Core Idea

A component is like a master mold that creates many identical copies, so changing the mold updates all copies at once.

Think of it like...

Imagine a cookie cutter used to make many cookies of the same shape. If you change the cutter, all future cookies have the new shape, saving you from reshaping each cookie by hand.

┌───────────────┐       ┌───────────────┐
│   Component   │──────▶│  Instance 1   │
│  (Master Mold)│       ├───────────────┤
└───────────────┘       │  Instance 2   │
                        ├───────────────┤
                        │  Instance 3   │
                        └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic design elements

Concept: Learn what shapes, frames, and layers are in Figma as building blocks.

In Figma, you create designs using shapes like rectangles and circles. Frames are containers that hold these shapes and other elements. Layers stack these elements visually. Knowing these basics helps you build components later.

Result

You can create simple designs and organize elements clearly.

Understanding basic elements is essential because components are made by grouping and organizing these building blocks.

2

Foundation

What is a component in Figma

Concept: Introduce the idea of a component as a reusable design element.

A component is a special group of elements saved as a master design. You create it by selecting elements and choosing 'Create Component'. This master can be reused as instances throughout your file.

Result

You have a master component that can be placed multiple times as instances.

Knowing that components are masters and instances helps you see how changes propagate automatically.

3

Intermediate

Creating and using component instances

🤔Before reading on: do you think changing an instance changes the master component or just that instance? Commit to your answer.

Concept: Learn how to create instances from a component and how they behave.

After creating a component, you can drag instances from the Assets panel or copy-paste the component. Instances look like the master but can have some overrides like text or color. Changing the master updates all instances, but changing an instance does not affect the master.

Result

You can place many instances and customize them slightly without breaking consistency.

Understanding the difference between master and instance changes prevents accidental design inconsistencies.

4

Intermediate

Overriding instance properties safely

🤔Before reading on: do you think you can change the size of an instance without affecting the master? Commit to your answer.

Concept: Learn which properties of instances can be changed without breaking the link to the master.

Instances allow overrides like changing text, colors, or visibility of layers inside them. You can also resize instances independently. However, structural changes like adding new elements must be done on the master component.

Result

You can customize instances for different uses while keeping the core design consistent.

Knowing what can be overridden helps maintain design consistency and flexibility.

5

Intermediate

Organizing components with naming and grouping

Concept: Learn how to name and group components for easy reuse and discovery.

Give components clear names and organize them in pages or folders. Use naming conventions like 'Button/Primary' to group related components. This helps teams find and use components quickly.

Result

Your components are easy to find and manage in large projects.

Good organization reduces confusion and speeds up design collaboration.

6

Advanced

Using component libraries for team collaboration

🤔Before reading on: do you think component libraries are stored inside each file or shared separately? Commit to your answer.

Concept: Learn how to publish components as libraries to share across files and teams.

Figma allows you to publish components as libraries. Other files can then use these components as linked instances. When the library updates, all files using it can update their instances to the new version.

Result

Teams maintain consistent designs across multiple projects easily.

Using libraries scales component reuse beyond single files, enabling enterprise-level design consistency.

7

Expert

Advanced component techniques and pitfalls

🤔Before reading on: do you think nested components update automatically when the parent updates? Commit to your answer.

Concept: Explore nested components, variants, and common mistakes in component design.

Components can contain other components (nested). Changing a nested master updates all instances. Variants let you group similar components with different states (like button sizes). Be careful with overrides that break links or cause unexpected updates.

Result

You can build complex, flexible design systems with components.

Mastering nested components and variants unlocks powerful, scalable design patterns but requires careful management to avoid confusion.

Under the Hood

Figma stores components as master objects with unique IDs. Instances reference these IDs and inherit properties. When the master changes, Figma pushes updates to all instances by matching IDs. Overrides are stored separately per instance, layered on top of the master properties.

Why designed this way?

This design allows efficient reuse and centralized updates without duplicating data. It balances consistency with flexibility by separating master design from instance overrides. Alternatives like copying elements break consistency and increase errors.

┌───────────────┐       ┌───────────────┐
│   Master      │──────▶│   Instance    │
│  Component    │       │  (Overrides)  │
└───────────────┘       └───────────────┘
        ▲                      │
        │                      ▼
   Update triggers       Visual display

Myth Busters - 4 Common Misconceptions

Quick: Does changing an instance update the master component? Commit yes or no.

Common Belief: Changing any instance changes the master component automatically.

Reality: Only changes made to the master component update all instances. Changing an instance only affects that instance.

Why it matters: Believing otherwise leads to accidental design breaks and confusion about why other instances don't update.

Quick: Can you add new elements directly inside an instance? Commit yes or no.

Common Belief: You can add new shapes or layers inside an instance to customize it fully.

Reality: Instances cannot have new elements added; structural changes must be done on the master component.

Why it matters: Trying to add elements inside instances causes frustration and broken designs.

Quick: Are component libraries stored inside each design file? Commit yes or no.

Common Belief: Component libraries are just components saved inside each file separately.

Reality: Libraries are separate published files shared across projects, enabling centralized updates.

Why it matters: Misunderstanding this limits team collaboration and causes inconsistent designs.

Quick: Do nested components update automatically when the parent updates? Commit yes or no.

Common Belief: Nested components do not update automatically; you must update each manually.

Reality: Nested components inherit updates from their masters automatically, maintaining consistency.

Why it matters: Not knowing this leads to redundant work and inconsistent nested designs.

Expert Zone

1

Overrides on instances are layered and can be reset to master defaults, allowing flexible experimentation without losing the link.

2

Variants group related components with different states, reducing asset clutter and simplifying selection in design tools.

3

Nested components can create complex hierarchies, but excessive nesting can cause performance issues and update confusion.

When NOT to use

Avoid components for one-off unique designs or highly customized elements that do not repeat. Instead, use regular frames or groups. For very dynamic or data-driven visuals, consider code-based tools or plugins.

Production Patterns

Teams create shared component libraries with strict naming and versioning. Designers use variants for UI states like hover or disabled. Nested components build complex UI elements like cards or menus. Regular audits prevent orphaned or outdated components.

Connections

Object-oriented programming

Components are like classes; instances are like objects created from those classes.

Understanding components as design classes helps grasp reuse, inheritance, and overrides similar to programming.

Manufacturing molds

Components function like molds that produce identical parts efficiently.

This connection explains why changing the master component updates all instances, just like changing a mold changes all products.

Database normalization

Components centralize design data to avoid duplication, similar to how normalization avoids data redundancy.

Knowing this helps appreciate how components improve consistency and reduce errors in large design systems.

Common Pitfalls

#1 Trying to edit the structure of an instance directly.

Wrong approach:

Selecting an instance and adding new shapes inside it or deleting layers.

Correct approach:

Edit the master component to change structure; instances update automatically.

Root cause:

Misunderstanding that instances are copies linked to a master, not independent groups.

#2 Overriding too many properties on instances, breaking consistency.

Wrong approach:

Changing colors, text, and layout extensively on instances, making them look different from the master.

Correct approach:

Limit overrides to necessary changes; keep core design consistent by editing the master.

Root cause:

Not realizing that excessive overrides defeat the purpose of components and cause maintenance headaches.

#3 Not organizing components with clear names and groups.

Wrong approach:

Naming components randomly like 'Component 1', 'Button copy', or leaving them ungrouped.

Correct approach:

Use descriptive names and folder-like naming conventions like 'Button/Primary'.

Root cause:

Underestimating the importance of organization in large projects and team environments.

Key Takeaways

Components are reusable master designs that keep your work consistent and save time.

Instances are copies of components that can be customized slightly without breaking the link to the master.

Editing the master component updates all instances automatically, ensuring uniformity.

Organizing and naming components clearly is essential for teamwork and scalability.

Advanced techniques like nested components and libraries enable powerful, large-scale design systems.

Practice

1. What is the main benefit of using components in Figma?

easy

A. It removes all unused colors from your design.

B. You can reuse design parts easily across your project.

C. It converts your design into code instantly.

D. It automatically creates animations for your design.

Solution

1. Step 1: Understand the purpose of components

   Components are reusable design elements that help maintain consistency.

2. Step 2: Identify the main benefit

   Reusing parts saves time and keeps designs uniform.

3. Final Answer:

   You can reuse design parts easily across your project. -> Option B

4. Quick Check:

   Components = Reuse design parts easily [OK]

Hint: Components help reuse design parts fast [OK]

Common Mistakes:

• Thinking components create animations automatically
• Believing components convert designs to code
• Assuming components clean unused colors

2. Which of the following is the correct way to create a component in Figma?

easy

A. Drag layers into the assets panel without selection.

B. Select layers and press Ctrl + G to group them.

C. Right-click and choose 'Export' to create a component.

D. Select layers and press Ctrl + Alt + K to create a component.

Solution

1. Step 1: Recall the shortcut for creating components

   In Figma, Ctrl + Alt + K (Cmd + Option + K on Mac) creates a component from selected layers.

2. Step 2: Eliminate incorrect options

   Grouping (Ctrl + G) groups layers but does not create components; exporting saves files; dragging without selection won't create components.

3. Final Answer:

   Select layers and press Ctrl + Alt + K to create a component. -> Option D

4. Quick Check:

   Create component shortcut = Ctrl + Alt + K [OK]

Hint: Use Ctrl+Alt+K to create components quickly [OK]

Common Mistakes:

• Confusing grouping with component creation
• Trying to export instead of creating components
• Dragging layers without selecting them

3. If you edit the main component's color from blue to red, what happens to its instances?

medium

A. All instances update to red automatically.

B. Only new instances will be red; old ones stay blue.

C. Instances keep blue unless manually changed.

D. Instances get deleted and replaced with red shapes.

Solution

1. Step 1: Understand component-instance relationship

   Instances inherit properties from the main component unless overridden.

2. Step 2: Apply the color change effect

   Changing the main component's color updates all instances automatically to keep consistency.

3. Final Answer:

   All instances update to red automatically. -> Option A

4. Quick Check:

   Main component edit updates all instances [OK]

Hint: Edit main component to update all instances [OK]

Common Mistakes:

• Thinking old instances stay unchanged
• Believing instances must be manually updated
• Assuming instances get deleted on edit

4. You created a component but instances do not update after editing the main component. What is the likely issue?

medium

A. You forgot to save the file after editing.

B. You created a group instead of a component.

C. You edited an instance instead of the main component.

D. You used the wrong shortcut to create the component.

Solution

1. Step 1: Identify difference between main component and instance

   Only editing the main component updates all instances; editing an instance changes only that one.

2. Step 2: Diagnose why instances don't update

   If instances don't update, likely the main component was not edited but an instance was.

3. Final Answer:

   You edited an instance instead of the main component. -> Option C

4. Quick Check:

   Edit main component, not instance, to update all [OK]

Hint: Always edit main component, not instances [OK]

Common Mistakes:

• Editing instances expecting all to update
• Assuming saving file triggers updates
• Confusing groups with components

5. You want to create a button component with two states: normal and hover. How should you organize components in Figma for easy reuse and switching?

hard

A. Create a main button component and use variants for normal and hover states.

B. Create two separate components named 'Button Normal' and 'Button Hover' without linking.

C. Group two buttons in a frame and use that as a component.

D. Create instances of the button and manually change colors for hover.

Solution

1. Step 1: Understand component variants in Figma

   Variants allow multiple states inside one component for easy switching.

2. Step 2: Apply variants to button states

   Create a main button component with variants for normal and hover to reuse and switch states efficiently.

3. Final Answer:

   Create a main button component and use variants for normal and hover states. -> Option A

4. Quick Check:

   Use variants for multiple component states [OK]

Hint: Use variants to manage component states easily [OK]

Common Mistakes:

• Creating separate unlinked components for states
• Grouping buttons instead of using variants
• Manually changing instances for hover state