Figma: frames, auto layout, styles, variables and components¶

Exercise figma-auto-layout-annex.pdf · PDF

Open any app on your phone and count the buttons. Dozens. Now imagine your boss says: "Make every button a bit rounder and change the red to a darker red." Would you redraw them one by one, across 40 screens? Professional designers never do. They build the screen once from reusable pieces, change the piece, and every copy updates by itself.

That is what this page is about. Figma is the design tool you will use all year to draw your project's screens before you code them. Five ideas make it powerful: frames, auto layout, styles, variables and components. Learn them now and your prototype turns into code much more easily in Unit 2.

The LEGO factory¶

Keep one picture in your head for the whole page: Figma is a LEGO factory.

Frames: the box every screen starts in¶

A frame is a container layer: it holds other layers (shapes, images, text) and has its own size and style.

Every screen you design starts as a frame. Press F (or A), then pick a preset from the right panel: Phone, Tablet, Desktop, Watch... Figma sets the right size for that device.

Figma also has groups (Cmd+G / Ctrl+G). A group is just a rubber band around some layers. They look alike, but they behave very differently:

In the factory: a frame is a box with walls. A group is a rubber band around some bricks.

Auto layout: the smart tray¶

Draw a button by hand: a rectangle and a text on top. Now change the text from "OK" to "Confirm payment". The text sticks out of the rectangle, and you have to resize it yourself. Do that 200 times and you will see why Figma added auto layout in December 2019.

Auto layout arranges the layers inside a frame automatically, following a direction, a gap, padding and alignment.

Select the layers and press Shift+A. From then on, Figma does the spacing:

And each layer chooses how it is resized:

• Hug contents: the frame shrinks or grows to fit what is inside. A button that hugs its text is always the right width.
• Fill container: the layer stretches to take all the space its parent gives it. Useful for a full-width button.
• Fixed: the size never changes, whatever the content.

flowchart LR
    T["<b>Text changes</b><br>'OK' → 'Confirm payment'"] --> H["<b>Hug contents</b><br>the button recalculates<br>its width"]
    H --> P["<b>Padding + gap</b><br>stay exactly the same"]
    P --> R["<b>Result</b><br>no manual resizing"]

Styles: one colour chart for everything¶

Your app's red appears on 300 layers. If each layer has the colour typed in by hand (#E10A1E), changing it means editing 300 layers. And you will miss some.

A style is a saved set of visual properties with a name, reused on many layers. Edit the style and every layer that uses it updates.

Figma has four kinds of style:

This is the factory's colour chart: "Bright Red" is defined in one place, and every brick says "Bright Red" instead of mixing its own paint.

Variables: values that can change with the context¶

Figma presented variables at its Config conference in June 2023.

A variable stores one reusable value, such as a colour, a number, a piece of text or true/false, that you can apply to designs and change in one place.

The four types you will use most:

Variables live in a collection: a set of related variables. The collection can have several modes. A mode is one column of values, with one value per variable. Light and dark mode are the classic example:

flowchart LR
    V["<b>Variable</b><br>background"] --> L["<b>Light mode</b><br>white"]
    V --> D["<b>Dark mode</b><br>almost black"]
    L --> S1["Every screen<br>in light mode"]
    D --> S2["The same screens<br>in dark mode"]

Switch a frame to the dark mode and every layer that uses the collection changes at once. Modes also work for languages (a String variable in English and in Spanish) and for device sizes.

Styles or variables?¶

They look similar, so here is the difference:

The two work together: a colour style can use a variable. In the factory, a style is a whole paint recipe. A variable is one entry in the colour chart that can have a day version and a night version.

Components: the mould and its bricks¶

You have a good button now. You will need it on every screen. Copy and paste? Then you are back to editing 40 copies by hand.

A component is an element you can reuse across your designs. The original is the main component. Every copy is an instance linked to it.

Select the button and press Option+Cmd+K / Alt+Ctrl+K to create a component. Then drag instances from the Assets panel.

flowchart TB
    M["<b>Main component</b><br>the mould: Button"]
    M -->|"every change is sent to"| I1["<b>Instance</b><br>Home screen"]
    M -->|"every change is sent to"| I2["<b>Instance</b><br>Login screen"]
    M -->|"every change is sent to"| I3["<b>Instance</b><br>Settings screen"]

An instance can override some properties, for example its text or its colour, and still stay linked. You can always reset it to go back to the main component's values.

Variants and component properties¶

A real button has several versions: primary and secondary, default and disabled, small and large. Making one component per version would give you a mess. Instead:

• Variants group all the versions of one component together, such as its different states, sizes or colours.
• Component properties are the controls an instance shows in the right panel, so you can change it without digging into its layers.

In the factory: one mould with a few switches on the side. Flip a switch and you get the red version, the small version or the version without a hole.

For every shortcut on this page and many more, see the Figma shortcuts cheat sheet.

Key takeaways¶

• A frame is a container with its own size, style and constraints. Screens, cards and buttons are frames. A group just wraps its contents.
• Auto layout (Shift+A) arranges a frame's contents by direction, gap, padding and alignment. Hug contents makes a button fit its text.
• A style saves a named set of values (colour, text, effect, layout guide). Edit it once and every layer that uses it updates.
• A variable stores one value. Variables live in collections, and modes give each variable a different value per context, such as light and dark.
• A component is a reusable element. Changes to the main component reach every instance. Variants and component properties keep all its versions in one place.
• Detaching an instance breaks the link for good.

Quick check¶

You can now build screens from reusable pieces. Next, Design systems turns those pieces into the rules a whole product follows.