Skip to content
← all systems

@mikulgohil/figma-mcp-server

MCP server for Figma design extraction - tokens and layout data straight into the agent loop.

published on npm · design-to-code bridge

role
Author and maintainer
stack
TypeScript · MCP SDK · Figma REST API
status
npm

@mikulgohil/figma-mcp-server is an MCP server for Figma design extraction, built before Figma shipped its own official MCP server. It exposes design tokens and layout structure as typed MCP tools, turning design handoff from screenshots-and-guesswork into structured data the agent loop can consume. It pairs with a Figma-to-code pipeline backed by validation gates and an automated test suite.

// 01 - PROBLEM

Design handoff to AI agents meant screenshots and guesswork. This server exposes Figma design tokens and structure as MCP tools, built before Figma shipped its official MCP server.

// 02 - APPROACH

  • Design-token and layout extraction exposed as typed MCP tools.
  • Pairs with the Figma-to-Code pipeline: 4 validation gates, 220+ automated tests.

// 03 - ARCHITECTURE

▸ typed MCP tools · design-to-code

  1. Figma file

    The design source

  2. MCP tools

    Typed design-extraction tools

  3. Tokens + structure

    Design tokens and layout data

  4. Agent codegen

    The agent generates code from real design data

Ship before the official server existed
Built when no first-party option existed; the team could do design-to-code with agents months earlier.

// 04 - PRODUCTION-GRADE

  • Published and versioned on npm
  • Feeds a validation pipeline with 220+ automated tests

// 05 - ARTIFACTS