Set up Figma and draw your first screen

You've done research. You've sketched on paper. Now it's time for the tool almost every product design team uses: Figma.

This lesson gets you set up properly, avoids the traps that catch free-plan users, and walks you through your first real screen: the grey-box version of a sketch you've already made.

About the steps in this lesson. Every Figma instruction here was checked against Figma's own help centre in September 2026. Figma updates its interface often. If a button has moved or been renamed on your screen, the idea hasn't changed: search help.figma.com for the feature name shown in bold, and follow Figma's current instructions.

Words in this lesson

What you need

A laptop or desktop computer

Be clear about this before you start: you can't design in Figma on a phone. Figma's help centre states that it isn't possible to edit Figma Design files using the mobile app. The phone app lets you view files, leave comments, play prototypes, and mirror a design from your computer to see it at real phone size. That's genuinely useful later, but the designing needs a bigger screen.

According to Figma's system requirements, you need one of these browsers:

It runs on Windows 8.1 or later, macOS 11 or later, ChromeOS and Linux, through a supported browser. There are also Figma desktop apps for Windows and macOS, but the browser works fine and needs nothing installed.

If you don't have a laptop, a friend's computer, a library, a school lab or a cyber café will do. Your work is saved online, so you can pick it up on any computer where you log in.

A free account

Go to figma.com and sign up. The free plan is called Starter.

The free plan, and the trap to avoid

According to Figma's help centre, the Starter plan gives you:

• Unlimited drafts
• A team with a limit of 3 Figma Design files (shared with Figma Sites files), plus separate small limits for FigJam and Slides files
• One folder for organising team files
• 30 days of version history
• No Dev Mode and no team libraries, which are paid features

Here's the trap. Beginners create files inside their team, hit the 3-file limit within a week, and get stuck. Drafts don't have that limit. So:

Create all your course work in Drafts.

One more free-plan detail matters later: on Starter you can invite people to your drafts with can view access, but giving someone edit access to a draft needs a paid plan. For this course, view access is all you need to share work for feedback and marking.

Create your first design file

From Figma's file browser, any of these works:

• Open Drafts, then click + Create in the top-right corner and choose a design file
• Or, in Drafts, click New design file
• Or simply type figma.new into your browser's address bar

Figma calls a new file "Untitled". Rename it straight away, using a clear pattern such as:

UIUX Course – Module 3 – [Your Name]

A portfolio full of files called "Untitled" tells an employer something you don't want them to hear.

Find your way around

According to Figma's guide to design files, the editor is laid out like this:

┌───────────────────────────────────────────────────────────────┐
│  TOOLBAR  (tools for frames, shapes, text…)                    │
├────┬─────────────┬──────────────────────────┬─────────────────┤
│ N  │ LEFT        │                          │ RIGHT SIDEBAR   │
│ A  │ SIDEBAR     │        CANVAS            │  Design tab     │
│ V  │ Layers and  │                          │  Prototype tab  │
│    │ pages       │                          │                 │
└────┴─────────────┴──────────────────────────┴─────────────────┘

• Toolbar, along the top: the tools for creating things.
• Navigation bar, the narrow strip on the far left: tabs for your file's layers and pages, Assets, and more.
• Left sidebar: the list of layers and pages in your file.
• Right sidebar: the Design tab, for changing whatever you've selected (size, colour, spacing), and the Prototype tab, for making things clickable in lesson 3.5.
• Canvas: the open space in the middle.

Moving around the canvas

• Pan: hold down the Space bar, then click and drag.
• Zoom: hold down Ctrl (or Command on a Mac) and scroll, or pinch on a trackpad.

Draw your first screen

You'll rebuild the login screen idea from your paper sketches, in grey boxes only.

1. Create a phone-sized frame

Press F (or A) to turn on the Frame tool. Figma's help centre notes that when the Frame tool is on, frame presets appear in the right sidebar, grouped into categories such as Phone, Tablet and Desktop.

You can pick a phone preset, but here's a better habit for this market. Click once on the canvas to make a frame, then type the size yourself in the right sidebar's W (width) and H (height) fields:

• W: 360
• H: 800

That's the most common screen size in Nigeria, from lesson 1.4.

2. Name the frame

Double-click the frame's name where it appears on the canvas, or right-click the frame in the Layers list and choose Rename. Type Login. Every screen gets a real name, starting now.

3. Add the pieces

Use these tools. Figma's shortcut list includes R for Rectangle and T for Text.

• Rectangle (R): click and drag inside the frame. Then set its exact size by typing in the W and H fields.
• Text (T): click where you want text, and type.

Build this, all in grey:

A width of 312 leaves 24 of space on each side of a 360-wide frame, because 24 + 312 + 24 = 360.

Type the numbers into the fields. Don't drag things by eye. Figma will happily place something at a position like 137.5. You'll learn a proper spacing system in Module 6. For now, keep every gap and size a clean number.

4. Why grey, and why now?

With no colour to hide behind, you can see whether the layout itself works: whether the button is where a thumb can reach it, whether the spacing is even, whether the hierarchy reads. If a screen works in grey, colour makes it better. If it doesn't, colour won't save it.

If something doesn't work

Common mistakes

The short version

• Figma Design needs a laptop or desktop browser. On phones it's view-only, though the app can show and mirror designs.
• The free plan is Starter: unlimited drafts, a limit of 3 design files in a team, and 30 days of version history. Work in Drafts.
• Create a file from Drafts → + Create, or type figma.new.
• The editor has a toolbar at the top, layers on the left, and the Design and Prototype tabs on the right.
• Make screens with the Frame tool (F), and set exact sizes in the W and H fields. Start at 360 × 800.
• Build in grey boxes first.

Try it yourself

1. Sign up at figma.com on the free Starter plan, using a laptop or desktop.
2. Create a new design file in Drafts, and name it UIUX Course – Module 3 – [Your Name].
3. Create a 360 × 800 frame and name it Login.
4. Build the grey-box login screen from the table above, typing every size and gap as a number.
5. Create a second 360 × 800 frame called Login – Wrong PIN, and design the unhappy path: the same screen with a message explaining the PIN was wrong and what to do next.
6. Take a screenshot of both frames for your design-journal.
7. If you have an Android phone, install the Figma app, log in, and open your file to view it at real size.

You'll know you've got it when both screens are built entirely from typed sizes, every layer has a real name, and your file lives in Drafts.