The shortlist
Pasting screenshots into a chat loses the structure a model needs. A Figma MCP server hands the agent the file's actual layout and styling data instead — and some can edit the design as well as read it.
Documentation-based starting points, not hands-on benchmarks. Check each option's fit, setup and costs below. Compare them with the same worksheet.
16k stars · Costs not checked · TypeScript
A server that exposes Figma layout and styling context to a compatible coding client. Compare its output with the actual design; this page does not measure implementation accuracy.
— You can't use a Figma personal access token; the server calls the Figma API with one.
7.1k stars · Costs not checked · JavaScript
Reads designs and changes them, through a Figma plugin and a local WebSocket bridge, so an agent can make bulk edits such as replacing text across a file.
— You can't run the Figma plugin and a local WebSocket server alongside the MCP server; all three are required.
2.6k stars · Costs not checked · TypeScript
Built for design-system work: extraction, creation, debugging and two-way design-token sync, including mining tokens from an existing codebase.
— You need full capabilities from a web-based AI client; the remote and cloud modes are more limited than local mode.
Output quality depends on how the Figma file is built: components, auto layout and named layers translate far better than loose, absolutely positioned frames. All three need a Figma access token, so scope it to the files involved, and treat generated code as a first draft to review rather than a finished screen.
Check the linked product sources, supported languages, regional availability, permissions and current costs for your actual setup.
Google Analytics helps us understand visits. It stays off unless you allow it. Your choice is remembered for up to 180 days. Privacy policy
