Figma MCP Workflow

Use native Figma MCP for v1 generation and edits.

Creation Flow

Confirm screen_blueprints.json is current and validated.
Load figma-use before any use_figma call.
If building full screens, load figma-generate-design as workflow guidance.
Inspect the Figma file first: pages, sections, existing frames, components, variables, styles.
Search/import existing design-system components and variables before creating primitives.
Create role/application pages when multiflow rules require them.
Create one Figma Section per concrete screen, named after the screen.
Inside each Section, create product screen frames, state frames, element frames, and optional Notes / Annotations frames.
Keep notes/annotations outside product screen frames.
Return all created, mutated, and annotation node IDs from every write.
Validate each screen with metadata and screenshots.
Update figma_build_manifest.json and figma_validation.md.

Read figma_build_manifest.json and identify target screen_id.
Inspect current node hierarchy before mutating.
Modify only affected sections or components.
Preserve node IDs whenever possible.
Re-screenshot changed screens and append validation notes.
If a requested note/comment change does not affect final product UI, mutate only the notes/annotations frame.

All text is readable and not clipped.
Sections do not overlap.
Auto-layout is used for screen structure and repeated groups.
Every concrete screen has its own Figma Section containing the main screen, states, and related elements.
Product screen frames contain only final-product UI, not blueprint metadata, comments, citations, requirement chips, or UX rules.
Notes/annotations sit in the same Section but outside the product screen frame.
Screen frames are 1440 wide and at least 800 high.
Element frames fit the real bounds they occupy within the parent screen.
Coordinates, dimensions, and spacing are whole numbers and multiples of 4, with 8px rhythm preferred.
Multiflow pages contain complete role/application screen sets, including shared screens.
Empty, loading, and error states are represented when the blueprint requires them.
The manifest lists every created or mutated node ID.