Figma Fast Track: Design a Real App
Go from zero Figma experience to a portfolio-ready mobile app UI in 5 modules. Fast-paced, hands-on, and built for CS students who want practical design skills.
Build it yourself, get guided when you are stuck, and leave with proof you can actually show.
What you learn by building this
- Navigate Figma confidently and work at speed
- Build reusable components and a basic design system
- Apply color, typography, and spacing principles that actually look good
- Design a complete mobile app UI from scratch
- Create a clickable prototype and export assets for developers
Challenge
Think first, then write
Before we do anything — a quick question
Open figma.com and create a free account if you don't have one. Then hit "New design file".
You're looking at a blank canvas. Somewhere on this screen is the answer to this:
What's the difference between a Frame and a Rectangle in Figma?
Don't Google it. Just look around the toolbar at the top. Hover over the icons. What do you think?
Take 60 seconds and make a guess — then we'll show you exactly what it is and why it matters.
No wrong answers here. This is just to get your brain in gear before the explanation lands.
The most important thing in Figma: the Frame
Here's the answer. A Frame is a container. A Rectangle is just a shape.
That sounds small. It isn't.
In Figma, everything lives inside a Frame. A mobile screen? Frame. A card component? Frame. The button inside that card? Also a Frame (or inside one). Frames are how Figma knows what your design is — they have dimensions, they clip content, they can have auto layout applied to them, and they map directly to what a developer would call a "view" or "div."
A Rectangle is just a colored box. It has no children. It doesn't structure anything.
The mental model: if you're from a coding background, think of a Frame like a <div> and a Rectangle like a decorative element (<hr>, a colored <span>). You build structure with Frames, decoration with shapes.
The Figma interface in 60 seconds
You don't need to memorize all of this. Just know where to look:
| Area | What's there |
|---|---|
| Toolbar (top) | Frame tool (F), Rectangle (R), Text (T), Move (V) |
| Left panel | Layers — your hierarchy of frames and elements |
| Right panel | Properties — size, color, fill, effects |
| Canvas (center) | Your design lives here |
One shortcut to learn right now: press F to activate the Frame tool. That's all you need for the next 5 minutes.
Tasks
Set up your workspace
You're building a mobile expense tracker app over this course. Every lesson adds a piece. By the end, you'll have a real, portfolio-worthy UI.
Let's set up the file.
Step 1: Name your file
At the top of the screen, click "Untitled" and rename it:
Expense Tracker — Leo
Expense Tracker — Leo
Step 2: Create your first Frame
- Press
Fto activate the Frame tool - Look at the right panel — you'll see preset sizes. Find "Phone" → "iPhone 14" and click it
You should see a frame appear on the canvas: 390 × 844 pixels.
You should see: A white rectangle with a blue border on the canvas, and a layer called iPhone 14 in the left panel.
Step 3: Rename the frame
Double-click the frame name in the left panel (it says iPhone 14). Rename it:
Home Screen
Home Screen
Hit Enter.
Step 4: Duplicate it 3 times
Select the frame. Then press Cmd+D (Mac) or Ctrl+D (Windows) three times.
Rename each duplicate (double-click in the layers panel):
Transaction HistoryAdd ExpenseProfile
Step 5: Organize them
Select all 4 frames. In the toolbar at the top right, look for the "Tidy up" button (it looks like a grid icon), or just drag the frames so they sit side by side with some space between them.
You should see: 4 iPhone-sized frames lined up on your canvas, each with a different name in the layer panel.
That's your app skeleton. Four screens, ready to design.
If stuck: If you can't find the preset sizes after pressing F, try drawing a frame manually by clicking and dragging on the canvas. Then in the right panel, manually set W: 390, H: 844.
Predict
What will happen?
Quick check
Look at your canvas. You have 4 frames.
What do you think happens if you drag a Rectangle onto the canvas — outside any frame?
Try it:
- Press
Rand draw a small rectangle anywhere on the gray canvas area (not inside a frame) - Look at the left panel
Now drag that same rectangle inside the Home Screen frame.
Look at the left panel again.
What changed?
The rectangle became a child of the frame — it's now indented under it in the layer hierarchy. When something is inside a Frame, it's contained by it. When it's outside, it's just floating.
This is exactly how HTML nesting works. <div> inside <div>. Same concept, different tool.
Delete that test rectangle (select it, press Delete) and move on.
How this build unfolds
Figma Foundations
Get oriented fast. Frames, shapes, text — you'll have your first real screen in under an hour.
Auto Layout & Components
Stop moving things by hand. Learn auto layout and build your first reusable components.
Visual Design That Works
Color, type, and spacing — the three things separating 'looks like a student project' from 'looks professional'.
Build the App
Four real screens. Full layout. Everything you've learned, applied to a complete product.
Prototype & Handoff
Make it click. Connect your screens into a real prototype and export everything a developer needs.
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.