Skip to main content
Back to module
Visual Design Fundamentals · Design Tools

Getting started in Figma

Reading57mLesson 1 of 3 in this module

Set up a free Figma file, create frames and build a button and a card with auto layout.

Why it matters

Figma is the most widely used interface design tool in product teams today. It runs in the browser (with optional desktop apps), files live in the cloud, and many people can work in the same file at once, including developers who inspect measurements and copy CSS. Knowing the basics lets you turn sketches into clean, shareable screens and join a design team's workflow. The ideas in this lesson (frames, constraints, auto layout) also exist in other tools such as Penpot, a free open-source alternative.

Getting set up

Figma has a free plan, which is enough for learning; it limits some features and the number of files you can keep in team projects. Plans and limits change, so check figma.com/pricing for the current details. Students and teachers can apply for a free education plan. Checked on 2026-10-23.

Create an account, then create a new Design file from the file browser. The screen has three main areas:

  • Left panel: layers (everything in the file, as a tree) and pages.
  • Canvas: the infinite workspace in the middle.
  • Right panel: properties of whatever is selected (size, position, fill, text, layout), plus Prototype and the developer-facing view.

Useful shortcuts (Mac uses Cmd where Windows uses Ctrl): F or A frame, R rectangle, T text, V move, Space + drag pan, Cmd/Ctrl + scroll or Z zoom, Shift + 1 zoom to fit everything.

Frames: your screens and containers

A frame is a container, like an artboard. Press F and pick a preset from the right panel (for example a phone size) to create a screen. Frames can hold other frames, so a card inside a screen is also a frame. Unlike a plain group, a frame can have its own fill, corner radius, padding, layout grid and clipping.

Name your layers as you go ("Card / Profile", "Button / Primary"). Developers and future you will read these names.

Auto layout: frames that arrange themselves

Auto layout turns a frame into a flexible container, similar to CSS flexbox. Select a frame or some layers and press Shift + A. You can then set:

  • Direction: horizontal (a row) or vertical (a column), or wrap.
  • Gap: the space between children (use your 8-point scale).
  • Padding: space inside the frame's edges.
  • Alignment: where children sit (top-left, centre, and so on).
  • Resizing: each layer can be Fixed (a set size), Hug contents (grow to fit what is inside) or Fill container (stretch to the available space).

A worked example: a button

  1. Press T and type "Save changes". Set 16px text, semi-bold.
  2. With the text selected, press Shift + A. Figma wraps it in an auto layout frame.
  3. Set padding to 12 top and bottom, 24 left and right. Add a fill colour and a corner radius of 12.
  4. Set the frame's width and height to Hug.
  5. Now edit the text to "Save". The button shrinks to fit. Change it to "Save and continue" and it grows. That is the point of auto layout: no manual resizing.

A worked example: a card

  1. Create a vertical auto layout frame with 16px padding and a 16px gap.
  2. Inside it, add an image placeholder (a rectangle set to Fill width), a title, a short paragraph and your button.
  3. Set the card to a fixed width (for example 328, which fits a 360 phone with 16px margins) and Hug height.
  4. Add a line to the paragraph. The card grows taller by itself and everything below moves down.
  5. Nest a horizontal auto layout for two buttons side by side with an 8px gap.

Mapping to code helps here: the card is roughly display: flex; flex-direction: column; gap: 16px; padding: 16px;, and Hug is like width: fit-content.

Sharing and handoff

Use Share to invite people as viewers or editors, or copy a link. Comments (press C) let people pin feedback to exact spots. Developers can inspect sizes, colours and spacing.

Common mistakes

  • Using groups instead of frames. Groups cannot have padding or auto layout.
  • Placing everything by hand. If you nudge items pixel by pixel, wrap them in auto layout instead.
  • Unnamed layers ("Frame 427", "Rectangle 12"). Rename as you go.
  • Off-scale values like a 13px gap. Keep to 4, 8, 16, 24, 32.

Quick recap

  • Figma files hold frames (screens and containers) on an infinite canvas.
  • Auto layout (Shift + A) arranges children with direction, gap, padding and alignment.
  • Hug, Fill and Fixed decide how layers resize.
  • Name layers and share links for feedback.

Try it

Open the Do tab and build a phone screen with an auto layout button and card in a free Figma file.

Also in this lesson: