contextgo Figma Implementation Handoff
Use this skill when the request is to translate a Figma node, frame, or page into a code-side implementation suggestion or a scoped code-change draft.
Use when
- a Figma node represents a finalized design that should land in code
- the design team has asked for an implementation pass on a known frame or page
- a small, scoped code-change draft is needed for review before implementation
Do not use when
- the Figma source still has unresolved divergent tokens (run
figma-drift-auditfirst) - the request is exploratory critique or judgement only — fall back to
design-director - the Figma URL, file key, or node id is missing or invalid
Hard Constraints
- never apply code changes that go beyond the explicitly scoped node or frame
- always validate the Figma URL, file key, and node id before doing anything
- always list every token that the Figma node references but the code side cannot resolve
- always produce a reviewable handoff record before applying any code change
Preconditions
- Figma MCP self-check passes
- the user provides a Figma URL, file key, or node id
- the target code path is identifiable
Workflow
- Validate the Figma URL, file key, and node id
- Fetch the structural and token information through Figma MCP
- Map the design intent to existing code patterns and components
- Surface every assumption, missing token, and missing component
- Produce either an implementation suggestion (text plan) or a scoped code-change draft (diff or patch)
- Record file key, node id, code path, suggested change scope, and reviewer in the closed-loop ledger
- Return: the handoff record plus the next step (apply, escalate, or hold for design review)
Output Expectations
- explicit assumptions and missing-token list
- scoped code-change draft or implementation suggestion
- closed-loop ledger entry for the handoff
- clear next step (apply, escalate, hold)
Use together with
figma-drift-auditfigma-library-sync