npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@alkaness/talk-to-figma-mcp

v1.6.0

Published

MCP server, relay and Figma plugin that let AI agents read, inspect and edit Figma files

Readme

Talk to Figma MCP

README · Installation · Commands · Troubleshooting · Contributing · Changelog

A Model Context Protocol (MCP) server that lets AI agents read, inspect and edit Figma files. It provides 109 tools, 5 prompts and 2 resources, and works with any Figma account, including free accounts. Figma Dev Mode is not required.

1. Overview

The agent talks to the MCP server. The MCP server sends each command through a local relay to a plugin running in the open Figma file, and the result comes back the same way.

Supported MCP clients:

  1. Claude Desktop
  2. Claude Code
  3. Cursor
  4. Antigravity
  5. Windsurf
  6. VS Code with GitHub Copilot
  7. Cline
  8. Roo Code

2. Requirements

Bun is recommended. The launcher offers to install it and otherwise uses npm.

3. Installation

The full guide, including every client, is in INSTALLATION.md.

  1. Start the relay. In the folder where the project should be installed, run:

    npx @alkaness/talk-to-figma-mcp

    The launcher clones the repository, installs dependencies and starts the relay on 127.0.0.1:3055. In later sessions, run bun run socket inside the project folder.

  2. Install the plugin. In Figma Desktop, open Menu > Plugins > Development > Import plugin from manifest and select src/claude_mcp_plugin/manifest.json from the project folder.

  3. Configure the MCP client. For Claude Desktop, install talk-to-figma-mcp.dxt from the releases page. For other clients, add this server entry (file locations are listed in INSTALLATION.md, section 4):

    {
      "mcpServers": {
        "TalkToFigma": {
          "command": "npx",
          "args": ["-p", "@alkaness/talk-to-figma-mcp@latest", "talk-to-figma-mcp-server"]
        }
      }
    }
  4. Connect. Run the plugin in Figma and click Connect.

4. Usage

With one Figma file connected, no further setup is needed. The server sends every tool call to that plugin automatically; no channel ID is exchanged.

  • If no plugin is connected, the agent receives an error that tells it to ask the user to open the plugin.
  • The plugin reconnects on its own when the relay restarts. Connections that stop answering heartbeats for 25 seconds are closed.
  • With more than one file connected, the agent asks which file to use and calls join_channel with the channel ID shown in that file's plugin window.

Example requests:

  1. "Find all text with a contrast ratio below 4.5:1 and suggest colors that meet WCAG AA."
  2. "Change #FF6B6B to #E63946 in every primary button in the document."
  3. "Generate a React component for the CardProduct frame, with styles in CSS modules."
  4. "Compare my implementation at http://localhost:3000/pricing with the Pricing frame and list the differences."

5. Parallel agents

Several agents, for example Claude Code subagents, can work on the same file at the same time. The relay keeps a queue per channel and sends commands to the plugin one at a time, so the plugin is never given two commands at once.

Because agents cannot rely on a shared "current page":

  1. set_current_page is blocked by the relay.
  2. Every creation command requires parentId (a page or frame ID).

The command queue was contributed by @mmabas77.

6. Capabilities

| Area | Tools | Examples | |---|---:|---| | Document and pages | 17 | get_document_info, get_node_info, get_css, get_pages | | Node trees | 2 | create_node_tree and update_nodes, in the get_node_info format | | Creation | 12 | clone_node, group_nodes, boolean_operation, create_polygon | | Modification | 24 | batch_operations, rotate_node, reorder_node, delete_node | | Text | 15 | set_letter_spacing, get_styled_text_segments, get_fonts_used | | Styles and variables | 7 | create_text_style, get_variables, apply_variable_to_node | | Components and prototyping | 7 | create_component_instance, set_instance_variant, set_reactions | | Images, assets and SVG | 12 | get_visual_snapshot, scan_assets, get_asset, extract_asset, get_svg | | Verification | 2 | compare_to_figma (SSIM score and diff heatmap), capture_render | | FigJam | 6 | create_sticky, create_connector, create_section | | REST API | 5 | rest_get_file, rest_render_image, rest_get_comments | | Total | 109 | |

24 of these tools are deprecated because create_node_tree and update_nodes cover them: the single-property setters for fills, strokes, gradients, effects, auto-layout, position, size, name, visibility, lock state, opacity, corner radius, font weight and text style, the text content setters, and create_frame, create_rectangle, create_ellipse and create_text. They still work, and each description names its replacement. See COMMANDS.md, section 3.

The 5 REST API tools require a Figma personal access token (INSTALLATION.md, section 5). They read and render any file the token's owner can open, without the plugin.

The server also provides 5 prompts, including audit-accessibility and export-to-tailwind, and 2 live resources: figma://local/selection and figma://local/document. The complete list is in COMMANDS.md.

7. Alternative deployments

Standalone binaries. These run without Bun or Node.js installed:

npm run build:compile           # dist/bin/figma-mcp-server and dist/bin/figma-socket
npm run compile:all-platforms   # Linux x64, macOS arm64, Windows x64
./dist/bin/figma-socket --port=3055

Point the MCP client at dist/bin/figma-mcp-server.

Docker. The provided Dockerfile runs the relay only. See INSTALLATION.md, section 2.2.

8. Documentation

| Document | Contents | |---|---| | INSTALLATION.md | Relay, plugin and client setup; Docker; personal access token | | COMMANDS.md | All 109 tools, 5 prompts and 2 resources | | TROUBLESHOOTING.md | Security model and known error messages | | CONTRIBUTING.md | Architecture, invariants, development and testing | | CHANGELOG.md | Version history |

9. Credits and license

Based on cursor-talk-to-figma-mcp by Sonny Lazuardi. Adapted for Claude Desktop and extended with new tools by Xúlio Zé in claude-talk-to-figma-mcp. This repository continues from that project with zero-config routing, visual snapshots, fidelity tools and the Figma REST API by Alkaness. All contributors are listed in CONTRIBUTING.md, section 7.

Released under the MIT License. Issues and feature requests: GitHub Issues.