seemseam Figma To Code
Use this skill when Figma context is available through a host or MCP tool and the user wants implementation or review against that design source.
Workflow
- Identify the selected frame or design surface through the host-provided Figma context.
- Extract design intent: layout, hierarchy, tokens, components, variants, spacing, responsive behavior, and states.
- Map Figma components to project-local components or Storybook components.
- Surface conflicts between Figma, code tokens, Storybook docs, and existing UI.
- Implement or review using local code patterns and verify with browser evidence where feasible.
Output
Return:
- Figma-to-code mapping
- component and token matches
- conflicts or missing assets
- implementation plan or changed files
- verification notes
Do not store Figma file ids, access tokens, selected-frame data, screenshots, or exported assets in Role source.