@gethopp/figma-mcp-bridge 0.0.22 β 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -42
- package/dist/schema.d.ts +1398 -79
- package/dist/schema.js +271 -20
- package/dist/schema.js.map +1 -1
- package/dist/tools.js +79 -23
- package/dist/tools.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -53,7 +53,7 @@ That's it β no binaries to download or install.
|
|
|
53
53
|
|
|
54
54
|
### 2. Add the Figma plugin
|
|
55
55
|
|
|
56
|
-
Download the plugin from the [latest release](https://github.com/gethopp/figma-mcp-bridge/releases) page, then in Figma go to `Plugins > Development > Import plugin from manifest` and select the `manifest.json` file from the `plugin/` folder.
|
|
56
|
+
Download the plugin from the [latest release](https://github.com/gethopp/figma-mcp-bridge/releases) page, then in Figma go to `Plugins > Development > Import plugin from manifest` and select the `manifest.json` file from the `plugin/` folder. The same plugin runs in Figma design files, Dev Mode (read-only), and FigJam boards.
|
|
57
57
|
|
|
58
58
|
### 3. Start using it π
|
|
59
59
|
|
|
@@ -65,53 +65,78 @@ If you want to know more about how it works, read the [How it works](#how-it-wor
|
|
|
65
65
|
|
|
66
66
|
## Available Tools
|
|
67
67
|
|
|
68
|
-
| Tool | Description
|
|
69
|
-
| ------------------------------ |
|
|
70
|
-
| `list_files` | List all connected Figma files (supports multi-file workflows)
|
|
71
|
-
| `get_document` | Get the current Figma page document tree
|
|
72
|
-
| `get_selection` | Get the currently selected nodes in Figma
|
|
73
|
-
| `get_node` | Get a specific Figma node by ID (colon format, e.g. `4029:12345`)
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
68
|
+
| Tool | Description |
|
|
69
|
+
| ------------------------------ | -------------------------------------------------------------------------------------------------------- |
|
|
70
|
+
| `list_files` | List all connected Figma files (supports multi-file workflows) |
|
|
71
|
+
| `get_document` | Get the current Figma page document tree |
|
|
72
|
+
| `get_selection` | Get the currently selected nodes in Figma |
|
|
73
|
+
| `get_node` | Get a specific Figma node by ID (colon format, e.g. `4029:12345`) |
|
|
74
|
+
| `get_prototype_connections` | Read prototype interactions on a node and its descendants |
|
|
75
|
+
| `trace_prototype_flow` | Trace prototype navigation between screens |
|
|
76
|
+
| `get_styles` | Get all local paint, text, effect, and grid styles |
|
|
77
|
+
| `get_metadata` | Get file name, pages, and current page info |
|
|
78
|
+
| `get_design_context` | Get a depth-limited tree optimized for understanding design context |
|
|
79
|
+
| `get_variable_defs` | Get all variable collections, modes, and values (design tokens) |
|
|
80
|
+
| `get_screenshot` | Export nodes as PNG/SVG/JPG/PDF (base64-encoded) |
|
|
81
|
+
| `save_screenshots` | Export and save screenshots directly to the local filesystem |
|
|
82
|
+
| `get_motion_styles` | List all available animation presets (beta) |
|
|
83
|
+
| `get_node_motion` | Read a node's current animation styles and properties (beta) |
|
|
84
|
+
| `apply_animation_style` | Apply a preset animation style to a node (beta) |
|
|
85
|
+
| `remove_animation_style` | Remove an applied animation style from a node (beta) |
|
|
86
|
+
| `apply_manual_keyframe_track` | Apply a manual keyframe track to a node property (beta) |
|
|
87
|
+
| `remove_manual_keyframe_track` | Remove a manual keyframe track from a node property (beta) |
|
|
88
|
+
| `set_timeline_duration` | Set the duration of a timeline in seconds (beta) |
|
|
89
|
+
| `set_node_visibility` | Show or hide specific nodes |
|
|
90
|
+
| `set_text_content` | Replace the contents of a text node (TEXT, FigJam sticky, or shape label) |
|
|
91
|
+
| `set_text_properties` | Patch font, size, alignment, auto-resize, color, and bounds on text nodes/sublayers |
|
|
92
|
+
| `set_node_properties` | Patch common node properties: name, position, size, visibility, opacity, corner radius (single or batch) |
|
|
93
|
+
| `set_solid_fill` | Replace a node's fill or stroke with a single solid paint |
|
|
94
|
+
| `set_gradient_fill` | Replace a node's fill or stroke with a linear/radial/angular/diamond gradient |
|
|
95
|
+
| `set_effects` | Replace a node's effects list (drop/inner shadows, layer/background blurs) |
|
|
96
|
+
| `set_stroke_properties` | Patch stroke weight, align, dash pattern, cap, and join |
|
|
97
|
+
| `set_auto_layout` | Configure auto-layout direction, padding, gap, alignment, sizing, and wrap (not sections) |
|
|
98
|
+
| `create_page` | Create a new page in the document, optionally switching to it |
|
|
99
|
+
| `create_frame` | Create a new frame, optionally under a parent |
|
|
100
|
+
| `create_section` | Create a section β a named, resizable container (Figma and FigJam) |
|
|
101
|
+
| `create_text` | Create a new text node |
|
|
102
|
+
| `create_shape` | Create a rectangle, ellipse, or line |
|
|
103
|
+
| `create_shape_with_text` | Create a FigJam shape with its own text label (SHAPE_WITH_TEXT), incl. text fill |
|
|
104
|
+
| `create_image` | Create an image-backed rectangle from a local path, URL, or data URI |
|
|
105
|
+
| `create_sticky` | Create a sticky note in FigJam |
|
|
106
|
+
| `create_connector` | Create a connector between two nodes in FigJam, with attachment anchors |
|
|
107
|
+
| `import_html_layers` | Bulk-import an html-figma layer tree (JSON) as frames, text, rectangles, and vectors |
|
|
108
|
+
| `duplicate_nodes` | Duplicate nodes in place |
|
|
109
|
+
| `duplicate_with_offset` | Duplicate nodes and move each duplicate by a fixed offset |
|
|
110
|
+
| `fit_to_content` | Resize a SECTION around its children with optional padding |
|
|
111
|
+
| `distribute_horizontally` | Space 3+ nodes with equal horizontal gaps (first/last stay fixed) |
|
|
112
|
+
| `distribute_vertically` | Space 3+ nodes with equal vertical gaps (first/last stay fixed) |
|
|
113
|
+
| `align_to_grid` | Snap node positions to a grid of the given size |
|
|
114
|
+
| `place_below` | Move a node below another with gap and start/center alignment |
|
|
115
|
+
| `place_right_of` | Move a node to the right of another with gap and start/center alignment |
|
|
116
|
+
| `reparent_nodes` | Move nodes into another parent |
|
|
117
|
+
| `group_nodes` | Wrap a list of nodes (sharing a parent) in a new group |
|
|
118
|
+
| `ungroup_node` | Ungroup a group or frame β children move up to its parent |
|
|
119
|
+
| `set_selection` | Set the page selection to a list of node IDs (works in Dev Mode) |
|
|
120
|
+
| `scroll_and_zoom_into_view` | Frame the viewport around the given nodes (works in Dev Mode) |
|
|
121
|
+
| `delete_nodes` | Delete nodes with explicit confirmation |
|
|
109
122
|
|
|
110
123
|
All tools accept an optional `fileKey` parameter when multiple Figma files are connected. Use `list_files` to discover connected files and their keys.
|
|
111
124
|
|
|
125
|
+
### Prototype Notes
|
|
126
|
+
|
|
127
|
+
- Prototype tools are read-only and unavailable in FigJam. Set `includePrototype: true` on `get_node` to include the same interactions.
|
|
128
|
+
- Reactions are Figma's own trigger and action data, with destinations, variables, and modes resolved to names.
|
|
129
|
+
- Flow edges list their enclosing branch `conditions` from outermost to innermost (`null` marks an else branch).
|
|
130
|
+
- Observed `AFTER_TIMEOUT` values are in seconds (for example, `0.8` for 800 ms).
|
|
131
|
+
|
|
112
132
|
### Editing Notes
|
|
113
133
|
|
|
114
134
|
- Edit tools work only when the plugin is opened in Figma's design editor (Dev Mode is read-only β they will return a clear error there).
|
|
135
|
+
- In **FigJam**, read tools plus the write tools (`set_text_content`, `set_text_properties`, `set_node_properties`, `set_solid_fill`, `create_text`, `create_shape`, `create_shape_with_text`, `create_sticky`, `create_connector`, `create_section`, `duplicate_nodes`, `duplicate_with_offset`, `fit_to_content`, `distribute_horizontally`, `distribute_vertically`, `align_to_grid`, `place_below`, `place_right_of`, `delete_nodes`, ...) are available. Auto-layout and motion/animation tools return a clear error in FigJam.
|
|
136
|
+
- `set_text_content` / `set_text_properties` edit a TEXT node's content directly, or the text sublayer of a FigJam STICKY / SHAPE_WITH_TEXT node. Alignment and auto-resize are TEXT-node-only β they return a clear error on stickies and shapes (x/y/width/height still apply to the containing node).
|
|
137
|
+
- `set_node_properties` accepts either `nodeId` or a `nodeIds` array to apply the same property changes to several nodes in one call.
|
|
138
|
+
- `set_auto_layout` targets frames; SECTION nodes have no auto-layout in Figma's API and return an explicit error.
|
|
139
|
+
- `fit_to_content` works on SECTION nodes only (Figma's API exposes no equivalent for other containers): it shifts children so their bounding box starts at `padding` and resizes the section to bbox + 2Γpadding.
|
|
115
140
|
- The current user must have permission to edit the target file.
|
|
116
141
|
- `delete_nodes` is intentionally gated behind `confirm: true`.
|
|
117
142
|
- Text edits automatically load the fonts currently used by the target text node before applying the new content.
|