A New Path for Qoder and Figma Integration: Automating Design-to-Code with Manual Configuration
In the wave of AI-assisted software development, seamlessly converting design mockups into high-quality frontend code is a key step to boosting efficiency. As a new-generation AI-native IDE, Qoder’s code generation and Agent capabilities have garnered significant attention. However, many developers encounter issues when trying to connect to the industry-standard design tool, Figma, often being unable to use the officially recommended “MCP Marketplace” for one-click integration due to network environments or version limitations.
This article provides a detailed technical guide on how to bypass these limitations by manually configuring a stable integration with Figma in Qoder, thereby establishing an efficient and precise Design-to-Code automated workflow.
Understanding the Value of the Model Context Protocol (MCP)
The Model Context Protocol (MCP) is the core technology for achieving efficient AI integration. It acts as a universal data adapter, allowing the AI model to read and understand the underlying information of external tools in a structured data format, rather than relying on unstructured visual analysis (like screenshot recognition).
When Qoder connects to Figma via MCP, its advantages are twofold:
- Precise Reading of Design Structure: The AI can directly access vector data from the Figma file, including layers, components, and Auto Layout rules. This means the AI no longer “guesses” whether the spacing between elements is 16px or 18px; instead, it retrieves the exact values defined by the designer, ensuring high-fidelity layout reproduction.
- Consuming Design Tokens: Modern design systems widely use design tokens to manage global style variables such as colors, fonts, and corner radiuses. Through MCP, Qoder can directly fetch these tokens and apply them to the generated code, ensuring the output is perfectly consistent with the project’s design specifications and greatly enhancing code maintainability and scalability.
Step 1: Obtain a Figma Personal Access Token
The first task in manual configuration is authentication. We need to generate a Personal Access Token in Figma, which will serve as the credential for Qoder to access the Figma API.
Here are the steps:
- Access Figma Settings: Log in to your Figma account, click on your profile picture in the top-left corner, and select “Settings”.
- Locate Token Generation Area: On the settings page, find the “Personal access tokens” section.
- Generate New Token: Click “Generate new token”, give it a name (e.g., “Qoder-Integration”), and set its permissions. You must check the File content (for reading file content) and Comments (for reading comments, optional but recommended) scopes.
- Copy and Store Securely: After generating the token, a long string of characters will be displayed. Copy it immediately and save it in a secure location. This token is shown only once and cannot be viewed again after closing the window.
Security Warning: A personal access token has full read access to the corresponding scopes within your account. Use it only in your local development environment. Never hard-code it into your source code or commit it to any public repository.
Step 2: Manually Configure the MCP Server for Qoder
After obtaining the token, the next step is to configure a local MCP server in Qoder. This server will use the token we just acquired to communicate with the Figma API.
First, open Qoder’s settings. You can use the shortcut Cmd/Ctrl + , or find the settings option in the menu. In the settings interface, navigate to the MCP tab. If there isn’t a direct input field, you can open the command palette (Cmd/Ctrl + Shift + P) and type MCP: Open User Configuration to directly open the settings.json configuration file.
Depending on your operating system, copy the corresponding JSON snippet below into your configuration file, and replace YOUR_TOKEN_HERE with the Figma Personal Access Token you obtained in Step 1.
Configuration for macOS / Linux Users
{
“mcpServers”: {
“figma-developer-mcp”: {
“command”: “npx”,
“args”: [“-y”, “figma-developer-mcp”, “–stdio”],
“env”: {
“FIGMA_API_KEY”: “YOUR_TOKEN_HERE”
}
}
}
}
Configuration for Windows Users
On Windows, calling npx directly might lead to path or execution issues, so it’s necessary to wrap it with cmd.
{
“mcpServers”: {
“figma-developer-mcp”: {
“command”: “cmd”,
“args”: [“/c”, “npx”, “-y”, “figma-developer-mcp”, “–stdio”],
“env”: {
“FIGMA_API_KEY”: “YOUR_TOKEN_HERE”
}
}
}
}
Step 3: Environment Verification and Activation
After completing the configuration, perform the following checks to ensure the integration runs smoothly:
- Node.js Environment: The configuration above relies on the
npx command, which is the Node.js package runner. Make sure Node.js is installed on your system. You can check this by running npx -v in your terminal or command line. If it returns a version number, your environment is set up correctly.
- Restart Qoder: After saving the
settings.json file, you must completely close and restart the Qoder application. Upon restarting, Qoder will load the new MCP server configuration, and there will typically be a status indicator or icon in its UI to show that the Figma service is connected.
Once successfully configured, you can reference a Figma file in Qoder’s Agent dialog box using @figma or a similar command. For example, by entering the prompt: “Please refer to this Figma file [paste your Figma file link] and generate a responsive login page for me,” Qoder’s AI Agent will use MCP to fetch precise design data to execute the task and generate high-quality frontend code.
