Think the screen through in Figma

My guess is that after EP.5,
the first time you ask the AI to change a page,
you'll hit a familiar moment:

that's not what I meant...
but I can't say what I do want either.

You try adjectives, feelings, comparisons.
After 5 rounds
what the AI gives you drifts further away.
And you start wondering:
is the AI not smart enough, or am I not clear enough?

Honest answer:
usually it's you not being clear.

Human visual memory is much stronger than verbal memory.
You have a picture in your head,
and turning that picture into words
loses 80% of the information.

So this episode teaches the one extra skill most worth a vibe coder's time:
using Figma to think the screen through.

The goal is narrow.
It's one more channel for talking to the AI,
and it has nothing to do with becoming a designer.

Why Figma?

There are plenty of design tools in 2026:
Figma, Sketch, Adobe XD, Penpot, Framer...

But for a vibe coder,
Figma has three advantages the others don't:

So I won't cover Sketch or the others here.
For you, Figma is the only learning investment that pays off.

⚠️ Tools move fast. The features written up in 2026-04 here (Figma Make, Variables, Code Connect, Dev Mode) may have newer versions by the time you read this.
Following the official release notes is the accurate route.

A vibe coder only needs 5 Figma moves

Figma has something like 200 features in total.
You only need 5 of them.

When I built NaLi Match, leoaido.com, and Crispy Kingdom 脆脆王國,
these 5 were the Figma features I used.

① Frame: every screen is a box

A Frame is the most basic thing in Figma.
Think of it as a sheet of paper.
Every Frame is one screen.

For a phone app, every page is a Frame.
For a website, every block (hero, feature, CTA) is a Frame.

Handy shortcut: F to drag out a Frame,
then pick a preset size in the right panel, iPhone 16, Desktop 1440, and so on.

How a vibe coder uses it:
don't chase pixel perfection.
Just pull out roughly what each screen looks like.

② Auto Layout: let Figma do the arranging

This is the most important Figma feature for a vibe coder,
because the concept is identical to CSS Flexbox,
and learning it means you start thinking about design the way the web works.

Select a Frame, press Shift + A,
and it turns into Auto Layout.
After that, whatever you drop inside
gets spaced and aligned by Figma automatically.

③ Components: build the repeated things once

A web page repeats a lot of things:
buttons, cards, avatars, tags.

Select an element you finished, right click, Create Component (or Ctrl/Cmd + Alt + K),
and it becomes the main component.
Everything you drag out afterwards is a copy.
Change the main component and every copy changes with it.

This is the same logic as React components.
The design system you build in Figma
maps cleanly onto the component structure in your code.

④ Variables: colors, type sizes, and spacing in one place

Added in 2024, mainstream by 2026.
In Figma you can define:

・primary color = #c9a96e
・heading size = 32px
・card corner radius = 12px
・base spacing = 16px

Then every component uses the variables,
and when you want a different theme color (a dark version, say),
you change one variable and the whole design follows.

The 2025 / 2026 versions added Expression Tokens,
so variables can do math (primary color 20% lighter, for example),
which brings the design system closer to what real code can do.

How a vibe coder uses it:
treat Variables as the design version of CSS variables.
When you later ask the AI to turn this Figma file into code,
the variables map straight onto --primary and --font-size-h1 in :root.

⑤ Export: turn the design into something the AI can read

Select a Frame, scroll to the bottom of the right panel, Export, PNG / SVG / PDF.
That's it.

With the exported PNG you can:

For a vibe coder,
the exported image is the real output of Figma.
How the screen looks inside Figma doesn't matter.
What matters is that the AI can pick it up.

Two features a vibe coder should know about

Figma Make: Figma's own AI design assistant

Figma's AI feature, launched in 2025.
Give it a text description and it generates UI components, writes copy, and makes illustrations,
using the Variables and Components you already set up,
so it won't produce something that clashes with your design system.

Better still, Figma Make can look at what it made.
It analyzes its own screenshots
and adjusts spacing, alignment, and structure until the result matches your description.

For a vibe coder
that's an AI pair for the design stage.
Talk to Figma Make inside Figma
and you get a first version of the design.

Code Connect: bind Figma to your actual code

Code Connect lets you bind a component in Figma
to the real React / Swift / Android component in your GitHub repo.

When a developer clicks a button in Figma's Dev Mode,
what they see is the React component this button maps to, PrimaryButton, at src/components/Button.tsx.
They take the code and use it,
which is a big step up from design specs that only said padding 12px.

For a vibe coder,
this turns design to code into a one-way process with no redoing.
When the AI later sees a Figma link in your project,
it finds the matching component instead of inventing a new one.

A vibe coder's Figma workflow (the 30 minute version)

You don't need to watch all 200 videos of Figma's official tutorials.
Here's the 30 minute workflow I run at the start of every project:

One pass through those 30 minutes
gives you a design you're happy with and the AI can read.
What those 30 minutes replace
is 10 rounds with the AI, 5 hours of edits, and still feeling it's wrong.

The Figma traps vibe coders fall into

Trap 1: getting stuck on pixel perfection

The most common beginner problem:
4 hours aligning the hero section perfectly,
then what the AI generates doesn't line up anyway because of responsive screens.

Remember:
a vibe coder's Figma file is a draft for the AI to read.
Stop as soon as it feels right.
Chasing print-shop quality will eat unlimited time.

Trap 2: skipping Variables and diving in

A design with no Variables
means changing a color later in 50 places.
You'll also find the AI's code full of hardcoded colors,
because it couldn't see that those colors were one variable.

Trap 3: cramming everything into one Frame

Put 5 pages of content in one Frame
and Figma won't complain, but the AI reading the PNG can't find the page boundaries.
Every logically separate screen deserves its own Frame.

Trap 4: using the free plan inside a team file

The free plan has a 3 files / 3 pages limit (the 2026 numbers, check again before you publish).
Files you create in a team space count against that quota,
while a personal space doesn't have the limit.
A vibe coder should start in a personal space.

How to hand a Figma design to an AI

Three common routes, depending on which AI tool you use:

① For Claude Code / Antigravity / Codex, use a PNG

Drag the PNG you exported from Figma into the chat window
and tell it:

build an index.html from this image,
HTML + CSS in the same file,
manage colors with Variables (pull the swatches out of the image),
lay it out with Flexbox,
and when you're done, tell me which swatches and type sizes you picked up.

That last line, tell me which swatches and type sizes you picked up, matters.
The AI aligns with you, and you get to check whether it read the design correctly.

② For v0.dev, drop in the PNG or a description

v0 is Vercel's design-to-React tool,
and it's trained hardest on Figma-style screenshots.
Drop in a PNG and it returns React + Tailwind + shadcn/ui components.

v0's advantage is that it gives you production-grade component code.
Its downside is that it only does UI, no backend.
So v0 suits the stage where you just want the screen built.

③ For Cursor / Claude Code, the Figma MCP server

The 2026 advanced route:
install Figma's MCP server
and your AI tool reads your Figma files directly,
with no PNG export.

The workflow feels great but the setup bar is high,
so I'd stay on the PNG route for your first few projects
and move up to MCP once Figma feels familiar.

A template for your instructions

Next time you hand a Figma design to the AI,
use this structure:

[attach the Figma PNG or link]

Build this design.
File structure: [single index.html / separate files / a Next.js project]
Stack: [plain HTML+CSS / React+Tailwind / Vue]
Swatches: pull the primary and secondary colors out of the image, manage them with CSS variables
Type: pull three levels out of the image, heading / body / caption, as variables
Layout: Flexbox / Grid, responsive from desktop 1440 down to phone 375
Interaction: [button hover / card hover / form validation]

When you're done, tell me:
1. the swatches and type sizes you picked up
2. anything you had to guess because the design was unclear
3. anything you'd suggest I change back in Figma

Point 3 is the key one.
The AI tells you which parts of your design get stuck in implementation,
and that feedback makes your next Figma file smarter.

With Figma plus the three levels of instruction from EP.5,
you can build a page you're actually happy with.

But a finished page still only lives on your computer.
Close the laptop and it's gone,
friends can't see it,
clients can't reach it,
and you have no version history to go back to.

EP.7 is about GitHub:
why you can't keep files only on your computer,
and how to get the AI to manage versions for you,
so tomorrow you can still find yesterday's version.