F2C Figma to Code MCP Server

### 1. Basic Configuration This is a minimal, usable configuration that just wires up the MCP server with the default command and a single Figma token. ```json { "mcpServers": { "f2c-figma-to-code": { "command": "f2c-figma-to-code-mcp", "category": "DevTools", "env": { "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE" } } } } ``` **Explanation (not part of JSON):** - `mcpServers`: Top-level key used by Claude to discover MCP servers. - `"f2c-figma-to-code"`: The ID you’ll use to recognize this server inside Claude Code. - `command`: The executable for the F2C Figma to Code MCP Server, as it would be in your PATH (adjust if installed elsewhere, e.g. `/usr/local/bin/f2c-figma-to-code-mcp`). - `category`: Shown in Claude’s UI to group tools; `DevTools` matches your MCP’s category. - `env.FIGMA_PERSONAL_ACCESS_TOKEN`: Required so the server can talk to the Figma API. Replace with your actual Figma personal access token. --- ### 2. Advanced Configuration This configuration adds explicit arguments, multiple environment variables, and a timeout to better control behavior and performance. ```json { "mcpServers": { "f2c-figma-to-code": { "command": "/usr/local/bin/f2c-figma-to-code-mcp", "args": [ "--log-level", "debug", "--port", "0", "--max-nodes", "5000" ], "category": "DevTools", "env": { "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE", "F2C_OUTPUT_LANGUAGES": "react,css", "F2C_DEFAULT_FRAME_NAME": "App", "F2C_ENABLE_CACHING": "true", "F2C_CACHE_TTL_SECONDS": "300", "F2C_STRICT_MODE": "false" }, "timeout": 120000 } } } ``` **Explanation (not part of JSON):** - `command`: Absolute path to the MCP server binary for reliability. - `args`: - `--log-level debug`: More verbose logs for troubleshooting. - `--port 0`: Let the server choose a free port dynamically (typical for MCP servers). - `--max-nodes 5000`: Example of a resource limit to prevent huge Figma files from overwhelming the tool. - `env`: - `FIGMA_PERSONAL_ACCESS_TOKEN`: Your Figma API token. - `F2C_OUTPUT_LANGUAGES`: Example option to prefer React + CSS output. - `F2C_DEFAULT_FRAME_NAME`: Frame name to target when not explicitly specified in a request. - `F2C_ENABLE_CACHING`: Enables caching of Figma file responses. - `F2C_CACHE_TTL_SECONDS`: How long (in seconds) to keep cached data. - `F2C_STRICT_MODE`: Example toggle to enforce stricter validation of Figma structure. - `timeout`: 120000 ms (120 seconds) max per request, useful for large files. --- ### 3. Use Case Specific Configuration – Production Design System Integration This configuration is tailored for a production setup where you: - Use a dedicated Figma token scoped to a specific team/project - Generate code aligned to a design system (e.g., React + Tailwind) - Restrict access to only certain Figma files and frames ```json { "mcpServers": { "f2c-figma-to-code-prod": { "command": "/opt/mcp/f2c-figma-to-code-mcp", "args": [ "--log-level", "info", "--port", "0", "--max-nodes", "8000", "--read-only" ], "category": "DevTools", "env": { "FIGMA_PERSONAL_ACCESS_TOKEN": "FIGMA_TOKEN_FOR_PROD_PROJECT", "F2C_ALLOWED_FILE_KEYS": "AbCdEf1234567890,ZYXW9876543210", "F2C_DEFAULT_FILE_KEY": "AbCdEf1234567890", "F2C_DEFAULT_FRAME_NAME": "Design System / Components", "F2C_OUTPUT_LANGUAGES": "react,tailwind", "F2C_COMPONENT_PREFIX": "Ds", "F2C_STRICT_MODE": "true", "F2C_ENABLE_CACHING": "true", "F2C_CACHE_TTL_SECONDS": "900", "F2C_DISABLE_EXPERIMENTAL_FEATURES": "true" }, "timeout": 180000 } } } ``` **Explanation (not part of JSON):** - Server ID: `"f2c-figma-to-code-prod"` distinguishes this from a dev/test instance. - `command`: Points to a stable, managed install location (e.g., in CI or a shared dev environment). - `args`: - `--log-level info`: Quieter logs, better for production. - `--max-nodes 8000`: Larger cap to handle complex design system files. - `--read-only`: Example flag to ensure no mutating operations (if supported by the server). - `env`: - `FIGMA_PERSONAL_ACCESS_TOKEN`: Token with limited, production-scoped access. - `F2C_ALLOWED_FILE_KEYS`: Whitelist of Figma file keys that this MCP is allowed to read, preventing accidental use on unrelated designs. - `F2C_DEFAULT_FILE_KEY`: The primary production design system file. - `F2C_DEFAULT_FRAME_NAME`: Default frame that contains core components. - `F2C_OUTPUT_LANGUAGES`: Tailors output to your stack (React + Tailwind). - `F2C_COMPONENT_PREFIX`: Ensures generated components follow a naming convention (e.g., `DsButton`, `DsCard`). - `F2C_STRICT_MODE`: Enforces stricter assumptions (e.g., all components must map cleanly to the design system). - `F2C_ENABLE_CACHING` / `F2C_CACHE_TTL_SECONDS`: Longer cache for production design system (15 minutes). - `F2C_DISABLE_EXPERIMENTAL_FEATURES`: Keeps behavior stable and predictable in production. - `timeout`: 180000 ms (3 minutes) to allow for large, complex files.