mcpField
F
figma-design-to-code-bridge

figma-design-to-code-bridge

github.com/sergekostenchukDesign & UI3253 installsUpdated 18w ago
Repository

About figma-design-to-code-bridge

figma-design-to-code-bridge maps Figma design intent to an existing codebase for implementation planning and review. It covers component and token mapping, Code Connect preparation, and routing work to the appropriate implementation skill.

Key features

  1. 01Create implementation handoff plans
  2. 02Map Figma components to code
  3. 03Prepare or review Code Connect
  4. 04Identify design and code gaps
  5. 05Route work to implementation skills

Use cases

  1. 01Planning a build from a Figma frame
  2. 02Matching design variants to local components
  3. 03Reviewing Code Connect work
  4. 04Finding differences between design and code

MCP support

For Code Connect-specific work, the skill invokes the installed figma:figma-code-connect skill. It can work from context supplied by figma-context-reader.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-design-to-code-bridge

After installing, type/figma-design-to-code-bridgein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
design-to-code-handoff.md
evals/
evals.json

Details

From the project README

Figma Design To Code Bridge

Use this skill after figma-context-reader when the goal is implementation. The output is not "code by screenshot"; it is a mapping from design intent, tokens, and components to the existing codebase.

Modes

  • handoff-plan: create a build/refactor plan from a Figma frame.
  • component-map: map Figma components/variants to existing code components.
  • code-connect: prepare or review Figma Code Connect work.
  • gap-report: identify where the design and code system diverge.
  • implementation-route: hand off to webapp-ui-skill or marketing-site-skill.

Workflow

  1. Get Figma context through figma-context-reader or a provided context brief.
  2. Inspect the local codebase before recommending component choices.
  3. If Code Connect is requested, invoke the installed figma:figma-code-connect skill before Code Connect-specific work.
  4. Map tokens, components, variants, states, and responsive constraints to local implementation primitives.
  5. Route dense product/app work to webapp-ui-skill; route public landing/product pages to marketing-site-skill.
  6. Require local visual verification after implementation. Figma match alone is not validation.

Output Shape

Use assets/design-to-code-handoff.md.

Decision Rules

  • Prefer existing project components and design tokens over generating one-off CSS.
  • Preserve UX intent when exact visual parity conflicts with accessibility, responsiveness, or codebase conventions.
  • Treat Figma-generated code or MCP-generated code as a draft until reviewed against local architecture.
  • If the Figma file lacks states, include loading, empty, error, disabled, focus, hover, and mobile states in the implementation plan.

Safety And Privacy

  • Treat non-public Figma files, screenshots, variables, component names, and source code as sensitive.
  • Do not send private code or Figma context to external tools without explicit approval and a data-transfer note.
  • Do not overwrite local components simply to match a Figma frame; propose a scoped implementation plan first.

Validation And Eval

  • Verify that the handoff includes both Figma-to-code component mapping and local validation steps.
  • For implemented work, require browser or screenshot evidence from the local app.
  • Use evals/evals.json to test app-frame routing, marketing-page routing, and Code Connect gap behavior.

Resources

  • Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md when current Figma tools matter.

Comments

Markdown supported