Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
figma-ui-mcp is worth checking the docs before setup with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
gh repo view TranHoaiHung/figma-ui-mcp --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
This tool connects AI coding assistants like Claude Code or Cursor to Figma. It allows the AI to create and modify UI designs directly on the Figma canvas, and also read existing designs to get structured information like colors, text, and layout. Everything runs locally on your machine, no API key needed.
figma-ui-mcp is a bidirectional MCP (Model Context Protocol) bridge that enables AI assistants (Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot, or any MCP-compatible IDE) to draw UI directly on Figma canvas and read existing designs back as structured data, screenshots, or code-ready tokens. The tool works entirely over localhost, requiring no Figma API key. It uses a local HTTP server on port 38451 that communicates with a Figma plugin via long polling, ensuring near-realtime latency (<100ms). The bridge supports multiple Figma files/tabs simultaneously via session IDs. Key features include: figma_write to draw frames, shapes, text, and prototypes; figma_read to extract node trees, colors, typography, and screenshots; figma_status to check connection; figma_docs for API reference; figma_rules to generate design system rule sheets; and advanced operations like get_design_context, get_component_map, get_unmapped_components, and get_css. The tool is designed for developers who want to automate UI design generation, extract design tokens, or bridge design and code workflows.
Strong trust signals; still review the README and permissions before production use.
Last commit was about 62 days ago.
206 GitHub stars indicate community interest.
1 open issues signal maintenance load.
MIT license detected.
Generate UI components and pages from natural language descriptions using AI, directly on Figma canvas.
Extract design tokens (colors, typography, spacing) from existing Figma files for use in code.
Automate design system updates by having AI modify multiple Figma elements based on code changes.
Convert Figma designs to CSS or React code by reading node structures and styles.
Create prototypes with interactive flows by instructing AI to add connections and interactions.
The tool runs a local HTTP server; ensure it is not exposed to the public internet.
Figma plugin communicates over localhost; only use on trusted networks.
No data is sent externally, but sensitive designs could be accessed by other processes on the same machine.
206
Stars
43
Forks
1
Issues
MIT
License
Extract any website's complete design system with one command.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
Frontend developers who want to generate UI designs from code or natural language., Design engineers who need to bridge design files with codebases., AI/ML developers building tools that interact with design software.
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
The tool runs a local HTTP server; ensure it is not exposed to the public internet. Figma plugin communicates over localhost; only use on trusted networks.
Similar or complementary options to evaluate include design-extract, Argos, uSpec.
Jun 7, 2026
3 security/trust notes recorded.
Setup difficulty is 3/5.