Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
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.
Figma Foundations
4 lessonsGet oriented fast. Frames, shapes, text — you'll have your first real screen in under an hour.
Auto Layout & Components
4 lessonsStop moving things by hand. Learn auto layout and build your first reusable components.
Visual Design That Works
3 lessonsColor, type, and spacing — the three things separating 'looks like a student project' from 'looks professional'.
Build the App
4 lessonsFour real screens. Full layout. Everything you've learned, applied to a complete product.
Prototype & Handoff
3 lessonsMake it click. Connect your screens into a real prototype and export everything a developer needs.
Responsive & Web Design
4 lessonsScale your mobile design to a full desktop dashboard. Breakpoints, 12-column grids, and components that adapt — the skills behind every major design system.
Public lesson
Challenge
Think first, then write
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.
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.
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
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.
At the top of the screen, click "Untitled" and rename it:
Expense Tracker — Leo
Expense Tracker — Leo
F to activate the Frame toolYou 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.
Double-click the frame name in the left panel (it says iPhone 14). Rename it:
Home Screen
Home Screen
Hit Enter.
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 ExpenseProfileSelect 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?
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:
R and draw a small rectangle anywhere on the gray canvas area (not inside a frame)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.
6 modules · 22 lessons
Figma Foundations
Auto Layout & Components
Visual Design That Works
Build the App
Prototype & Handoff
Responsive & Web Design
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.