Components and styles

Why it matters

Real products have hundreds of screens, and they reuse the same pieces again and again: buttons, inputs, cards, navigation bars. If each copy is drawn separately, a small change (a new corner radius, a darker brand colour) means editing every screen by hand, and copies drift apart. Components and styles solve this. Change the source once and every use updates. They are also the bridge to code: developers build the same pieces as reusable components in React, SwiftUI or a game engine's UI system.

Components and instances

A component is a reusable design element. In Figma, select a layer (for example the button you built with auto layout) and choose Create component (Cmd/Ctrl + Alt + K, or Option on Mac). The original becomes the main component, marked with a four-diamond icon.

Copies you place are instances. Instances stay linked to the main component:

• Change the main component's fill or radius, and every instance updates.
• In an instance you can override some properties, such as the label text or an icon, without breaking the link.
• If you need a one-off change that the component does not support, you can detach the instance, but then it no longer updates. Detaching should be rare.

Keep main components together on a separate page (for example "Components") so they are easy to find and are not accidentally edited inside a screen.

Variants and properties

Most components come in versions: a button can be primary or secondary, small or large, default, hover or disabled. Instead of separate components for each, Figma lets you combine them into one component set with variants. Each variant has property values, for example Type=Primary, Size=Large, State=Default. When you use an instance, you pick values from dropdowns in the right panel.

Components can also expose simpler properties: a text property for the label, a boolean to show or hide an icon, and an instance swap to choose which icon. This keeps the number of variants small.

A worked example, a button set:

Type:  Primary | Secondary
Size:  Medium  | Small
State: Default | Hover | Disabled
Label: text property
Icon:  boolean (show/hide) + instance swap

That is 2 x 2 x 3 = 12 variants, but one component for people to learn.

Styles and variables

Styles store reusable visual values: colour styles (fills), text styles (font, size, weight, line height), effect styles (shadows) and layout grid styles. Variables store single values such as a colour, number or string, and can hold different values per mode, which is how teams set up light and dark themes. Use whichever your team uses; the principle is the same as the design tokens from the colour lesson.

Name them by role, using slashes to create folders:

Color/Text/Default      #1F2937
Color/Text/Muted        #4B5563
Color/Primary/Default   #1D4ED8
Color/On-primary        #FFFFFF
Text/Heading/H1         Georgia 31/38 Bold
Text/Body/Regular       Inter 16/24 Regular
Spacing/2               16

Then apply styles everywhere instead of typing hex values. If the primary colour changes, you edit Color/Primary/Default once.

How this maps to code

A design system usually has the same structure in design and in code:

• Design tokens (colour, type, spacing) match CSS custom properties or a theme file.
• A Figma component set matches a code component, for example <Button variant="primary" size="small" disabled>.
• Variant properties match component props.

When names agree in both places, handoff is much smoother. That is why designers and developers often agree on names together.

Common mistakes

• Making a component too early or too late. Make one when something appears in two or more places and you expect it to stay the same.
• Too many variants for things that could be properties (one variant per label text, for example).
• Detaching instances to make small changes, which quietly breaks consistency.
• Hard-coded colours typed directly instead of styles or variables.
• Names by appearance such as "Blue 2", which stop making sense after a rebrand.

Quick recap

• A main component is the source; instances are linked copies that allow overrides.
• Variants combine versions (type, size, state) into one component set; properties handle labels and icons.
• Styles and variables store colours, text and spacing by role; variables support modes such as dark theme.
• Matching names in design and code make handoff easier.

Try it

Open the Do tab. You will turn your button into a component with variants, create styles, and see one change update a whole screen.