Skip to content
Agentmart
Submit a tool

Figma UI MCP

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

Connector by TranHoaiHung · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 264
Write a review

Chalk Labs

Need help deploying Figma UI MCP?

Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.

Book a call

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/tranhoaihung-figma-ui-mcp

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

Use cases: ui-design

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list and install config. Checked Oct 25, 2026.

Tools
3 read · 1 write · 0 delete · 1 not yet classified
Secrets
None asked for
Install scripts
None found
Runs as
Node.js package

Tools by what they do 5

Read from the source code; the running server may list different tools.

Read 3 · Look things up without changing anything.

  • figma_docs
  • figma_read
  • figma_status

Write 1 · Create, change, send or run things.

  • figma_write

Not yet classified 1 · We could not tell from the name and description.

  • figma_rules

Tools (5)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • figma_docs

    Get the API reference and design rules for figma_write. Call with no args first — returns quick-start guide + critical rules. Then load specific sections as needed: section='rules' (design principles, token rules, layer order, component-first), section='layout' (auto-layout, button/card/badge/progress/mobile rules), section='api' (create/modify/delete/clone/batch/read operations + workflow), section='tokens' (variables, multi-mode, paint styles, text styles), section='icons' (loadImage, loadIcon, loadIconIn, icon libraries, coloring, sizing). Always call figma_docs BEFORE any figma_write code.

  • figma_read

    READ design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.

  • figma_rules

    Generate a design system rule sheet from the current Figma file — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown block. Equivalent to official Figma MCP's create_design_system_rules. Call once at the start of a design-to-code session to give the AI full context: what tokens to use, what text styles exist, which components are available. Re-run when the design system changes.

  • figma_status

    Check whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.

  • figma_write

    Execute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. Use the `figma` proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMo…

Compare and alternatives

    Featured in

    Signals

    Stars
    264
    Forks
    49
    Open issues
    1
    Last commit
    Oct 11, 2026 (19 days ago)
    Last release
    Oct 26, 2026 (5 days ago)

    From GitHub (fetched Oct 24, 2026).

    Details

    Registry name
    io.github.TranHoaiHung/figma-ui-mcp
    Version
    2.5.30
    Auth
    No auth
    Packages
    npm figma-ui-mcp
    License
    MIT
    Repository
    github.com/TranHoaiHung/figma-ui-mcp
    First seen
    Oct 24, 2026
    Last checked
    Oct 26, 2026
    Source
    Official MCP Registrygithub-graphql

    Done for you

    Rather not set it up yourself?

    Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.

    See how we build AI agents →Read the case studies

    Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.

    launches shipped
    50+
    launches shipped
    media placements
    500+
    media placements
    founders on every account
    2
    founders on every account

    Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block

    Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.

    Get Figma UI MCP running in your business

    Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.

    Goes to the Chalk Labs founders, not the newsletter. Privacy

    Need help deploying Figma UI MCP?

    CallGet help
    Cite this page

    Figma UI MCP. Agent Mart. https://agentmart.dev/connectors/tranhoaihung-figma-ui-mcp (last updated 2026-10-26)