{"slug": "invite-an-ai-to-look-upon-your-figma-designs", "title": "Invite an AI to Look Upon Your Figma Designs", "summary": "A developer has released Figma MCP Server, a local server that lets AI assistants like Claude, GPT, and Gemini review Figma designs and leave comments directly on the canvas. The tool integrates with clients such as GitHub Copilot in VS Code, Claude Desktop, and Cursor, and keeps the user's Figma token local. It supports full Figma REST API coverage and can be configured via MCP settings.", "body_md": "Who will look upon your work before the world does? Let it be an AI, quietly, inside Figma, reading each frame and pinning its honest thoughts to the very place they belong.\n\nLet Claude, GPT, Gemini, or any AI model wander through your designs, offer its quiet counsel, and leave its thoughts pinned upon the Figma canvas.\n\n**A gentle word before you begin.** This hands an AI model real power over your Figma files. It may leave comments upon the canvas, and take them away again. So begin where nothing is precious, on a blank, new, or draft file, where a mistake carries no sorrow. Try a few reviews, watch how the assistant speaks, and learn the prompts that answer you kindly. When trust has grown between you, carry it to the files that matter.\n\nThe purely local [Figma MCP Server](https://github.com/planetabhi/figma-mcp-server) with full Figma REST API coverage opens a door through which any AI assistant that speaks MCP may come and look upon your designs. It keeps company with clients such as GitHub Copilot in VS Code, Claude Desktop, and Cursor, and with models such as Claude, GPT, and Gemini. The assistant reads your work, offers its honest reflection, and pins its comments to the canvas. And because it runs upon your own machine, your Figma token never wanders from your hands.\n\nSpeak to your assistant in plain, unhurried language, and it can:\n\nThree small things must be gathered first:\n\nWith these three in hand, the path ahead is short.\n\nPoint your client toward the server but once, and offer it your token. Most clients will keep it safe in your system's secret storage, never lying bare in a plain file.\n\n`.vscode`\n\n, and inside that a file named `mcp.json`\n\n.`mcp.json`\n\nand save:\n\n```\n{\n  \"inputs\": [\n    {\n      \"type\": \"promptString\",\n      \"id\": \"figma-api-key\",\n      \"description\": \"Figma API Key\",\n      \"password\": true\n    }\n  ],\n  \"servers\": {\n    \"figma\": {\n      \"command\": \"bunx\",\n      \"args\": [\"figma-mcp-server\"],\n      \"env\": {\n        \"FIGMA_API_KEY\": \"${input:figma-api-key}\"\n      }\n    }\n  }\n}\n```\n\n`Cmd+Shift+P`\n\non Mac, `Ctrl+Shift+P`\n\non Windows) and run `figma`\n\n, then Add the same server to your client's MCP config:\n\n```\n{\n  \"mcpServers\": {\n    \"figma\": {\n      \"command\": \"bunx\",\n      \"args\": [\"figma-mcp-server\"],\n      \"env\": {\n        \"FIGMA_API_KEY\": \"your_figma_api_key_here\"\n      }\n    }\n  }\n}\n```\n\nThis block keeps the token in plain sight, so keep this file away from version control. Restart the client, then see that the Figma server has joined you in its MCP settings. Seek the mode that lets the assistant reach for outside tools; each client calls it by a different name, be it agent, tools, or MCP.\n\nOnce the bond is made, the server brings forth the Figma tools. In VS Code, the Output console shows the connection alive and names the tools it may use, such as reading frames and leaving comments:\n\n```\n[info] Connection state: Starting\n[info] Connection state: Running\n[info] Discovered Figma tools\n```\n\nTo point the assistant at a single frame is swifter and more sure than to hand it the whole file. It attends to what you care for, rather than wandering through everything.\n\nIn Figma, right-click the frame and choose **Copy/Paste as → Copy link to selection**. You get a URL like this:\n\n```\nfigma.com/design/AbCdEf123456/Project?node-id=42-1337\n                 ^^^^^^^^^^^^                 ^^^^^^^\n                 file key                     frame\n```\n\nPaste that link into your prompt just as it is. The file key tells the assistant which file to enter, and the node-id which frame to seek. To review several frames, offer a link for each, or point the assistant at a whole page and ask it to consider every top-level frame upon it.\n\n**A word on cost and limits.** Every review spends model tokens, and the Figma API sets a limit on how often you may ask within a span of time. To review whole files, or many frames at once, wears through both the sooner. Begin with a few frames, and should you meet a limit, wait a little while and ask for less.\n\nFirst, give the assistant its bearings. Tell it the purpose of the screen, the device it is made for, and the people who will meet it. A frame seen alone, without its story, will be faulted for what was meant all along, its states, its breakpoints.\n\nOpen your AI client and let it reach for tools or act as an agent, so it may call upon the Figma tools. In VS Code, open Copilot Chat and turn it to Agent mode. Then paste the frame link and tell it what to look for:\n\n```\nReview this frame: https://www.figma.com/design/AbCdEf123456/Project?node-id=42-1337. Check spacing consistency, color contrast, and visual hierarchy. List the top issues before posting anything.\n```\n\nThe assistant enters the frame, considers it, and returns a gathered list. It will name the very components and layers, not merely \"the blue button somewhere.\"\n\nShould it say it cannot reach the frame, look again at the token scopes from Step 1, and be sure the link leads to a frame you yourself may open.\n\nWhen the notes sit right with you, send them home to Figma:\n\n```\nPost each issue as a comment, pinned to the frame it's about. Suffix every comment with \"(Added by Claude)\" so we know which model left it.\n```\n\nAsk the assistant to sign what it leaves (say, \"Added by Claude\" or \"Added by Gemini\"). This matters most when many hands, or many models, tend the same file: every word stays known by its author. Choose a prefix or a suffix, and hold to it.\n\nThe comments settle where the trouble lies. Your companions open Figma and find the review pinned upon the work itself, marked with the name of whoever wrote it.\n\nThe assistant looks upon a rendered image and the data of the layers. It cannot feel motion, nor follow a prototype's flow, nor know the touch of real use; and it does not stand in place of testing with people, or of true research.\n\nSet it up but once, and a design review becomes a single sentence spoken to your assistant. The reviews keep their steady voice across many designers, they catch the small faults of spacing and contrast before the handoff, and they lighten the rounds of review. The same quiet helper can later read your design tokens, weigh your components, or trace a file's history, all through plain conversation.\n\nWhen your work is finished.Take the key from your config, then remove the token in Figma underSettings → Security. And so it is fully revoked.", "url": "https://wpnews.pro/news/invite-an-ai-to-look-upon-your-figma-designs", "canonical_source": "https://dev.to/planetabhi_/invite-an-ai-to-look-upon-your-figma-designs-4930", "published_at": "2026-08-22 06:55:16+00:00", "updated_at": "2026-08-22 07:13:53.645443+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "artificial-intelligence"], "entities": ["Figma MCP Server", "Claude", "GPT", "Gemini", "GitHub Copilot", "VS Code", "Claude Desktop", "Cursor"], "alternates": {"html": "https://wpnews.pro/news/invite-an-ai-to-look-upon-your-figma-designs", "markdown": "https://wpnews.pro/news/invite-an-ai-to-look-upon-your-figma-designs.md", "text": "https://wpnews.pro/news/invite-an-ai-to-look-upon-your-figma-designs.txt", "jsonld": "https://wpnews.pro/news/invite-an-ai-to-look-upon-your-figma-designs.jsonld"}}