creating-figma-make-handoff-prompts

Creating Figma Make Handoff Prompts

Generates a single markdown document the user pastes into Figma Make to produce an engineering-ready handoff file.

Prerequisites (required before generating):

UI specification — flows, screens, states, validation, edge cases, interactions, content
Style guide — typography, color, spacing, elevation, radius, motion, component patterns

If either is missing, ask for it or confirm what to infer. Do not invent flows or tokens not supported by the inputs.

Workflow

Read inputs — UI spec (authoritative for behavior/content) and style guide (authoritative for visual system).
Extract inventory — flows, screens/steps, component categories, state variants, edge cases, breakpoints, interaction timings, layout patterns.
Choose scope — include only what the spec requires: desktop, mobile, tablet, responsive doc, interaction specs, developer handoff pages.
Draft the prompt — follow prompt-template.md. Adapt sections to the project; omit empty sections.
Deliver — output the full prompt inside one fenced markdown code block so the user can copy it in one action. Do not split across multiple blocks.

UI spec is source of truth — state this in the prompt header. Do not reinterpret, simplify, or redesign flows.
Style guide is visual source of truth — reference it in the Design System page; do not substitute a different aesthetic unless the user asks.
Be exhaustive for the spec — every screen, state, and edge case in the UI spec should appear in the prompt.
Be specific — name frames, components, variants, and states concretely (derived from the spec, not generic placeholders).
Production handoff intent — auto layout, named layers, component variants, developer annotations, responsive behavior.
Aesthetic direction (optional) — if the user or spec mentions product references (e.g. Linear, Stripe), include them as inspiration while still following the spec and style guide.

Use this page order unless the project does not need a section:

Page	Purpose
01 — Cover	Title, overview, principles, flow map
02 — Design System Reference	Tokens and usage from style guide
03 — Components	Variant library grouped by category
04+ — Flows	Desktop, mobile, or feature-specific screen pages
Responsive Behavior	Breakpoints and layout shifts (when applicable)
Interaction Specs	Prototype flows and timing (when applicable)
Developer Handoff	Layout specs, component mapping, state docs

Full section skeleton and placeholders: prompt-template.md.

For each component category from the spec:

List components and required states/variants (default, hover, focus, error, loading, etc.).
Use hierarchical naming: Category/Component/State (e.g. Input/Text/Error, Button/Primary/Hover).

For each screen or step:

Include when the UI spec or user requires it:

Mobile flow page — one step per screen, safe areas, sticky actions, keyboard/error states; name target frames (e.g. iPhone, Android) if specified.
Responsive behavior page — breakpoints, stacking, collapse rules for previews/cards/bento layouts.

Skip these pages when the spec is desktop-only.

End every prompt with a deliverable section confirming:

See example-output.md for a full registration-wizard example. Match its depth and specificity, adapted to each project.

Return to the user:

One-sentence summary of what the prompt covers.
Note any gaps (missing spec detail you had to flag as TBD).
The complete prompt in a single ```markdown fence — ready to copy into Figma Make.

Do not write to Figma directly; this skill only produces the prompt markdown.