MCP server for converting Figma designs to React Native components
Figma mcp toolkit mcp server connects Figma MCP Toolkit to AI assistants that speak the Model Context Protocol. MCP server for converting Figma designs to React Native components.
Convert Figma designs to React Native components using Cursor's MCP. This tool extracts components from your Figma designs and generates corresponding React Native components with proper typing and styling.
The server is distributed via npm as @smithery/cli, so most clients can run it without a manual build step. Add it to your MCP client's configuration and restart the client to pick it up — the copy-paste configs for Claude Desktop, Claude Code and Cursor are on this page.
Before the server will start you need to supply 5 environment variables: FIGMA_TOKEN, FIGMA_FILE, PROJECT_DIR, YOUR_FIGMA_TOKEN, YOUR_FIGMA_FILE_ID. Keep credentials in your client's env block or a secrets manager rather than committing them.
Developer-tool servers are usually the first ones people connect, because they turn "help me with this code" into an assistant that can actually read the repo and act on it. Figma MCP Toolkit sits in that group. Worth comparing against the other developer tools servers in this directory before you commit to one, since several overlap in scope but differ sharply in setup cost and permissions.
{
"mcpServers": {
"figma-to-code": {
"command": "node",
"args": ["PATH_TO_REPO/build/index.js"],
"env": {
"FIGMA_TOKEN": "your_figma_token",
"FIGMA_FILE": "your_figma_file_id",
"PROJECT_DIR": "your_project_directory"
}
}
}
}Configuration as documented by the project. Restart the client after saving.
| Variable | Description | Required |
|---|---|---|
| FIGMA_TOKEN | Credential the server authenticates with. | Yes |
| FIGMA_FILE | Configuration value read at startup. | Optional |
| PROJECT_DIR | Filesystem location the server is allowed to use. | Optional |
| YOUR_FIGMA_TOKEN | Credential the server authenticates with. | Yes |
| YOUR_FIGMA_FILE_ID | Configuration value read at startup. | Optional |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.