Design-to-Code Integration Suite
Everything you need to integrate Figma with Devin AI for seamless design-to-code workflows. Includes step-by-step setup, 1-click copyable MCP configuration JSON, real-world troubleshooting solutions, rate limits breakdown, and an instant downloadable Devin Skill file.
Self-contained instructions for Devin AI & agentic coding assistants
Target: .devin/skills/figma-mcp-setup/SKILL.mdUse this prompt to kick off automatic installation in Devin Desktop
Click items to track your installation progress. State is automatically saved in your browser.
node-id ready~/.config/devin/~/.config/devin/mcp_config.json with Figma serverUrlmcp_call_tool whoami and confirmed correct user emailget_design_contextDirect connection to official Figma MCP server endpoint.
Effortless extraction of design specs, tokens, and node hierarchies.
Tested solutions for OAuth cache, token expiry, and permissions.
Ready to drop into any Devin project .devin/skills/ directory.
Follow these 9 verified steps to set up Figma MCP in Devin Desktop
Check if Devin Desktop is running and inspect your CLI environment.
# Check if Devin Desktop process is active
ps aux | grep -i devin
# Check Claude Code CLI version (for reference)
claude --versionDevin Desktop looks for MCP definitions in ~/.config/devin/.
mkdir -p ~/.config/devinWrite the official Figma MCP server endpoint into mcp_config.json.
cat > ~/.config/devin/mcp_config.json << 'EOF'
{
"mcpServers": {
"figma": {
"serverUrl": "https://mcp.figma.com/mcp"
}
}
}
EOFDevin Desktop: ~/.config/devin/mcp_config.json | Claude CLI: ~/.claude.json | Windsurf: ~/.codeium/mcp_config.json
In Devin Desktop, go to Settings → Tools → Manage MCPs and click the Refresh (🔄) button, or restart the application completely to load the new config file.
Perform OAuth authentication via the Devin Desktop UI:
Verify that the MCP tool is authenticated with the expected email address.
mcp_call_tool whoamiRun diagnostic checks to ensure there are no firewall or DNS issues.
# Test basic HTTP connectivity (Expected: HTTP/2 405)
curl -I https://mcp.figma.com/mcp
# Test HTTPS Port 443
nc -zv mcp.figma.com 443
# Test Latency & DNS
ping -c 3 mcp.figma.com
nslookup mcp.figma.comPass the fileKey and nodeId extracted from your Figma URL:
# 1. Load design-to-code guidance
mcp_read_resource skill://figma/figma-design-to-code/SKILL.md
# 2. Extract design context (Pass your fileKey and nodeId)
mcp_call_tool get_design_context \
--fileKey="pDZFdbWxAOYiVlWDLj8UPB" \
--nodeId="87-151" \
--skillNames="resource:figma-design-to-code"Customize parameters or copy the verified JSON config with one click
{
"mcpServers": {
"figma": {
"serverUrl": "https://mcp.figma.com/mcp"
}
}
}Limits apply per user seat on the Figma MCP Server
| Plan Tier | Full / Dev Seat | View / Collab Seat |
|---|---|---|
| Starter (Free) | 200 / day (10/min) | 20 / month |
| Professional | 200 / day (15/min) | 6 / month |
| Organization | 200 / day (20/min) | 6 / month |
| Enterprise | 600 / day (20/min) | 6 / month |
add_code_connect_map, create_new_file, and whoami do NOT consume rate quota.
Drop this skill file into your project to make Devin autonomously execute Figma setup
figma-mcp-setup
.devin/skills/figma-mcp-setup/SKILL.md
Autonomous / Model Invoked
~10.1 KB (349 lines)
---
name: figma-mcp-setup
description: "Complete guide for installing and configuring Figma MCP Server in Devin Desktop. Covers environment checks, installation, authentication troubleshooting, and common issues based on real-world setup experience. Use this when user wants to integrate Figma with Devin AI for design-to-code workflows."
disable-model-invocation: false
---
# Figma MCP Server Setup Guide
Complete installation and configuration guide for Figma MCP Server in Devin Desktop, based on real-world troubleshooting experience.
## When to Use This Skill
Use this skill when the user wants to:
- Install Figma MCP Server for design-to-code workflows
- Integrate Figma with Devin AI
- Read Figma designs and convert them to code
- Troubleshoot Figma MCP connection issues
- Switch between different Figma accounts
... (Click Download SKILL.md or Copy Skill Code above for the full 349 lines) ...Real problems encountered during setup and their exact, battle-tested solutions
MCP server appears in list with yellow "! Needs authentication" badge. Cannot call Figma tools.
~/.config/devin/mcp_config.json.mcp_call_tool whoami shows a different account than expected (e.g. work email instead of personal) or permission denied on personal design files.
figma.com cookies from your browser history.mcp_call_tool whoami.Clicking "Authenticate" immediately logs in without prompting for credentials because of active browser tokens.
Open an Incognito/Private browser window or set up a dedicated browser profile for MCP OAuth authentication.
Figma server does not appear in Devin Desktop Manage MCPs list after editing config.
Confirm the path is ~/.config/devin/mcp_config.json (NOT ~/.claude.json or ~/.codeium/mcp_config.json) and restart Devin Desktop.
"You don't have edit access to this file" or empty design context returned.
Make sure the Figma URL format includes the node-id: https://www.figma.com/design/{FILE_KEY}/{NAME}?node-id={NODE_ID}.
Run this command to test all network layers in one go:
curl -I https://mcp.figma.com/mcp && nc -zv mcp.figma.com 443Download any resource or copy configuration JSON with a single click
The complete portable skill file for Devin AI, ready to be placed in .devin/skills/figma-mcp-setup/SKILL.md.
Ready-to-use JSON configuration file formatted for Devin Desktop at ~/.config/devin/mcp_config.json.
Comprehensive setup guide & troubleshooting case study in GitHub Flavored Markdown.
Original standalone HTML documentation with full Indonesian case study transcript.