Getting started in Figma — a complete walkthrough

Choose your track

Read this module through your lens

What is Figma, and what is UI/UX?

Figma is a free tool, used right in your web browser, for designing screens — the apps and websites you use every day were very likely designed in it. You do not install anything and you do not need to be an artist.

Two words you will hear constantly. UI (user interface) is what a screen looks like — the buttons, text, colors, and layout a person sees. UX (user experience) is how it feels to use — whether a person can find what they need and get their task done without confusion. UI is the surface; UX is the journey. This course teaches you to design both, starting from the very first click.

You do not need to memorize anything yet. The only goal of this module is to get you comfortable enough that the screen stops being scary.

Getting in: your free account and first file

Go to figma.com and sign up — it is free for what we are doing, and works in any modern browser. Once you are in, you land on a dashboard of your files.

To start designing, click the button to create a new design file. (Figma also has “FigJam” files for whiteboarding — that is not what we want; choose the design file.) A blank editor opens. This editor is where you will spend the whole course, so the next few slides just name its parts. Take a breath: it looks busy, but you will only touch a small corner of it today.

One thing to relax about immediately: there is no Save button, and you do not need one. Figma saves everything to the cloud automatically, every few seconds, as you work. You can close the tab and your work will be exactly where you left it.

The four regions of the screen

Everything in the editor lives in one of four regions. Learn these names and the cockpit becomes a dashboard.

The canvas is the big area in the middle — your infinite sheet of paper where the design lives. The toolbar runs along the top: the tools you use to make things (and it shows your file name and share button). The Layers panel is down the left side: a list of everything in your file, like a table of contents. The Properties panel is down the right side: the settings for whatever you currently have selected — its size, color, position, and so on.

A simple rule to remember the two side panels: left is what exists (the list of layers), right is the details of what you picked (its properties). Left = what, right = how.

Moving around the canvas

Before you make anything, get comfortable moving around, because the number-one beginner panic is “my work disappeared” — which is almost always just being zoomed or scrolled away from it.

Three moves do it all. To zoom, hold Cmd (Mac) or Ctrl (Windows) and scroll, or press + and -. To pan (slide the canvas around without changing anything), hold the Space bar and drag, or scroll. And the magic rescue: press Shift + 1 to “zoom to fit,” which instantly frames everything you have made on screen. Lost? Shift + 1. Every time.

Practice these until they feel automatic. When you can zoom in on a detail, zoom back out, pan across, and snap to fit, you are no longer at the mercy of the canvas — you are driving it.

The toolbar — and the four tools you actually need

The top toolbar has many icons, and that is exactly what overwhelms beginners. Here is the secret: to build your first real screens you need only four of them, and you can ignore the rest until you have a reason.

The Move tool (the arrow, shortcut V) selects and moves things — your default, resting state. The Frame tool (F) makes a frame, which is a container that becomes a screen. The Rectangle tool (R) draws boxes — buttons, cards, backgrounds. The Text tool (T) adds words. That is the entire starter kit: V, F, R, T.

One behavior to expect: when you click a tool, it stays active until you pick another (or press Escape / V to go back to Move). So if you draw one rectangle and click again, you will draw a second rectangle — that is not a bug, the Rectangle tool is still on. Tap V to return to selecting.

Your first frame, shape, and text

Now the payoff, in three steps. First, make a frame: press F (or click the Frame tool), then either draw a box on the canvas or pick a preset size like a phone from the right panel. This frame is your screen — everything goes inside it.

Second, add a rectangle: press R, then click-drag inside the frame to draw a box. This could be a button, a card, a header bar. With it selected, look at the right Properties panel — you can set its exact size and give it a color.

Third, add text: press T, click inside the frame, and type a word like “Button.” Press Escape when done. You now have a frame containing a shape and a label — a tiny screen. Press Shift + 1 to admire it. That is genuinely the core loop of all UI design; everything else is refinement.

Try it right here

You do not have to switch to Figma to practice the flow — this is a simulated Figma editor with the same regions and tools. Follow the guided steps under the canvas: make a Frame, drop a Rectangle inside, add Text, then turn on Auto layout. Click a tool, then click the canvas.

Notice the layout matches what you just learned: tools across the top, a Layers list on the left, Properties on the right, the canvas in the middle. The shortcuts in the tool labels (F, R, T, V) are the real Figma shortcuts. When this feels easy, doing it in real Figma will feel familiar.

Naming, layers, and not getting lost

Two last habits that separate a calm file from a messy one. As you add things, they appear in the Layers panel on the left — your table of contents. Click a layer there to select it on the canvas (useful when something is hidden behind something else). Double-click a layer’s name to rename it: “Search button,” “Title,” “Home screen” instead of “Rectangle 1,” “Text 3.” You will thank yourself in an hour, and a teammate will thank you in a week.

And remember the auto-save: no Save button, ever — Figma is continuously saving to the cloud, and you can see version history if you ever need to go back.

That is the whole orientation. You can get in, you can name every region, you can move around without losing your work, and you can build a frame with a shape and text. From here, every module just adds one new idea on top of this foundation.

Hands-on exercise

Open a new design file in real Figma (free at figma.com), or use the simulated editor above. First, just practice navigation: zoom in, zoom out, pan around, and press Shift + 1 to fit — until it is automatic. Then build a tiny screen: a frame, one rectangle, and a text label inside it, and rename all three layers in the left panel.

Write one sentence naming the four regions of the editor in your own words. If you can do the navigation moves and name the regions, you are ready for the rest of the course.

Second case · a first-timer's lost cursor

The same lesson, a different object

Common failures · spot them fast

The failure gallery

Each of these is caught by a quality gate — keep the cheatsheet open while you work.

Worked example

Watch the journey

Cheatsheet

Reflection