Learn Figma from scratch: a 7-day plan for beginners

You can learn the basics of Figma in about seven days if you spend 30–60 minutes a day on one skill: frames, type and color, auto layout, components, composing a screen, prototyping, and sharing. The free Starter plan covers all of it. By the end of the week you have a component-based sign-up screen and a working prototype.

I'm Hai Le, a UI/UX designer with more than five years of work behind me, including design systems for Car From Japan, Oreka and Joyme. This plan teaches the tools in the order a real screen gets built, and every day ends with something you can check off.

What do you need before you start?

A computer, an internet connection and a Figma account. The browser and the desktop app both work.

The Starter plan is free and is enough for the whole week. According to Figma's plan overview, Starter allows 3 Figma Design files per team and an unlimited number of drafts, so keep your practice work in drafts. Starter also limits version history to 30 days and leaves out team libraries and Dev Mode. You won't miss any of those in week one.

If you like video, Figma's own Figma Design for beginners course on Figma Learn is free and works on Starter. It has you build a portfolio site from your first layer through auto layout, components and prototyping. It pairs well with this plan, which stays focused on a single screen.

Day 1: What are frames and layers?

A frame is a container. A phone screen, a card and a button can each be a frame. Anything you place inside becomes a child layer, and the layer tree lives in the left sidebar.

Press F or A to switch to the Frame tool. While it's active, the right sidebar lists presets: Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media. Pick a phone preset and you have a correctly sized screen.

When you want to bundle things together, use a frame rather than a group. Frames are what unlock auto layout, constraints and prototyping, and you'll need all three from day three onward.

Exercise (30 min). Create a phone frame. Inside it, draw a rectangle for a text field and one for a button, then add three text layers: a heading, a field label and a button label. Rename every layer in the left sidebar, for example input/email and button/primary.

Output. A frame whose layer list makes sense to someone who never looks at the canvas.

Day 2: How do you keep type and color consistent?

Screens look messy when they use too many font sizes and too many near-identical grays. Pick a small set up front and stay inside it.

For Joyme I kept all type in one family, Nunito Sans, at three weights and six sizes from 12 to 32px. Color was a purple ramp as primary, an orange ramp as secondary, and a gray ramp. A sign-up screen needs far less: four type sizes and five colors will do.

Figma stores these decisions as styles (text and color styles) or variables. Variables come in four types (color, number, string and boolean) and live in collections. For now, the point is that you change a value once and the whole file follows.

Exercise (45 min). Pick a typeface. Create four text styles: heading 28px, body 16px, label 14px, caption 12px. Create five colors: background, primary text, secondary text, border, accent. Apply them to yesterday's frame until no layer has a hand-typed size or hex value.

Output. A small style sheet in the corner of the canvas, and a day-one frame that only uses values from it.

Day 3: What is auto layout, and why learn it this early?

Auto layout makes a frame arrange its children in a row or column, with spacing and padding you control. Type a longer label and the button grows. Add a field to a form and everything below moves down.

Select the layers and press Shift + A, or click "Add auto layout" in the right sidebar. There are three flows: Vertical, Horizontal and Grid. Vertical and horizontal also support Wrap, which pushes children to a new row or column when they run out of room. The two settings you'll touch most are Padding, the space between the frame's edge and its content, and Gap, the space between children.

Most beginners get stuck on the three resizing modes:

Mode	What it does	Typical use
Hug contents	Shrinks the frame to fit its children	Buttons, tags, chips
Fill container	Stretches to fill the space in the parent	Text fields, full-width buttons
Fixed	Keeps the exact size you set	Avatars, icons

Exercise (60 min). Rebuild day one with auto layout. The button is a horizontal frame set to Hug contents with 12 and 20 padding. Each field is a vertical frame holding a label and an input. The whole form is a vertical frame with a 16 gap, children set to Fill container.

Output. Drag the phone frame wider and the form stretches cleanly. Change the button text to a longer phrase and the button grows to fit.

Day 4: What do components and variants do?

A component is a reusable block. Edit the main component and every instance updates. Every design system is built on this one mechanism.

Select your layers and press Option + Command + K on Mac or Ctrl + Alt + K on Windows. You can also click "Create component" in the right sidebar or the right-click menu.

Variants group versions of one component into a component set, such as a button with Size and State properties. Right-click the main component, choose Main component, then Add variant. Each variant in a set has to be a unique combination of property values.

When I built a library of more than 50 components for Joyme, the states that slipped through most easily were the unglamorous ones: empty, error, offline, and the "are you sure?" dialog before deleting a page. Get into the habit early of asking what other states a block can be in. The Joyme case study shows how those states ended up in the product.

Exercise (60 min). Turn the button and the text field into components. Give the button a State property with Default, Hover and Disabled. Give the field Default, Focus and Error, where Error has a red border and a message underneath.

Output. A "Components" page with two component sets. Change the button color on the main component and every instance changes with it.

Day 5: How do you put a full screen together?

No new tools today. You assemble a complete sign-up screen from instances only, with no loose shapes.

The hard part is the design decisions. On the Car From Japan inquiry form, I cut the popup down to what the buyer hadn't already given us: name, email and phone as required fields, address as optional. The popup title reused the exact words on the button the buyer had just clicked. Both habits apply to your first form. Ask only for what you need, and make the button label match what the user sees next.

Exercise (45 min). Build a "Create account" screen: heading, three fields (full name, email, password), a primary button, and a line that reads "Already have an account? Log in". Use realistic data, such as a long name, to see whether text overflows. Duplicate the frame so you have an empty state and a version with an email error.

Output. Two frames, "Sign up" and "Sign up – email error", built entirely from your day 2–4 styles and instances.

Day 6: How do you make a clickable prototype?

A prototype wires frames together so other people can click through as if it were a real app. It is the cheapest way to find confusing steps before a developer writes any code.

Open the Prototype tab in the right sidebar. Select the layer that should be clickable, then drag the plus handle to the destination frame. In the interaction details, set the trigger to On click (or On tap), the action to Navigate to, and try the Smart animate animation. Click Present in the toolbar to try it.

At Oreka, we prototyped the product Q&A feature and had 5 buyers and 5 sellers try it before it was built; 9 of the 10 finished the task without help. You don't need ten people. One friend clicking through for five minutes will show you where people hesitate.

Exercise (45 min). Add a third frame, "Account created". Link the button on the empty frame to the error frame, and the button on the error frame to the success frame. Send the link to one person and ask them to think out loud while they click.

Output. A three-screen prototype that runs in Present mode, plus a short note on where your tester paused.

Day 7: How do you share your file and try Figma Make?

Two jobs today: tidy the file so someone else can read it, and try an AI tool so you know what it is good for.

Tidying means naming pages ("Components", "Screens"), naming frames by flow, deleting stray layers, and clicking Share to send a view link. Dev Mode isn't on Starter, so developers will look at your file in the normal view. The layer names you set on day one help them more than you'd expect.

Then open Figma Make: go to Drafts in the file browser and click Make in the top-right corner. Paste your "Sign up" frame into the chat and ask it to build a working prototype. Compare the result with your own version and write down what it got right and what it guessed wrong. What is Figma Make covers prompting, Starter plan limits, and what Make can't do yet.

Exercise (60 min). Tidy the file as above, then create a Figma Make file from the "Sign up" frame. Send at least two follow-up prompts, one about layout and one about the error state.

Output. A clean Figma link you'd be happy to send, and a 5–10 line note comparing your build with Make's.

Where do you go after the first week?

You now have enough to head in one of two directions.

To go deeper on design, rebuild a screen from an app you use daily, then learn variables and modes such as light and dark. That is when styles, components and auto layout start turning into a small design system.

To turn designs into pages that run, read Claude Code for designers next. Figma MCP and Claude Code shows how to let Claude Code read tokens and components straight from a Figma file, and What is DESIGN.md covers writing your design rules into a plain text file that people and AI tools can both follow.

If you're hiring a designer who builds design systems and works closely with developers, my about page has my background and contact details.

Sources

• Starter plan overview, Figma Help Center
• Course overview: Figma Design for beginners, Figma Learn
• Frames in Figma Design, Figma Help Center
• Guide to auto layout, Figma Help Center
• Create and insert component instances, Figma Help Center
• Create and use variants, Figma Help Center
• Overview of variables, collections, and modes, Figma Help Center
• Connect your prototype, Figma Help Center
• Present designs and prototypes, Figma Help Center
• Create a Figma Make file, Figma Help Center