Skills / Mock it up in Figma
Mock it up in Figma
Mock the screen in Figma before building it. Free tier, frames, real content, and a share link for feedback. Use when they say "design it first", "make a mockup", "learn Figma", or are about to build a UI they haven't sketched.
Use this skill. Nothing to install.
Don't have an agent? · Raw file: skills/mockup-in-figma.md
Watch the first two minutes
This is how a session goes, including the blank-canvas moment. Click through it.
Scripted example of a real session.
Why mock it instead of just building it?
Because of where mistakes get found. A layout problem discovered in a mock costs one drag to fix; the same problem discovered after the page is built costs an evening of rewriting markup, and by then you are attached to the code. The mock is where you argue about arrangement, hierarchy, and what goes above the fold while every option is still cheap. When the arguing is done, the mock becomes the spec: exact sizes, hex values, and spacing carried straight into the build.
What you end up with
A named Figma file, a share link, and a mock precise enough to build from. Here is the closing state of the tutoring page above.
- One frame, at a real size. 1440 for desktop because that is where the audience is. The mobile frame is a named next step, and doing it later is fine.
- Real content everywhere. The actual headline and the actual prices are in the mock, because placeholder text would have hidden the problem the feedback round caught.
- Numbers a build can use. Sizes, hex values, and the spacing step are written down, so building the page is translation instead of redesign.
- One outside answer changed the layout. The whole point of mocking first: the fix cost a drag, and it happened before any code existed.
Questions people actually ask
Is this free?
The skill is free, no account beyond Figma's own. Figma's free tier covers everything the session needs: three files and unlimited personal drafts. The agent you paste the skill into may or may not be free; Gemini has the widest free tier.
Can the agent drive Figma for me?
No, and the skill says so up front. It directs precisely, like "press F, drag a 1440 by 900 frame", and you report what you see, with screenshots at checkpoints. You end up knowing the tool, which is part of the value.
Do I have to learn all of Figma?
No. Four tools carry the whole session: Frame, Rectangle, Text, and Move, plus zooming and renaming layers as you go. Components get taught the first time you copy a button, in one line. Auto layout appears only if lists or cards are central to your screen; variants and prototyping are not today's lesson.
Should I mock desktop or mobile?
Whichever your users will mostly be on: 1440 wide for desktop, 390 for mobile. You do the other one later if time allows. Guessing wrong is cheap here, which is the point of doing this in a mock.
What happens to the mock afterward?
It becomes the spec. The exact sizes, hex values, and spacing in the mock carry directly into the build, and the share link keeps working for feedback while you build. If the thing you're building is a site, build-website picks up exactly where this ends.
Where to go from here
Build what you mocked:
Screens worth mocking first:
Curious? Read the full skill — the exact instructions your agent gets
--- name: mockup-in-figma category: design description: Mock the screen in Figma before building it. Free tier, frames, real content, and a share link for feedback. Use when they say "design it first", "make a mockup", "learn Figma", or are about to build a UI they haven't sketched. --- # mockup-in-figma Help someone mock a real screen — a page of their site, an app view, a dashboard — in Figma before any code exists. The point is to make layout mistakes where they cost minutes. Teach only the features this screen needs. Use available UI controls when authorized; otherwise guide precisely and ask for screenshots at checkpoints. ## Setup Check Figma's current official plan limits before creating the file. Use the person's own account and avoid any paid feature the chosen plan does not include. Have them create a file named after the project. The four tools that matter: Frame (F), Rectangle (R), Text (T), and Move (V). Plus two habits: use the platform-appropriate zoom shortcut, and rename layers as they go. Introduce anything else only when the mock demands it. ## Mock the real screen 1. Decide what screen and for whom: what does the visitor need to do here? List the elements that answer that — usually 5–8 things (header, headline, action button, content blocks). 2. Frame at a real size: 1440 wide for desktop, 390 for mobile. Pick whichever their users will mostly be on; do the other later if time allows. 3. Gray boxes first. Block every element as rectangles before any styling — this is the layout argument, have it now. Propose two arrangements with a one-line trade-off and let them choose. 4. Real content in. Their actual headline, their nav labels, their button text. Placeholder text hides layout problems that real text exposes — a mock full of lorem ipsum tests nothing. 5. Style with restraint: one or two fonts, their brand colors if a kit exists, otherwise black/white plus one accent. 8px spacing steps keep gaps consistent without thinking. ## Just enough components When an element repeats — a button, a card — make it a component (cmd+alt+K) and reuse instances. Teach it the first time they copy a button, in one line: change the component once, every copy follows. Stop there. Auto layout is worth showing only if lists or cards are central to the screen; variants and prototyping are not today's lesson. ## Share and pressure-test - Share link, "anyone with link can view", sent to one real person who matches the audience, with one question: "what would you click first?" Their answer tests the hierarchy. - Walk the mock together against the original goal: can the visitor do the thing? Fix what fails in the mock, where it is cheap. ## Done - A named Figma file with the screen mocked in real content, at least one reused component, a working share link, and one round of outside feedback acted on - Share permissions checked in a signed-out view; no unintended private files or edit access exposed If the next step is building it, the mock is the spec — carry the exact sizes, hex values, and spacing into the build (build-website if it is a site).