Figma Plugin for OpenCode

A comprehensive Figma REST API integration for OpenCode, providing access to files, images, comments, components, styles, variables, webhooks, dev resources, and library analytics.

Features

• Files & Images: Get file JSON, render images, export in multiple formats (PNG, JPG, SVG, PDF)
• Comments: Read, create, delete comments and reactions
• Projects & Teams: Navigate team structure and project files
• Components & Styles: Access published library components and styles
• Variables: Work with design tokens (Enterprise only)
• Webhooks: Set up automated notifications for file changes
• Dev Resources: Link code to design elements in Dev Mode
• Library Analytics: Track component and style usage across organization
• Read-Only Mode: Safe exploration without accidental changes

Quick Start

1. Get Your Figma Access Token

1. Go to Figma Settings
2. Scroll to "Personal Access Tokens"
3. Click "Create new token"
4. Copy the token

2. Configure Environment

Create or update your .env file:

FIGMA_ACCESS_TOKEN=your_token_here

3. Test Connection

opencode run "test my figma connection"

Available Tools (50+ tools)

Connection & User

| Tool | Description | |------|-------------| | figma-test-connection | Test API connection and show current user | | figma-get-current-user | Get authenticated user information |

Files

| Tool | Description | |------|-------------| | figma-get-file | Get file JSON with document structure | | figma-get-file-nodes | Get specific nodes by ID | | figma-get-file-metadata | Get file metadata (name, creator, etc.) | | figma-get-file-versions | Get version history |

Images

| Tool | Description | |------|-------------| | figma-render-images | Render nodes as PNG, JPG, SVG, or PDF | | figma-get-image-fills | Get URLs for images used as fills |

Comments

| Tool | Description | |------|-------------| | figma-get-comments | List all comments on a file | | figma-post-comment | Add a new comment | | figma-delete-comment | Delete a comment | | figma-get-comment-reactions | Get reactions on a comment | | figma-post-comment-reaction | Add reaction (emoji) to comment | | figma-delete-comment-reaction | Remove reaction from comment |

Projects & Teams

| Tool | Description | |------|-------------| | figma-get-team-projects | List projects in a team | | figma-get-project-files | List files in a project |

Components

| Tool | Description | |------|-------------| | figma-get-team-components | Get team library components | | figma-get-file-components | Get file library components | | figma-get-component | Get component by key | | figma-get-team-component-sets | Get team component sets (variants) | | figma-get-file-component-sets | Get file component sets | | figma-get-component-set | Get component set by key |

Styles

| Tool | Description | |------|-------------| | figma-get-team-styles | Get team library styles | | figma-get-file-styles | Get file library styles | | figma-get-style | Get style by key |

Webhooks

| Tool | Description | |------|-------------| | figma-get-webhooks | List webhooks | | figma-create-webhook | Create new webhook | | figma-get-webhook | Get webhook by ID | | figma-update-webhook | Update existing webhook | | figma-delete-webhook | Delete webhook | | figma-get-webhook-requests | Get recent webhook requests |

Variables (Enterprise)

| Tool | Description | |------|-------------| | figma-get-local-variables | Get local variables and collections | | figma-get-published-variables | Get published library variables | | figma-create-variables | Create/update/delete variables |

Dev Resources

| Tool | Description | |------|-------------| | figma-get-dev-resources | Get dev resources from file | | figma-create-dev-resources | Create dev resource links | | figma-update-dev-resources | Update dev resources | | figma-delete-dev-resource | Delete dev resource |

Library Analytics

| Tool | Description | |------|-------------| | figma-get-library-component-actions | Component insertions/detachments | | figma-get-library-component-usages | Component usage counts | | figma-get-library-style-actions | Style insertions/detachments | | figma-get-library-style-usages | Style usage counts | | figma-get-library-variable-actions | Variable insertions/detachments | | figma-get-library-variable-usages | Variable usage counts |

Usage Examples

Get File Information

# Using file key
opencode run "get the figma file abc123xyz"

# Using full URL
opencode run "get figma file https://www.figma.com/file/abc123xyz/My-Design"

# Get specific nodes
opencode run "get nodes 1:2,1:3 from figma file abc123"

Render Images

# Render as PNG (default)
opencode run "render node 1:2 from figma file abc123"

# Render as SVG at 2x scale
opencode run "render node 1:2 from figma file abc123 as SVG at scale 2"

# Export as PDF
opencode run "export node 1:2 from figma file abc123 as PDF"

Work with Comments

# Get all comments
opencode run "list comments on figma file abc123"

# Add a comment
opencode run "add comment 'Looks great!' to figma file abc123 at position 100,200"

# Reply to a comment
opencode run "reply to comment xyz123 on figma file abc123 with 'Thanks!'"

Manage Components

# List team components
opencode run "get components from team 12345"

# Get component details
opencode run "get component with key abc123:456"

Set Up Webhooks

# Create webhook for file updates
opencode run "create webhook for team 12345 that posts to https://my-server.com/webhook for FILE_UPDATE events with passcode secret123"

# Check webhook history
opencode run "get recent requests for webhook abc123"

Work with Variables (Enterprise)

# Get design tokens
opencode run "get local variables from figma file abc123"

# Get published library variables
opencode run "get published variables from figma file abc123"

Read-Only Mode

Enable read-only mode to prevent accidental changes:

# Enable read-only mode
pets read-only figma on

# Check status
pets read-only --status

# Disable
pets read-only figma off

When enabled, write operations (create, update, delete) are disabled.

Finding IDs

File Key

The file key is in Figma URLs:

• https://www.figma.com/file/{FILE_KEY}/Title
• https://www.figma.com/design/{FILE_KEY}/Title

You can pass either the key or full URL to any file_key parameter.

Team ID

Navigate to your team page. The ID is in the URL:

• https://www.figma.com/files/team/{TEAM_ID}/Team-Name

Project ID

Open a project. The ID is in the URL:

• https://www.figma.com/files/project/{PROJECT_ID}/Project-Name

Node ID

1. Select a layer in Figma
2. Right-click > "Copy link"
3. The node ID is in the node-id parameter (e.g., 1:234)

Or use the Node Inspector plugin to see IDs.

API Rate Limits

Figma may throttle requests. If you get 429 errors:

• Wait a minute before retrying
• Reduce the frequency of requests
• Use pagination for large datasets

Enterprise Features

These features require Figma Enterprise:

• Variables API (figma-get-local-variables, figma-get-published-variables, figma-create-variables)
• Activity Logs (not exposed in this plugin)
• Advanced analytics

Webhook Events

| Event | Description | |-------|-------------| | FILE_UPDATE | File content changed (30min delay) | | FILE_VERSION_UPDATE | Named version created | | FILE_DELETE | File deleted | | LIBRARY_PUBLISH | Library published | | FILE_COMMENT | Comment added | | DEV_MODE_STATUS_UPDATE | Dev status changed |

Troubleshooting

"Token is missing or incorrect"

• Verify your FIGMA_ACCESS_TOKEN is set correctly
• Check the token hasn't expired
• Regenerate the token if needed

"The requested file was not found"

• Verify the file key is correct
• Ensure you have access to the file
• Check if using a branch key when main file key is required

"Rate limited"

• Wait 60 seconds before retrying
• Reduce request frequency

Enterprise features not working

• Confirm you have Enterprise plan
• Verify your account has the required permissions

Links

• Figma REST API Documentation
• Figma OAuth Guide
• Figma Plugin API
• OpenPets Documentation