figma-bridge-design-to-code

Implement Figma as Code

Treat the Figma node as the visual contract and the target repository as the engineering contract. Match both: preserve the design exactly without replacing the project's framework, styling system, components, or conventions.

Pin the Figma Bridge transport

• Use the tools from the server bundled with this skill: namespace figma-bridge, server id figma-bridge-mcp. Do not select a similarly named Figma MCP by name alone.
• Start with this server's figma_status. Its result and every later result must identify _mcp: "figma-bridge-mcp".
• A failed probe proves only that Figma Bridge transport is unavailable. It does not prove that Figma or another Figma MCP is unavailable.
• Do not silently switch to another Figma MCP for a write. Name the unavailable transport and ask the user before changing tools or write semantics.

Establish the contracts

1. Inspect the target repository before writing code. Identify its framework, styling approach, reusable components, tokens, asset conventions, scripts, and current working-tree changes.
2. Resolve the exact Figma node and connected file. Ask for a node-specific URL only when neither the URL nor the current selection identifies one.
3. If the repository contains figma-bridge.json or the target exposes a Design Entity, run figma_run ["link","context","<entity.id>"] before implementation. Stop on a reported conflict; never choose code or Figma as the winner implicitly.
4. Call figma_reference with name: "workflow:design-to-code" once and follow the returned workflow. It is the canonical detailed guide for the installed Bridge version.
5. For a web target that emits HTML plus custom CSS, SCSS, CSS Modules, styled-components, or equivalent authored styles, read references/web-css-html.md before implementation. It adapts the bundled Modern CSS & HTML guidance to this fidelity workflow. Do not load it for React Native or other non-web targets.