mockup-in-figma

# 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).