Lesson 08 · Styles and components¶

The problem it solves¶

You have a poster with 20 orange elements. Your teacher says: "change the orange to green".

• Without styles: you select each element, change the colour, hunt for the ones you missed, find two more the next day. 15 minutes and one mistake.
• With styles: you change the brand/primary style. All 20 update. 3 seconds, zero mistakes.

The difference grows exponentially with project size. In an app design with 40 screens, working without styles is simply impossible.

Styles¶

A style is a value saved under a name, which you apply in many places. Figma has four types:

How to create a style¶

1. Select an element that already has the value you want.
2. In the right panel, in the relevant section (Fill / Text / Effects / Layout grid), click the four dots.
3. Press + and give it a name.

How to name styles¶

We settled the rule in lesson 03: by role, not by appearance. Now add a folder structure through /:

brand/
  primary
  primary-hover
  secondary
surface/
  base
  raised
  overlay
text/
  strong
  base
  muted
  inverse
feedback/
  success
  warning
  error

heading/
  h1
  h2
  h3
body/
  large
  base
  small
label/
  caps
  mono

Components¶

A style saves a value. A component saves a whole structure: shapes, text, spacing, all together.

Component vs. instance¶

• The main component — the original. It has a purple diamond ◆ in the Layers panel.
• The instance — a copy linked to the original. It has a hollow diamond ◇.

Changes in the main component propagate to every instance. Changes in an instance stay local.

How to create a component¶

1. Select the elements (usually a frame with everything inside).
2. Ctrl+Alt+K (Windows) / Cmd+Option+K (Mac), or the ◆ button in the top bar.
3. Give it a descriptive name with a folder structure: button/primary, card/project, icon/wifi.

Then you place it with Ctrl+D or from the Assets panel (left), where all the file's components appear.

What can be overridden in an instance¶

Properties¶

A component property turns a manual override into a field you fill in from the right panel. Four types:

How to add a property¶

1. Enter the main component.
2. Select the layer you want to make configurable.
3. In the right panel, next to that property, click the small diamond icon.
4. Create property → name + default value.

Now every instance shows a field with that name in the right panel. You never have to dig into layers to change the text again.

Variants¶

A variant groups several versions of the same component into one, with a selector.

Example: a button¶

Properties:

3 × 3 × 3 = 27 variants from a single component. The right panel of any instance shows three dropdowns.

How to build a variant set¶

1. Create the first component (button, type primary, size medium, state default).
2. Select it and press Create component set (the four-squares button in the top bar).
3. A dashed purple frame appears. Inside it, press + for each new variant.
4. In the right panel, under Properties, rename the properties (Property 1 → Type) and the values.

Instance swap — slots¶

The most useful property, and the one beginners know least.

The problem: you have a project card containing an icon. You have 8 different icons. Do you make 8 card components?

The solution: you make one card component in which the icon is itself an instance. Then you add an Instance swap property to it. In each card instance, you pick the icon you want from a menu.

card/project  (component)
├── frame
│   ├── ◇ icon/wifi        ← slot: Instance swap
│   ├── text: Title        ← Text property
│   └── text: Description  ← Text property

Organising the library¶

A file with 60 components and no structure is worse than none. The minimum structure:

Page: Foundations
  ├── The colour palette (all styles, visually)
  ├── The type scale
  └── The spacing system

Page: Components
  ├── Section: Primitives     → button, input, badge, avatar
  ├── Section: Icons          → the 24 × 24 set
  └── Section: Composites     → card, header, nav, footer

Page: Screens / Designs
  └── The actual work

The naming convention¶

When NOT to use components¶

Components have a cost: build time and complexity. They are not worth it for:

• An element used once. A poster headline is not a component.
• A one-off poster that will never have variants.
• Decorative shapes that change every time.

Exercises¶

Exercise 1 — A complete style system¶

In a new file, create the full set of colour and text styles from lessons 03 and 04. Then build a project card that uses only styles — no hand-typed HEX.

Exercise 2 — A button with variants¶

Build a variant set for a button with the properties Type (primary, secondary, ghost) and State (default, hover, disabled). Nine variants.

Exercise 3 — A card with an icon slot¶

Build a card/feature component with: an icon (slot), a title (Text property) and a description (Text property). Place 4 instances with different icons from the set you made in lesson 07.

Mini-project: a base library for the computer science club¶

Build a Design System file with three pages (Foundations, Components, Playground) containing: the full style set, the 8-icon set from lesson 07, and four components — button (with variants), badge, card/project and input.

Summary¶

• Styles save values (colour, text, effect, grid); you name them by role, with / for folders.
• A correctly built element shows a style name in the right panel, not a HEX code.
• The component ◆ is the original, the instance ◇ is the linked copy. Changes flow top-down.
• In an instance you can change text, colours, images and visibility — not the structure.
• Properties (Text, Boolean, Instance swap, Variant) turn overrides into fields.
• Variants group versions; do not build 27 at once.
• Instance swap = slot; any element that varies but stays the same kind of thing is a slot.
• Keep main components on a separate page.
• The rule of three: below three uses, a component is not worth it.

Next step: → Lesson 09: Auto Layout