Are you the author? Sign in to claim
MCP server for converting Figma designs to React components
This is a Model Context Protocol (MCP) server that converts Figma designs to React components. It provides tools for fetching Figma designs and generating React components with TypeScript and Tailwind CSS.
npm install
npm run build
You need to set the FIGMA_API_TOKEN environment variable to your Figma API token. You can get a personal access token from the Figma account settings page.
FIGMA_API_TOKEN=your_token_here npm start
Or with explicit transport:
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse
getFigmaProject: Get a Figma project structuregetFigmaComponentNodes: Get component nodes from a Figma fileextractFigmaComponents: Extract components from a Figma filegetFigmaComponentSets: Get component sets from a Figma filegenerateReactComponent: Generate a React component from a Figma nodegenerateComponentLibrary: Generate multiple React components from Figma componentswriteComponentsToFiles: Write generated components to filesfigmaToReactWorkflow: Complete workflow to convert Figma designs to React componentsfigma.com/file/ in the URL)figmaToReactWorkflow tool with the file key and output directoryFor development, you can use the watch mode:
npm run dev
ISC
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
Browser automation using accessibility snapshots instead of screenshots
Secure MCP server for MySQL database interaction, queries, and schema management
Run analytics queries on ClickHouse — explore schemas, execute SQL, fetch results