As a frontend engineer adapting to new tools, I’ve been trying out IDEs that promise to improve development workflows. One of the most promising is Figma MCP, which improves how LLMs replicate user interfaces designed in Figma.
I initially struggled to configure MCP to work with Kiro IDE, so I’ve documented the exact steps to make it easier for you.
Step 1: Generate a personal access token in Figma
a. Navigate to Settings in Figma.
b. Select Security from the top tabs.
c. Scroll to Personal Access Tokens and generate a new token.
d. Grant read permissions.
e. Copy the generated token: you won’t be able to after this point.
Step 2: Configure Kiro MCP
a. Open Settings in Kiro.
b. Search for MCP and select either Workspace MCP configuration or User MCP configuration.
c. Paste the following JSON:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=your_figma_api_key",
"--stdio"
],
"disabled": false,
"autoApprove": ["get_figma_data", "download_figma_images"]
}
}
}
d. Replace “your_figma_api_key” with the token you generated in Figma.
e. Save the configuration.
How to Use It
- Open the Figma design you want to work with in Kiro.
- Select a component in the design.
- Right-click, choose Copy link to selection, and paste it into your Kiro chat.
- Address your prompts to that link.
Note: This requires a paid plan on Figma.
Will you be trying Figma MCP on Kiro? Have questions or hit any snags? Let me know in the comments. I’d be glad to help.
Read moe tutorials on my Hashnode blog.
I share frontend engineering insights and practical developer experience tips. Follow along if you’re interested in design-to-code workflows and the future of DevRel.
