Figma from scratch: frames, Auto Layout and components

Every step in this lesson was checked against the official help.figma.com documentation on the review date. Commands and panels are named as they appear in the interface. Figma moves buttons around regularly, so if something has moved, search for the command by name in the Help Center.

A Figma Design file lives in the cloud: several people can work in it at once, and versions are saved automatically. The editor has five areas:

The File tab (Alt+1 on Windows, Option+1 on Mac) shows pages and layers. Pages are separate canvases inside a file. The Help Center suggests using pages for stages of work and keeping main components on a dedicated page. For this lesson, create three: Explorations for drafts, Designs for finished screens, Components for main components. On the free Starter plan a team file is limited to three pages — exactly enough.

Every object on the canvas is a layer. Layers nest: a top-level frame is usually a screen, with nested frames inside for the header, cards and buttons. Figma’s layer hierarchy maps directly onto an HTML element tree: the more carefully you name and group layers, the easier the developer’s job.

A frame is a container layer. Unlike a group, a frame has its own size, fill, stroke, corner radius and content clipping (Clip content), and only frames get Auto Layout, constraints, layout guides and prototyping. The Frame tool is F or A. Clicking the canvas creates a frame, dragging creates one of a custom size, and the right panel offers presets: Phone, Tablet, Desktop and more. To wrap selected layers in a frame, press Ctrl+Alt+G (Option+Command+G on Mac).

Constraints answer one question: what happens to a layer when its parent frame is resized. Horizontally you can choose Left, Right, Left and right, Center and Scale; vertically — Top, Bottom, Top and bottom, Center and Scale. The default is Top and Left. They live in the Position section of the right panel.

Auto Layout is a frame property that arranges child layers by rules and reflows them when content changes: a button grows with its label, a list closes the gap when an item is hidden. Add it with Shift+A or the Add auto layout button in the right panel. Figma suggests a direction, which you can change.

Resizing is set separately for width and height — in the Width and Height dropdowns. Key rules from the Help Center: Hug contents is available only on the Auto Layout frame itself, Fill container only on its children. If any child is set to Fill, the parent stops hugging on that axis and becomes Fixed. To cap stretching, use Add min width / Add max width (and the same for height).

Let’s build the button from the lesson on component states:

A component is a reusable element. The main component defines its properties; instances are linked copies that receive every change made to the main one. Change the radius on the main button and every button in the file’s designs follows. Components are marked with a purple icon in the layers panel.

To reset overrides, open More actions next to the component name in the right panel: Reset → Reset all changes. The same menu has Push changes to main component, which moves an instance’s edits into the main component; it works only when the main component is in the same file. Detaching an instance turns it into a plain frame and breaks the link: do it rarely and deliberately, otherwise design system updates never reach that spot.

A variant is one component inside a component set that groups similar components. A primary and a secondary button in default, hover, pressed and disabled states are not eight separate components but one set with two variant properties. Each variant is named Property=value, for example Type=Primary, State=Hover. The Help Center stresses that all variants in a set share the same properties while each has a unique combination of values. If two variants end up with the same combination, Figma flags a conflict.

A button color typed by hand into every layer is the same problem as a button redrawn on every screen. Figma offers two mechanisms for a single source of values.

Variables open from Navigation bar → Variables. There you create a collection and variables such as color/brand, color/on-brand, space/padding-x, radius/button. To apply a color variable, click Apply styles and variables in the Fill or Stroke section and pick it; in the shared picker, variables appear as square swatches and styles as round ones. To apply a number variable to padding or radius, press = in the value field.

For handoff, a variable has Code syntax — a name for code (Web, Android, iOS) that later appears in Dev Mode snippets. If the project’s CSS calls the color --color-brand, use exactly that — the developer sees a familiar name instead of a hex code.

Let’s build a product card that adapts to its column width and doesn’t break with a long title. It is based on Figma’s official mini-project with a responsive card; we swapped the podcast card for a product and added the button component.

Dev Mode is Figma’s developer workspace: you inspect sizes, spacing, colors and variables, see generated code, download assets and compare versions. Turn it on with the toggle in the toolbar or Shift+D. According to the Help Center, Dev Mode is available on all paid plans and requires a Full or Dev seat — worth clarifying before a project starts.

• Mark as ready for dev — the designer marks a frame, component or section as ready, and the developer sees it in a dedicated list
• Inspect: layer name and type, properties as code (CSS and other languages) or a list, applied styles and variables
• Compare changes — what changed since the last version; for an instance, Compare with main component
• Explore component behavior — a playground for switching variants and properties without changing the file
• Asset export to PNG, JPG, SVG and PDF, annotations and measurements