Figma MCP BridgeSAFE
mcp/gethopp/figma-mcp-bridge
Figma Plugin & MCP server to bypass API limits
Verdict
SAFE
Grade
B
Trust score
89 /100
Exposed tools
54 21r · 30w · 3d
Transport
stdio
License
MIT
Stars
734
01
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
[](https://gethopp.app)
- Demo
- Quick Start
- Available Tools
- Local development
- Structure
- How it works
[!NOTE] Requires the Figma desktop app (macOS/Windows). The browser version of Figma does not support importing development plugins.
While other amazing Figma MCP servers like Figma-Context-MCP exist, one issues is the API limiting for free users.
The limit for free accounts is 6 requests per month, yes per month.
Figma MCP Bridge is a solution to this problem. It is a plugin + MCP server that streams live Figma document data to AI tools without hitting Figma API rate limits, so its Figma MCP for the rest of us ✊
It supports multiple Figma files connected simultaneously; open the plugin in each file and your AI agent can query any of them by fileKey. Single-file setups work exactly as before with no changes required.
It also includes a small, opt-in set of write tools for safe agent-driven edits — see Editing Notes below.
Demo
Watch a demo of building a UI in Cursor with Figma MCP Bridge
[](https://youtu.be/ouygIhFBx0g)
Quick Start
1. Add the MCP server to your favourite AI tool
Add the following to your AI tool's MCP configuration (e.g. Cursor, Windsurf, Claude Desktop):
{
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}That's it — no binaries to download or install.
2. Add the Figma plugin
Downl
Read from source at commit
82eb4112823bOBSERVED · 2026-10-1202
Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.
claude-code
claude mcp add figma-mcp-bridge -- npx -y @gethopp/[email protected]
claude-desktop
{
"mcpServers": {
"figma-mcp-bridge": {
"command": "npx",
"args": [
"-y",
"@gethopp/[email protected]"
]
}
}
}03
Exposed tools (54)
21 read · 30 write · 3 destructive. Blast radius: 3 tools can delete or overwrite — an agent that can be talked into calling a tool can be talked into calling this one.
| Tool | Risk | Description |
|---|---|---|
align_to_grid | read | Snap each node |
apply_animation_style | write | Apply a preset animation style to a node (Motion API beta). When multiple files are connected, specify fileKey. |
apply_manual_keyframe_track | write | Applies or replaces the manual Motion keyframe track for a property, paint, or effect field on a node. When multiple files are connected, specify fileKey. |
create_connector | write | Create a connector between two nodes in FigJam. You can specify start/end node IDs or absolute positions, plus the attachment side on each node (startAnchor/endAnchor: top, bottom, left, right, auto). Only available in FigJam. When multiple files are connected, specify fileKey. |
create_frame | write | Create a new frame, optionally inside a specified parent. You can set name, size, position, and a solid fill. When multiple files are connected, specify fileKey. |
create_image | write | Create an image-backed rectangle from a local file path, remote URL, or data URI. You can set its parent, position, size, corner radius, and fit mode. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
create_page | write | Create a new page in the Figma document, optionally naming it and switching the editor to it. Returns the new page |
create_section | write | Create a new section — a named container with its own background, resizable independently of its contents. Works in Figma and FigJam. When multiple files are connected, specify fileKey. |
create_shape | write | Create a rectangle, ellipse, or line, optionally inside a specified parent. You can set its size, position, rotation, fill, and stroke. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
create_shape_with_text | write | Create a FigJam shape that carries its own text label (SHAPE_WITH_TEXT), e.g. ROUNDED_RECTANGLE, DIAMOND, or ENG_DATABASE. You can set its shape type, text (and text fill via textFillHex), fill, stroke, position, and size. Only available in FigJam. When multiple files are connected, specify fileKey. |
create_sticky | write | Create a new sticky note in FigJam. You can set its text content, position, and whether it uses the wide shape (isWideWidth). Only available in FigJam. When multiple files are connected, specify fileKey. |
create_svg | write | Insert raw SVG markup or a workspace-local SVG file as editable Figma vector layers using figma.createNodeFromSvg. You can set its parent, position, size, and semantic name. When multiple files are connected, specify fileKey. |
create_text | write | Create a new text node, optionally inside a specified parent. You can set its content, font, size, alignment, color, position, and bounds. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
delete_nodes | destructive | Delete one or more nodes. This is destructive and requires confirm: true. Page and document nodes cannot be deleted through this tool. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
distribute_horizontally | read | Space three or more nodes with equal horizontal gaps, keeping the leftmost and rightmost nodes fixed. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
distribute_vertically | read | Space three or more nodes with equal vertical gaps, keeping the topmost and bottommost nodes fixed. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
duplicate_nodes | read | Duplicate one or more nodes in place. The duplicates remain under the same parent as the originals. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
duplicate_with_offset | write | Duplicate nodes and move each duplicate by a fixed offset in one call. Returns the mapping from source node IDs to duplicate node IDs. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
fit_to_content | read | Resize a SECTION so it tightly wraps its children with optional padding: children are shifted so their bounding box starts at the padding, then the section is resized to bbox + 2×padding. SECTION nodes only — Figma |
get_design_context | read | Get the design context for the current selection or page. Returns a summarized tree structure optimized for understanding the current design context. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
get_document | read | Get the current Figma/FigJam page document tree. When multiple files are connected, specify fileKey. |
get_layout_tree | read | Read absolute node transforms and layout bounds for a capture root. Separate screenshot calls are non-atomic. |
get_metadata | read | Get metadata about the current Figma/FigJam document including file name, pages, and current page info. When multiple files are connected, specify fileKey. |
get_motion_styles | read | List all available animation presets in Figma (Motion API beta). When multiple files are connected, specify fileKey. |
get_node | read | Get a specific Figma/FigJam node by ID. Accepts top-level IDs like |
get_node_motion | read | Read a node |
get_prototype_connections | read | Read-only. List the prototype interactions on a node and all its descendants, including instance sublayers. Each reaction is Figma |
get_screenshot | read | Export a screenshot of the selected nodes or specific nodes by ID. Returns base64-encoded image data. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
get_selection | read | Get the currently selected nodes in Figma/FigJam. When multiple files are connected, specify fileKey. |
get_styles | read | Get all local styles in the document. When multiple files are connected, specify fileKey. |
get_variable_defs | read | Get all local variable definitions including variable collections, modes, and variable values. Variables are Figma |
group_nodes | read | Wrap a list of nodes in a new group. Nodes must share a common parent (or supply parentId explicitly). Returns the new group |
import_html_layers | write | Import a DOM serialization (JSON produced by html-figma |
list_files | read | List all currently connected Figma/FigJam files. Returns fileKey and fileName for each. Use the fileKey to target a specific file in other tools. |
place_below | write | Move a node directly below a reference node with an optional gap and start/center alignment across the reference |
place_right_of | write | Move a node directly to the right of a reference node with an optional gap and start/center alignment across the reference |
remove_animation_style | destructive | Remove an applied animation style from a node (Motion API beta). If no animationStyleId is provided, removes all styles. When multiple files are connected, specify fileKey. |
remove_manual_keyframe_track | destructive | Removes the manual Motion keyframe track for a property, paint, or effect field on a node. When multiple files are connected, specify fileKey. |
reparent_nodes | write | Move one or more nodes into a different parent container. Works in both Figma and FigJam. When multiple files are connected, specify fileKey. |
save_screenshots | write | Export screenshots for multiple nodes and save them directly to the local filesystem. Returns metadata only (no base64). When multiple files are connected, specify fileKey. |
scroll_and_zoom_into_view | read | Scroll and zoom the Figma/FigJam viewport so the given nodes are framed in view. Works in Figma design editor, Dev Mode, and FigJam. |
set_auto_layout | write | Configure auto-layout on a frame: direction, gap, padding, alignment, sizing modes, wrap. Set layoutMode= |
set_effects | write | Replace a node |
set_gradient_fill | write | Replace a node |
set_node_properties | write | |
set_node_visibility | write | Show or hide specific Figma nodes. Returns previous visibility for each node so you can restore them after. Useful for isolating a single layer before exporting: hide all siblings, export the frame, then restore visibility. |
set_selection | write | Set the current page selection to a list of node IDs. Pass an empty array to clear the selection. Works in Figma design editor, Dev Mode, and FigJam. |
set_solid_fill | write | Replace a node |
set_stroke_properties | write | Patch stroke geometry properties: weight, align, dash pattern, cap, join. Use set_solid_fill/set_gradient_fill with target= |
set_text_content | write | Update the contents of a text node. Works on TEXT nodes plus FigJam STICKY and SHAPE_WITH_TEXT nodes (their text sublayer). The plugin loads the node |
set_text_properties | write | |
set_timeline_duration | write | Sets the duration (in seconds) for a timeline. When multiple files are connected, specify fileKey. |
trace_prototype_flow | read | |
ungroup_node | write | Ungroup a group or frame — its children move up to its parent and the wrapper is removed. Returns the IDs of the orphaned children in their new parent. |
04
Trust audit
SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | PASS |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | WARN |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- declared (2 observation(s))
- Network
- declared (5 observation(s))
- Shell
- none-observed
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (6)
MEDIUMFilesystem / path · mcp.destructive_tools · CWE-22, CWE-59
delete_nodes, remove_animation_style, remove_manual_keyframe_track
Why it matters. 3 tool(s) can delete or overwrite
Fix. prefer a read-only mode or scoped tokens; the page states the blast radius
LOWInventory / provenance · inv.hidden_file · CWE-1104
.prettierignore
.prettierignore
Why it matters. hidden member outside the usual dotfiles
Fix. review its purpose
LOWFilesystem / path · fs.traversal · CWE-22, CWE-59
plugin/vite.config.ts:11
outDir: "../../dist",
LOWSupply chain · supply.unpinned · CWE-829, CWE-1357
package.json
husky, lint-staged
Why it matters. 2 dependency range(s) float
Fix. pin exact versions or ship a lockfile
LOWSupply chain · supply.unpinned · CWE-829, CWE-1357
plugin/package.json
react, react-dom, @figma/plugin-typings, @types/react, @types/react-dom, @vitejs/plugin-react, concurrently, typescript
Why it matters. 10 dependency range(s) float
Fix. pin exact versions or ship a lockfile
LOWSupply chain · supply.unpinned · CWE-829, CWE-1357
server/package.json
@figma/plugin-typings, @modelcontextprotocol/sdk, ws, zod, @types/node, @types/ws, typescript
Why it matters. 7 dependency range(s) float
Fix. pin exact versions or ship a lockfile
Gates applied: no_behavioural_pass.
Audited 2026-10-12 · audit v0.4.1 · source sha
82eb4112823bfull audit observations/trust-audit/mcp-server/gethopp__figma-mcp-bridge.json · Report an issue / request a re-scan05
Audit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-12 | 82eb4112823b | SAFE | B | 89 | first audit |
06
Questions
What is the @gethopp/figma-mcp-bridge MCP server?
Figma Plugin & MCP server to bypass API limits
What tools does @gethopp/figma-mcp-bridge expose?
54 in total: 21 read-only, 30 that write, and 3 that can delete or overwrite (delete_nodes, remove_animation_style, remove_manual_keyframe_track). Every one is listed on this page with its risk.
Is @gethopp/figma-mcp-bridge safe to connect to an agent?
The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean server reads B. Separately from the audit: 3 of its tools can destroy data, so scope the token you give it to what you actually need.
What credentials does @gethopp/figma-mcp-bridge need?
No credential environment variables were found in its source, so it appears to need none.
How does @gethopp/figma-mcp-bridge run?
It speaks stdio, so it runs as a local process your client starts. It is published on npm as @gethopp/figma-mcp-bridge at 0.0.24.
How current is this page?
The grade is for one exact copy of the source (82eb4112823b), read on 2026-10-12. The repository is watched and re-audited when it changes.