contextgo Figma Screen Generate
Use this skill when the workspace already has the structural definition of a page or screen in code and that structure should land in Figma as a frame or screen draft.
Use when
- a page or screen exists in code and the team wants the equivalent Figma frame
- a redesign is being explored and the current code-side structure is the starting point
- a Figma frame should mirror the production layout for QA or design review
Do not use when
- the target Figma file does not exist yet — use
figma-file-bootstrapfirst - the goal is library updates or component variants — use
figma-library-sync - the request is absorption only — fall back to
design-director
Preconditions
- target Figma file key is known and write permission is granted
- the originating code path is identified
- Figma MCP self-check passes
Workflow
- Inspect the source code path: layout structure, components used, tokens referenced
- Choose the destination file key and parent frame
- Map the structural layout to Figma frames using existing components and tokens
- Surface mapping gaps, for example a code component that has no Figma equivalent
- Create the frame draft via Figma MCP
- Record file key, new node ids, originating code path, and any structural compromises in the closed-loop ledger
- Return: the destination URL, new node ids, and a list of items the design team should review
Output Expectations
- new node ids for every frame created
- mapping notes that explain any structural compromise
- closed-loop ledger entry per write
Use together with
figma-design-system-rules-syncfigma-library-syncfigma-implementation-handoff