figma-bridge-component-library

Build Figma Components from Code

Create reusable Figma contracts that stay connected to the codebase. A visual look-alike without tokens, variants, properties, and durable identity is not a finished component.

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.

Lock the component contract

1. Run a component decomposition pass before naming the Figma deliverables. Walk the rendered subtree and the code imports from leaves to root. Classify repeated controls, icons, avatars, badges, list rows and card shells as primitives or nested components instead of flattening them into a composite. For every meaningful descendant ask: is it fixed decoration, editable text, optional content, a replaceable component, a state/size/tone axis, or a structurally flexible region? Map those answers respectively to a fixed layer, TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT or SLOT. Record why a candidate remains fixed. A polished top-level shell with inert descendants is not a complete component. Keep the code's CSS animations in the captured DOM: render --dom-capture writes them as native Motion tracks on the Component's layers, so the Component carries its motion instead of a static pose. Check the render result's Motion: line and figma_run ["motion","inspect","<layerId>"].
2. Inspect the code component, prop types and defaults, CSS or token sources, assets, states, responsive behavior, Storybook stories, and tests.
3. Inspect the target Figma file's pages, variables, styles, components, variant naming, and figma-bridge.json links. Call figma_reference with name: "components" once; add name: "workflow:code-to-figma" when a screen or code-render workflow is also in scope.
4. Produce a concise gap map: what exists only in code, only in Figma, and on both sides with a conflict. Resolve real conflicts before mutation.
5. Define the component contract across all five native property types: TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT and SLOT. Record scalar definition-to-layer bindings, nested Instance exposure, Slot limits and preferred values, interaction states, token bindings, assets, and the Design Entity id. Cap a Cartesian variant matrix at 30; split the component when the contract would explode beyond that.