★ 1526 JavaScript sse 更新 42分钟前

Guide

A guide on how to use the Figma MCP server

GitHub 官网

安装配置

暂未识别到可直接复制的 MCP 配置，请查看 GitHub README。后台管理员可以补充配置。

README 摘要

# Figma MCP Server Guide The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files. > [!NOTE] > Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits. > > Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month. > > Users with a [Dev or Full seat](https://help.figma.com/hc/en-us/articles/27468498501527-Updates-to-Figma-s-pricing-seats-and-billing-experience#h_01JCPBM8X2MBEXTABDM92HWZG4) on the [Professional, Organization, or Enterprise plans](https://help.figma.com/hc/en-us/articles/360040328273-Figma-plans-and-features) have per minute rate limits, which follow the same limits as the Tier 1 [Figma REST API](https://developers.figma.com/docs/rest-api/rate-limits/). As with Figma’s REST API, Figma reserves the right to change rate limits. For the complete set of Figma MCP server docs, see our [developer documentation](https://developers.figma.com/docs/figma-mcp-server/). By using the Figma MCP server and the related resources (including these skills), you agree to the [Figma Developer Terms](https://www.figma.com/legal/developer-terms/). These skills are currently available as a Beta feature. ## Features - **Write to the canvas** (remote server only): Create and modify native Figma content directly from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your Figma files using your design system as the source of truth. **Note:** We're quickly improving how Figma supports AI agents. The write to canvas feature will eventually be a usage-based paid feature, but is currently available for free during the beta period. - **Generate code from selected frames** Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features. - **Extract design context** Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows. - **Code smarter with Code Connect** Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase. [Learn more about Code Connect →](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect) - **Generate Figma designs from web pages** *(rolling out)* Capture, import, or convert a web page into a Figma design directly from your AI coding agent. ## Installation & Setup ### Connect to the Figma MCP server Different MCP clients require slightly different setups. Follow the instructions below for your specific client to connect to the Figma MCP server. #### VS Code 1. Use the shortcut `⌘ Shift P` to search for `MCP:Add Server`. 2. Select `HTTP`. 3. Paste the server url `https://mcp.figma.com/mcp` in the search bar. Then hit `Enter`. 4. When you're prompted for a server ID, enter `figma`. 5. Select whether you want to add this server globally or only for the current workspace. Once confirmed, you'll see a configuration like this in your `mcp.json` file: ```json { "servers": { "figma": { "type": "http", "url": "https://mcp.figma.com/mcp" } } } ``` 6. Open the chat toolbar using `⌥⌘B` or `⌃⌘I` and switch to **Agent** mode. 7. With the chat...

Guide

安装配置

README 摘要

相关 MCP

Awesome S

Chrome Devtools

Libre Chat

Playwright

Github

Fast