Figma

The w3-kit Figma integration bridges design and code. Use Code Connect mappings to link Figma components to their codebase counterparts, and keep design tokens in sync between both environments.

Code Connect

Code Connect creates mappings between Figma components and their code implementations. When a developer inspects a component in Figma, they see the exact import path and usage code.

Design Tokens

Design tokens (colors, spacing, typography, border radii) are synced between Figma variables and the CSS custom properties used in code. When a designer updates a token in Figma, the corresponding CSS variable can be updated to match.

Figma MCP Integration

Use the Figma MCP server alongside the w3-kit MCP server to create a design-to-code workflow. The Figma server reads designs and the w3-kit server provides the component library.

.mcp.json

{
  "mcpServers": {
    "w3-kit": {
      "command": "npx",
      "args": ["@w3-kit/mcp"]
    },
    "figma": {
      "command": "npx",
      "args": ["@anthropic/figma-mcp"]
    }
  }
}

Workflow

1Designer creates or updates components in Figma using the w3-kit design kit
2Code Connect mappings link each Figma component to its code implementation
3Developer inspects the component in Figma and sees the exact import and props
4AI tools (via MCP) can read the Figma design and generate matching w3-kit code
5Design tokens stay in sync between Figma variables and CSS custom properties