Figma to React MCP
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| LOG_LEVEL | No | Logging level (debug, info, warn, error) | info |
| GITHUB_TOKEN | Yes | GitHub Personal Access Token with repo permissions | |
| FIGMA_ACCESS_TOKEN | Yes | Figma Access Token from your account settings | |
| PLAYWRIGHT_BROWSER | No | Browser to use (chromium, firefox, webkit) | chromium |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| design_to_codeB | Convert Figma design to React component and create GitHub PR. Accepts Figma URLs or file IDs. |
| test_design_implementationB | Test generated component against Figma design with visual regression testing. |
| create_design_prC | Create GitHub PR with generated component and test results. |
| analyze_figma_designB | Analyze Figma design and extract design tokens, components, and structure. |
| setup_project_branchB | Create a new GitHub branch for feature development. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 5 tools
analyze_figma_design and test_design_implementation are distinct, but design_to_code and create_design_pr both create GitHub PRs, making it unclear which one should be called and when. setup_project_branch also overlaps with the PR-creation flow, so the boundaries between these tools are confusing.
Most tools follow a clear verb_noun pattern (analyze_figma_design, setup_project_branch, create_design_pr, test_design_implementation), but design_to_code breaks the pattern by using a noun_to_noun style. This is a minor deviation in an otherwise consistent naming scheme.
Five tools is well-scoped for a Figma-to-React conversion pipeline covering analysis, branch setup, generation, testing, and PR creation. There are no redundant filler tools beyond the overlapping PR responsibilities.
The core pipeline of analyze, generate, test, and create PR is present, but the workflow is muddled because design_to_code already creates a PR and create_design_pr creates another PR with test results. There is also no clear tool for updating or fixing a generated implementation after visual regression testing fails.