Contents7

2026-05-16 update: A post a few years old. The bones still hold up, but the tool UI and version are from when it was written and don’t match the current Figma.

Figma basics, part one. The previous post got as far as creating a design file. From here, I’m building out the screen itself.

The finished version looks like the image below. A plain screen, but it covers the core Figma basics: frames, fills, text, and alignment.

Preview of the finished design

The basic layout

The default Figma screen

Rough map of the screen:

  • The header is the tooling
  • The left sidebar is the objects you’ve created
  • The right sidebar adjusts the object you’ve selected

Frame

First, the screen bounds.

In Figma, a screen is expressed using a part called a frame.

Frames are versatile — they’re used for the screen bounds, as outer containers for elements, and more. There are templates available, so the easiest place to start is picking one of those.

Creating a frame from a template

Point

  1. Click the frame icon in the header
  2. The frame templates appear in the right sidebar — pick the one you want

Clicking creates an iPhone 13 Pro Max frame in the center of the canvas.

The right sidebar shows the new frame labeled # iPhone 13 Pro Max.


With the screen bounds in place, next is the elements inside the screen.

Starting with the header.

The previous step used a frame template — this time, drawing a frame freely.

Drawing a frame freely

Point

  1. Click the frame icon in the header
  2. Move the cursor to where you want the frame
  3. Drag to draw

Freehand drawing isn’t pixel-precise, so aim for roughly the right size and fine-tune later.

Use freehand drawing for larger blocks like headers, and for the base shape of small elements like buttons.

Change the background fill

The freehand-drawn frame comes out plain white. To make it easier to see, I’ll give the header frame a background fill.

Fine adjustments like fill color happen in the right sidebar.

Changing the background fill

Point

  1. Select the element to adjust
  2. Find the Fill row in the right sidebar
  3. Click the + icon to the right of Fill
  4. Click the color code shown below
  5. Pick a color in the color picker

That switches the fill to black.

Move and resize elements

The header has its color, but the position and size are off.

Time to move it and resize it.

Moving and resizing an element

Point: repositioning

  1. Select the element to adjust
  2. Drag to where you want it
  • Smart guides snap to center and edges
  • Shift + drag locks movement to the x or y axis

Point: resizing

  1. Select the element to adjust
  2. Move the cursor to the bounding-box handle
  3. Drag to resize

That puts the header roughly where it belongs, at roughly the right size.

But the height is a few pixels off, so a quick fine-tune.

Fine-tuning element height

Point: fine-tuning element height

  1. Select the element to adjust
  2. Click the H field under Frame in the right sidebar
  3. Edit the value
  • Arrow up / down nudges by 1 pixel

Under Frame, X and Y are position; W and H are width and height — all editable.

Enter text

With the header frame in place, next are the elements inside the header.

For the walkthrough, putting some text in the header.

Entering text

Point

  1. Click the T icon in the header
  2. Click where you want the text
  3. Type once the cursor goes into edit mode

That puts the word “Header” inside the header.

Changing the font size

The text is too small as-is, so bumping the font size up to something readable.

Same as before — fine adjustments happen in the right sidebar.

Changing the font size

Point

  1. Select the text to adjust
  2. Find the Text row in the right sidebar
  3. Find the numeric field in the lower right of the Text row
  4. Click the number
  5. Edit the value
  • Arrow up / down nudges by 1 size unit

That gets the font size to something readable.

Align elements

Font size sorted. Next, the text position.

Same as before — fine adjustments happen in the right sidebar.

Centering an element

Point: horizontal center

  1. Select the element to adjust
  2. In the right sidebar, click the icon with a vertical line through the center

Point: vertical center

  1. Select the element to adjust
  2. In the right sidebar, click the icon with a horizontal line through the center

The other icons on the same row are the rest of the alignment options.


Header done. Next, the footer.

Same design as the header, so copying the header across.

Duplicating an element for the footer

Point: duplicating an element

  1. Select the element to duplicate
  2. Press Ctrl + C
  3. Press Ctrl + V

That gives the footer copy.

It sits at the same position as the header, though — needs to move to the bottom.

Placing the footer at the bottom of the screen

Point: align to bottom

  1. Select the element to adjust
  2. In the right sidebar, click the icon with a horizontal line at the bottom

Footer done.

That covers the first set of Figma operations. Part two picks up the core features worth learning early when you start using Figma seriously.