extract_componentsLABSCO SUMMARY
The page has to be called Components, and that is the failure most people hit first.
Generation is scoped to one Figma page by name, so a file organised differently produces nothing and the error points at the page rather than the token. Once that lines up, naming a single component means you can regenerate one piece after a design change instead of overwriting the whole folder. GraphQL schema generation is listed as coming, not shipped.
What it is
A Node server that reads a Figma file and generates React Native components from it — typed props and styling included — writing them into a directory you nominate. It is built for use inside Cursor, where you ask for the extraction in the editor.
What you get
extract_componentsreads the components from the Figma file and generates their React Native equivalents- Ask for all components, or name a single one to regenerate just that
- Component hierarchy is preserved, including nested components
- Props and their types are carried across rather than left as untyped objects
- Generated files land in the project directory you configured
Requirements
Three environment variables: FIGMA_TOKEN for a Figma access token, FIGMA_FILE for the file id from the URL, and PROJECT_DIR for where generated components go. The npm package is @kailashg101/mcp-figma-to-code, version 1.0.1; run it from a local build at build/index.js with node, with those three values in the client entry. Your Figma file must contain a page named "Components" — if it does not, extraction fails with a page-not-found error.
Setup effort
Build from source
USE CASES
01
Starting a screen from the design
Extract all components once and get a typed React Native starting point instead of hand-transcribing styles.
02
Picking up one design change
Name the single component that changed and regenerate only it.
03
Keeping generated code where you want it
Point the project directory at your components folder so nothing lands loose in the repository root.
1 tool
Listed in project docs. Your client may show a different list.
BEFORE YOU INSTALL
What to know first
Tools you get
1 tool named in the project's documentation.
Requires
- node on PATH
- FIGMA_TOKEN in your environment
INSTALLATION
Connect your client
MCP Clients
Cursor
CURSOR · TERMINAL
git clone https://github.com/kailashGN/figma-mcp-toolkit.git
cd figma-mcp-toolkit
npm install
npm run buildAdd the server to Cursor's MCP configuration, where <YOUR_PATH_TO_REPO> is the full path of this folder, <YOUR_FIGMA_FILE> the file ID from the Figma URL, and <YOUR_PROJECT_DIR> the directory to write components to
CURSOR · JSON
{
"mcpServers": {
"figma-to-code": {
"command": "node",
"args": [
"<YOUR_PATH_TO_REPO>/build/index.js"
],
"env": {
"FIGMA_TOKEN": "<YOUR_FIGMA_TOKEN>",
"FIGMA_FILE": "<YOUR_FIGMA_FILE>",
"PROJECT_DIR": "<YOUR_PROJECT_DIR>"
}
}
}
}
