figma-mcp-go
Figma MCP server with full read/write access via plugin bridge — no API tokens, no rate limits, text to designs and designs to code
Datos de origen
- Repositorio
- reason-machines/mcp-skills
- Última actividad en el origen
- 16 de mayo de 2026 a las 21:19
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 7
- Forks
- 3
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- figma-mcp-go
- description
- Figma MCP server with full read/write access via plugin bridge — no API tokens, no rate limits, text to designs and designs to code
- triggers
- ["how do I control Figma from my AI editor","automate Figma design creation without API limits","connect Figma to Claude or Cursor","create Figma components programmatically","export Figma designs to code","read and modify Figma files with MCP","set up figma-mcp-go plugin","update Figma text nodes automatically"]
# figma-mcp-go
> Skill by [ara.so](https://ara.so) — MCP Skills collection
An open-source MCP server that provides full read/write access to Figma files through a plugin bridge, bypassing REST API rate limits. Built in Go, it enables AI tools like Claude, Cursor, and GitHub Copilot to automate design workflows, create components, modify styles, manage variables, and export designs to code.
## What It Does
- **No API Token Required**: Works through a Figma plugin, avoiding REST API limits (6 calls/month on free plans)
- **73 Tools**: Complete CRUD operations for frames, components, text, styles, variables, prototypes, and more
- **Bidirectional**: Read design context and write changes back to live Figma files
- **Export**: Screenshot nodes, generate PDFs, export design tokens as JSON/CSS
- **Built-in Strategies**: Includes MCP prompts for design best practices
## Installation
### 1. Configure MCP Server
**Claude Code CLI:**
```bash
claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest
```
**Codex CLI:**
```bash
codex mcp add figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest
```
**Cursor / VS Code / GitHub Copilot (`.vscode/mcp.json`):**
```json
{
"servers": {
"figma-mcp-go": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@vkhanhqui/figma-mcp-go"]
}
}
}
```
**Claude Desktop (`.mcp.json`):**
```json
{
"mcpServers": {
"figma-mcp-go": {
"command": "npx",
"args": ["-y", "@vkhanhqui/figma-mcp-go"]
}
}
}
```
### 2. Install Figma Plugin
1. Download [plugin.zip](https://github.com/vkhanhqui/figma-mcp-go/releases)
2. Open Figma Desktop → **Plugins** → **Development** → **Import plugin from manifest**
3. Select `manifest.json` from the extracted ZIP
4. Run the plugin inside any Figma file (it must stay open while using MCP tools)
## Core Workflows
### Reading Design Context
**Get current page structure:**
```typescript
// Use get_design_context for depth-limited tree with detail control
const context = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "get_design_context",
arguments: {
rootNodeId: "0:1", // page ID or specific frame
maxDepth: 3,
detail: "compact" // minimal | compact | full
}
});
```
**Get metadata and page list:**
```typescript
const metadata = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "get_metadata",
arguments: {}
});
const pages = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "get_pages",
arguments: {}
});
```
**Search for nodes:**
```typescript
const results = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "search_nodes",
arguments: {
rootNodeId: "0:1",
nameSubstring: "Button",
types: ["COMPONENT", "INSTANCE"]
}
});
```
### Creating Design Elements
**Create a frame with auto-layout:**
```typescript
const frame = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_frame",
arguments: {
name: "Hero Section",
x: 0,
y: 0,
width: 1440,
height: 600,
fills: "#0066FF",
layoutMode: "VERTICAL",
primaryAxisAlignItems: "CENTER",
counterAxisAlignItems: "CENTER",
itemSpacing: 24,
paddingTop: 48,
paddingRight: 48,
paddingBottom: 48,
paddingLeft: 48
}
});
```
**Create text node:**
```typescript
const text = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_text",
arguments: {
characters: "Welcome to Our Platform",
fontFamily: "Inter",
fontStyle: "Bold",
fontSize: 48,
x: 100,
y: 100,
parentId: frame.id // optional, parent frame
}
});
```
**Import image from base64:**
```typescript
const image = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "import_image",
arguments: {
base64Data: "iVBORw0KGgoAAAANSUhEUg...", // without data:image prefix
x: 0,
y: 0,
width: 800,
height: 600,
name: "Hero Image",
parentId: frame.id
}
});
```
### Modifying Existing Nodes
**Update text content:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "set_text",
arguments: {
nodeId: "123:456",
characters: "Updated heading text"
}
});
```
**Set fills and strokes:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "set_fills",
arguments: {
nodeIds: ["123:456", "123:457"],
color: "#FF5733"
}
});
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "set_strokes",
arguments: {
nodeId: "123:456",
color: "#000000",
weight: 2
}
});
```
**Batch find and replace text:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "find_replace_text",
arguments: {
rootNodeId: "0:1", // search entire page
findText: "Company Name",
replaceText: "Acme Corp",
useRegex: false,
caseSensitive: false
}
});
```
**Resize and reposition:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "resize_nodes",
arguments: {
nodeIds: ["123:456"],
width: 1200,
height: 800
}
});
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "move_nodes",
arguments: {
nodeIds: ["123:456"],
x: 200,
y: 300
}
});
```
### Working with Components
**Create component from frame:**
```typescript
const component = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_component",
arguments: {
nodeId: "123:456", // must be a FRAME
name: "Button/Primary"
}
});
```
**Swap component instance:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "swap_component",
arguments: {
instanceId: "123:789",
newComponentId: "456:123"
}
});
```
**Detach instance:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "detach_instance",
arguments: {
nodeIds: ["123:789"]
}
});
```
### Styles and Variables
**Create paint style:**
```typescript
const style = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_paint_style",
arguments: {
name: "Colors/Primary/500",
color: "#0066FF"
}
});
```
**Create text style:**
```typescript
const textStyle = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_text_style",
arguments: {
name: "Heading/H1",
fontFamily: "Inter",
fontStyle: "Bold",
fontSize: 48,
lineHeight: 56,
letterSpacing: -0.5
}
});
```
**Apply style to node:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "apply_style_to_node",
arguments: {
nodeId: "123:456",
styleId: style.id,
styleType: "FILL" // FILL | STROKE | TEXT | EFFECT | GRID
}
});
```
**Create variable collection:**
```typescript
const collection = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_variable_collection",
arguments: {
name: "Spacing",
initialModeName: "Default"
}
});
```
**Create and bind variable:**
```typescript
const variable = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "create_variable",
arguments: {
collectionId: collection.id,
name: "spacing-md",
resolvedType: "FLOAT"
}
});
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "set_variable_value",
arguments: {
variableId: variable.id,
modeId: collection.defaultModeId,
value: 16
}
});
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "bind_variable_to_node",
arguments: {
nodeId: "123:456",
variableId: variable.id,
field: "itemSpacing" // fillColor | strokeColor | width | height | opacity | rotation | visible | cornerRadius | itemSpacing | paddingLeft | etc.
}
});
```
### Prototyping
**Set prototype reactions:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "set_reactions",
arguments: {
nodeId: "123:456",
reactions: [
{
trigger: { type: "ON_CLICK" },
actions: [
{
type: "NODE",
destinationId: "123:789",
navigation: "NAVIGATE",
transition: {
type: "DISSOLVE",
duration: 0.3,
easing: { type: "EASE_OUT" }
}
}
]
}
],
mode: "replace" // replace | append
}
});
```
**Get reactions:**
```typescript
const reactions = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "get_reactions",
arguments: {
nodeId: "123:456"
}
});
```
### Exporting
**Take screenshot:**
```typescript
const screenshot = await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "get_screenshot",
arguments: {
nodeId: "123:456",
format: "PNG",
scale: 2
}
});
// Returns base64-encoded image
```
**Save screenshots to disk:**
```typescript
await use_mcp_tool({
server_name: "figma-mcp-go",
tool_name: "save_screenshots",
arguments: {
Ver en GitHubEste SKILL.md es muy grande, por eso SkillsMP muestra aqui solo la primera seccion. Ver en GitHub
