Sign in with Google

How to Use Figma: A Beginner's First Design

Build one real screen from blank canvas to a shareable link, learning only what that requires.

beginner10 min read
creative-toolsfigmaui-designdesign-toolsbeginners
Figma tutorials tend to teach the toolbar, which is the least interesting part of it — you can draw rectangles in anything. What makes Figma worth learning is a small set of ideas: frames, auto layout, components, and styles, which turn a static picture into something that resizes, repeats, and updates in one place. This guide builds one phone screen from a blank file to a shareable link, and touches nothing else.
iWhat you need
A free account on the Starter plan, which gives you one team with three Figma design files, unlimited personal drafts, and 30 days of version history. Team libraries and Dev Mode are paid-plan features; FigJam, Figma Slides, and Figma Draw are included. Any laptop from the last five years with a modern browser will run it. Budget an hour.
Figma runs in a browser tab, and that is not a compromise — it is the reason the tool works the way it does. There is no Save button, no file on your disk to lose, and no exported-to-PDF review cycle. Several people can be in one file at once, cursors visible, and a link is the whole handoff. Sign up at figma.com, then install the desktop app anyway: same application in a native shell, but you get local font access, which browser Figma cannot do without a helper, plus proper multi-window support.
One thing to understand early: drafts are your unlimited private scratch space, while team files count against Starter's three-file limit. Learn in drafts; move a file into the team only when someone else needs to work in it.
The canvas is infinite and unstructured. Everything meaningful happens inside a frame. A frame looks like a rectangle but behaves like a container: it clips its contents, it can scroll, it holds layout rules, it becomes a screen in a prototype, and it is the unit you export. A rectangle is just a coloured shape. Confusing the two is the most common beginner mistake, and it quietly breaks prototyping and export later.

Make your first frame

  1. 1Press F, or pick the frame tool from the floating toolbar at the bottom of the canvas.
  2. 2The right-hand panel fills with device presets. Pick a phone size, or draw any frame and type exact numbers into W and H. A common phone canvas is 390 by 844.
  3. 3Rename the frame immediately — double-click its name in the left panel, or press Cmd+R on macOS or Ctrl+R on Windows. Call it Home.
  4. 4Press Shift+1 to fit everything on screen and Shift+2 to zoom to the selection.
  5. 5Frames nest. A card inside your screen should also be a frame, not a group.
The toolbar has more in it than you need. Five entries cover a first design, and all five have single-key shortcuts.
text
V            Move / select
F            Frame
R            Rectangle        O   Ellipse
T            Text
P            Pen (you will barely use this)
C            Comment

Shift+A                  Add auto layout
Cmd+Option+K / Ctrl+Alt+K  Create component
Cmd+D / Ctrl+D           Duplicate
Cmd+G / Ctrl+G           Group
Cmd+R / Ctrl+R           Rename selected layer
Shift+1 / Shift+2        Zoom to fit / zoom to selection
Cmd+Shift+E / Ctrl+Shift+E  Export
Cmd+/ or Ctrl+/          Search all commands

The shortcuts worth learning on day one

The left panel lists your layers, topmost layer at the top. Groups (Cmd+G) bundle layers for moving together; frames do that and more, so prefer frames. Now the boring advice that matters: name your layers as you make them. A file full of Rectangle 47, Group 12, and Frame 9 is a file you cannot search, cannot hand to anyone, and cannot fix in a month. Renaming as you go costs two seconds. Reconstructing what Group 12 was costs an hour.
✓Constraints, in one paragraph
The Constraints control in the right panel decides what a layer does when its parent frame resizes — pinned left, right, centre, top, bottom, or scaling. It exists because a design is not one fixed size. With auto layout you rarely touch it; on anything laid out by hand it is what stops elements drifting off the edge.
Auto layout means the container sizes itself to its contents, with spacing and padding you set once. Instead of nudging pixels every time text changes length, you declare the rules and let Figma do the arithmetic. Build it on a button first, because a button is the smallest thing where the benefit is obvious.

A button, built properly

  1. 1Press T, click, and type Continue. Set the font size and colour in the right panel.
  2. 2With the text selected, press Shift+A. Figma wraps it in an auto layout frame sized exactly to the text.
  3. 3Set padding in the right panel — try 16 top and bottom, 24 left and right. The frame grows; the text stays centred.
  4. 4Give the frame a fill colour and a corner radius. That is a button, and it resizes itself when the label changes.
  5. 5Check the sizing dropdowns: Hug contents shrinks to fit the children, Fill container stretches to the parent, Fixed leaves it alone. Hug on both axes is right for a button.
Now do it again one level up. Select some text, an image placeholder, and your button, press Shift+A, set the direction to vertical, set the gap between items to 12 and the padding to 20, and you have a card that reflows when any child changes. Nest auto layout frames inside auto layout frames and an entire screen becomes something you can edit by changing one number.
!Fill container needs an auto layout parent
If the Fill container option is missing or greyed out, the layer's parent is not an auto layout frame. Select the parent, press Shift+A, and the option appears. This confuses almost everyone once.
A component is a master copy. An instance is a live reference to it. Change the master and every instance updates; override an instance and only that one changes. This is the difference between a design you can maintain and forty rectangles you have to fix one by one.
  1. 1Select the button frame you built and press Cmd+Option+K on macOS or Ctrl+Alt+K on Windows. Its layer icon turns into a purple diamond.
  2. 2Copy it three times with Cmd+D. Those are instances — hollow diamonds.
  3. 3Go back to the master and change its fill colour. All three instances change with it.
  4. 4Select one instance and change only its text. That override sticks, and future master changes still flow through everything else.
  5. 5Right-click an instance and choose Reset all changes to discard overrides.
Variants group related states into one component so consumers pick from a dropdown rather than hunting through a list. Duplicate your button, restyle the copy as a hover state and another as disabled, select all three, and choose Combine as variants in the right panel. Name the property State with values Default, Hover, and Disabled. Every instance now has a State dropdown.
Hard-coded hex values are the other thing that ages badly. A style is a named, reusable value. Select something with your brand colour, click the four-dot icon beside the Fill row in the right panel, and save it as Brand/Primary. Do the same for text: set a heading's font, size, weight, and line height, then save it as Heading/Large. Apply styles instead of raw values and changing the brand colour later is one edit, not sixty.
The Assets panel sits as a tab next to Layers on the left. It lists every component in the file, and you drag from it onto the canvas to place instances. Build a component once, then reach for it from Assets forever after.
You do not need a prototyping course, just proof that a tap goes somewhere. Duplicate the Home frame, change something in the copy, rename it Detail, then wire them together.
  1. 1Switch the right panel to the Prototype tab.
  2. 2Select your button. A small circular handle appears on its edge. Drag it onto the Detail frame.
  3. 3Figma creates an interaction — On click, Navigate to Detail. Set the animation to Instant or a short Smart animate.
  4. 4Click Present in the top right and click your button. That is a working prototype.
  5. 5Press C for the comment tool and leave a note on the canvas. Comments are pinned to coordinates and thread like messages, which is how design review works here.
Then hit Share in the top right and choose who has access and whether they can view or edit. Send view access to stakeholders and edit access only to people who will change the file. A shared link is enough for feedback — reviewers can comment without an editor seat.
Select a frame or layer, scroll to the Export section at the bottom of the right panel, and press the plus. Each row is one output, so several sizes go out at once.
  1. 1Icons and logos: SVG. It scales to any size, stays sharp, and is usually smaller than a PNG.
  2. 2Photos and gradients: PNG for transparency, JPG when file size matters more than precision.
  3. 3For web, export at 1x and 2x so high-density displays get a sharp version. For mobile, add 3x.
  4. 4Design at 1x. Figma multiplies on export, so a 24 by 24 icon at 3x gives you 72 by 72 with no quality loss.

Symptom, cause, fix

  1. 1Your layer will not go inside the frame. You are dropping it beside the frame rather than over it. Drag it onto the frame in the left panel, where nesting is unambiguous.
  2. 2Text gets cut off or shows an ellipsis. The text layer is Fixed size and the content outgrew it. Set its width or height to Hug contents.
  3. 3A component change did not reach an instance. That instance has a local override on the same property. Right-click it and choose Reset all changes.
  4. 4Auto layout puts things in the wrong order. It follows layer order, not canvas position. Reorder in the left panel.
  5. 5A font shows a missing-font warning for someone else. They do not have it installed. Use a Google Font, or have them install it locally with the desktop app.
  6. 6You cannot create a fourth team file. That is the Starter limit. Move the file to your drafts, which are unlimited.
Rebuild a screen from an app you use every day. Copying something real forces decisions a blank canvas lets you dodge, and it shows you how much of good design is spacing and hierarchy rather than colour. If your work involves video, How to Use Premiere Pro for Beginners takes the same one-project approach to an edit. For the specs and notes that sit beside a design file, How to Use Notion pairs well, and How to Read Technical Documentation makes Figma's help centre quicker to mine. For typography, colour, layout, and the judgement to tell a good screen from a busy one, the Design and Creativity roadmap puts them in a build order.