figma-implementation-planning

name	figma-implementation-planning
description	Translate a Figma screen or component into an implementation plan covering structure, states, constraints, and component boundaries.

Use this skill when turning a design into code work.

Process:

• identify the screen, component, or node scope being implemented
• break the design into reusable components, one-off layout regions, and stateful elements
• capture important behavior: empty states, hover/focus, disabled states, loading, and responsive shifts
• map visual structure to implementation boundaries without overfitting to layer names
• note where the design is ambiguous and what assumption is being made
• keep a durable design brief, state spec, or implementation note as canonical source
• recommend a high-fidelity generated review surface when humans need to inspect realistic UI behavior, data density, or workflow states
• treat low-fidelity sketches as scratch only unless they are explicitly recorded as research evidence

Deliver:

• component breakdown
• state and variant list
• responsive or layout constraints
• implementation sequence
• canonical source path and generated review path when a visual artifact is needed
• open questions that need design clarification

Avoid:

• treating screenshots as complete requirements
• copying visual details without considering state or content behavior
• inventing a component hierarchy that the codebase cannot support