Agent skill
figma
Figma API for design files and assets. Use when user mentions "Figma", "figma.com", shares a Figma link, "design specs", "export from Figma", or asks about designs.
Install this agent skill to your Project
npx add-skill https://github.com/vm0-ai/vm0-skills/tree/main/figma
SKILL.md
Figma API
Access and manage design files, components, comments, and projects in Figma workspaces via REST API.
Official docs:
https://developers.figma.com/docs/rest-api/
When to Use
Use this skill when you need to:
- Read design files and extract components, styles, and frames
- Export images from Figma designs in various formats (PNG, JPG, SVG, PDF)
- Get file version history and track changes
- Manage comments on design files
- Access design tokens and styles
- Get component information from design systems
Prerequisites
Connect your Figma account via the vm0 platform (OAuth connector). The FIGMA_TOKEN environment variable is automatically configured.
Verify authentication:
curl -s "https://api.figma.com/v1/me" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '{id, email, handle}'
Expected response: Your user information (id, email, handle).
Finding File Keys
Figma file URLs contain the file key:
URL: https://www.figma.com/design/abc123XYZ/My-Design-File
File Key: abc123XYZ
The file key is the alphanumeric string between /design/ (or /file/) and the next /.
How to Use
All examples assume FIGMA_TOKEN is set.
Base URL: https://api.figma.com/v1
1. Get Current User
Get information about the authenticated user (no parameters needed):
curl -s "https://api.figma.com/v1/me" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '{id, email, handle, img_url}'
2. Get File
Retrieve complete file structure including frames, components, and styles.
Replace <file-key> with your actual file key from a Figma URL.
curl -s "https://api.figma.com/v1/files/<file-key>" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '{name, lastModified, version, document: .document.children[0].name}'
3. Get File Nodes
Retrieve specific nodes from a file by node IDs.
Replace <file-key> with your file key and <node-id> with actual node IDs (comma-separated for multiple, e.g., 1:2,1:3).
curl -s "https://api.figma.com/v1/files/<file-key>/nodes?ids=<node-id>" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.nodes'
Node IDs can be found in the file structure or from the Figma URL ?node-id=X-Y parameter (convert - to :).
4. Get File Images
Export nodes as images in PNG, JPG, SVG, or PDF format.
Replace <file-key> with your file key and <node-id> with actual node IDs.
curl -s "https://api.figma.com/v1/images/<file-key>?ids=<node-id>&format=png&scale=2" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.images'
Parameters:
format:png,jpg,svg,pdf(default:png)scale:0.5,1,2,4(default:1)
5. Get Image Fills
Get download URLs for all images used in a file.
Replace <file-key> with your file key.
curl -s "https://api.figma.com/v1/files/<file-key>/images" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.meta.images'
6. Get File Comments
List all comments on a file.
Replace <file-key> with your file key.
curl -s "https://api.figma.com/v1/files/<file-key>/comments" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.comments[] | {id, message: .message, user: .user.handle, created_at}'
7. Post Comment
Add a comment to a file. Figma requires client_meta with a node_id to anchor the comment.
Replace <file-key> with your file key and <node-id> with an actual node ID.
Write to /tmp/figma_comment.json:
{
"message": "This looks great!",
"client_meta": {
"node_id": "<node-id>",
"node_offset": { "x": 0, "y": 0 }
}
}
curl -s -X POST "https://api.figma.com/v1/files/<file-key>/comments" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" --header "Content-Type: application/json" -d @/tmp/figma_comment.json | jq '{id, message}'
8. Get File Versions
List version history of a file.
Replace <file-key> with your file key.
curl -s "https://api.figma.com/v1/files/<file-key>/versions" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.versions[] | {id, created_at, label, description, user: .user.handle}'
9. Get Project Files
List all files in a project.
Replace <project-id> with your project ID. Project IDs can be found in Figma URLs or from team project listings.
curl -s "https://api.figma.com/v1/projects/<project-id>/files" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.files[] | {key, name, last_modified}'
10. Get Component Sets
Get component sets (variants) in a file.
Replace <file-key> with your file key.
curl -s "https://api.figma.com/v1/files/<file-key>/component_sets" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '.meta.component_sets[] | {key, name, description}'
11. Get Component
Get metadata for a specific component.
Replace <component-key> with your component key from the component sets output.
curl -s "https://api.figma.com/v1/components/<component-key>" --header "Authorization: Bearer $(printenv FIGMA_TOKEN)" | jq '{key, name, description, containing_frame}'
Understanding File Structure
Figma files have a hierarchical structure:
FILE
└── CANVAS (page)
├── FRAME
│ ├── RECTANGLE
│ ├── TEXT
│ └── GROUP
│ └── VECTOR
└── FRAME
└── COMPONENT
Common node types: CANVAS, FRAME, GROUP, VECTOR, BOOLEAN_OPERATION, STAR, LINE, ELLIPSE, REGULAR_POLYGON, RECTANGLE, TEXT, SLICE, COMPONENT, COMPONENT_SET, INSTANCE
Guidelines
- Start with
/v1/me: Always verify auth first before calling other endpoints - File key from URL: Extract the file key from Figma URLs (
/design/<file-key>/...) - Node IDs: Node IDs are in format
X:Y(e.g.,1:2) — in URLs they appear asX-Y, convert-to: - Rate limits: 60 requests per minute; implement backoff for 429 responses
- Optimize exports: Use appropriate scale and format for image exports
- Pagination: Some endpoints return paginated results; check for
next_pagein responses
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
brave-search
Brave Search API for web search. Use when user says "search web", "Brave search", or asks to "find on web" without specifying Google.
supadata
Supadata API for YouTube/web data. Use when user mentions "Supadata", "YouTube data", "channel stats", or web scraping data.
roadmap-planning
Build and prioritize product roadmaps using scoring models like RICE, ICE, and value-effort matrices. Activate when creating a product roadmap, prioritizing features, sequencing initiatives, mapping dependencies, balancing team capacity, choosing between Now/Next/Later or quarterly planning, or communicating roadmap tradeoffs to executives and stakeholders.
qdrant
Qdrant API for vector search. Use when user mentions "Qdrant", "vector database", "semantic search", or embeddings storage.
calendly
Calendly scheduling API. Use when user mentions "Calendly", "calendly.com", "schedule a meeting", "booking link", "event types", or asks about interview scheduling.
stripe
Stripe API for payments. Use when user mentions "Stripe", "payment", "subscription", "billing", "invoice", or asks about payment processing.
Didn't find tool you were looking for?