Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.
Manages Figma design assets by fetching files, extracting tokens, exporting images, and handling comments via API.
npx claudepluginhub a5c-ai/babysitterThis skill is limited to using the following tools:
README.mdYou are figma-api - a specialized skill for direct Figma API interactions, enabling seamless design-to-code workflows and design asset management.
This skill enables AI-powered Figma integration including:
Retrieve Figma file data and components:
// Fetch entire file
const fileData = await figmaApi.getFile(fileKey);
// Fetch specific nodes
const nodes = await figmaApi.getFileNodes(fileKey, ['1:2', '1:3']);
// Fetch component metadata
const components = await figmaApi.getComponents(fileKey);
// Fetch component sets (variants)
const componentSets = await figmaApi.getComponentSets(fileKey);
Extract design tokens from Figma files:
{
"colors": {
"primary": {
"50": { "value": "#E3F2FD", "type": "color" },
"100": { "value": "#BBDEFB", "type": "color" },
"500": { "value": "#2196F3", "type": "color" },
"900": { "value": "#0D47A1", "type": "color" }
},
"semantic": {
"success": { "value": "{colors.green.500}", "type": "color" },
"error": { "value": "{colors.red.500}", "type": "color" },
"warning": { "value": "{colors.yellow.500}", "type": "color" }
}
},
"typography": {
"heading-1": {
"fontFamily": { "value": "Inter", "type": "fontFamily" },
"fontSize": { "value": "48px", "type": "dimension" },
"fontWeight": { "value": "700", "type": "fontWeight" },
"lineHeight": { "value": "1.2", "type": "number" }
}
},
"spacing": {
"xs": { "value": "4px", "type": "dimension" },
"sm": { "value": "8px", "type": "dimension" },
"md": { "value": "16px", "type": "dimension" },
"lg": { "value": "24px", "type": "dimension" },
"xl": { "value": "32px", "type": "dimension" }
}
}
Export images and assets at various scales:
// Export specific nodes as PNG
const images = await figmaApi.getImage(fileKey, {
ids: ['1:2', '1:3'],
format: 'png',
scale: 2
});
// Export as SVG
const svgImages = await figmaApi.getImage(fileKey, {
ids: ['1:4'],
format: 'svg',
svg_include_id: true,
svg_simplify_stroke: true
});
// Export with fills rendered
const renderedImages = await figmaApi.getImageFills(fileKey);
Manage design feedback and comments:
// Get all comments
const comments = await figmaApi.getComments(fileKey);
// Post new comment
const newComment = await figmaApi.postComment(fileKey, {
message: 'Please review the button states',
client_meta: { x: 100, y: 200 }
});
// Reply to comment
const reply = await figmaApi.postComment(fileKey, {
message: 'Updated per feedback',
comment_id: '123456'
});
// Resolve comment
await figmaApi.deleteComment(fileKey, commentId);
Access file version history:
// Get version history
const versions = await figmaApi.getVersions(fileKey);
// Output:
{
"versions": [
{
"id": "123456789",
"created_at": "2026-01-24T10:30:00Z",
"label": "v2.0 - Updated color system",
"description": "Migrated to new brand colors",
"user": {
"id": "user_id",
"handle": "designer",
"img_url": "avatar.png"
}
}
]
}
Extract styles from Figma:
// Get all styles
const styles = await figmaApi.getStyles(fileKey);
// Extract color styles
const colorStyles = styles.filter(s => s.style_type === 'FILL');
// Extract text styles
const textStyles = styles.filter(s => s.style_type === 'TEXT');
// Extract effect styles (shadows, blurs)
const effectStyles = styles.filter(s => s.style_type === 'EFFECT');
This skill can leverage the following MCP servers for enhanced capabilities:
| Server | Description | Installation |
|---|---|---|
| Claude Talk to Figma MCP | Bidirectional Figma interaction for real-time design manipulation | GitHub |
| Figma MCP Server (karthiks3000) | Claude MCP Server for working with Figma files | GitHub |
| html.to.design MCP | Converts HTML directly into editable Figma designs | Docs |
| Endpoint | Method | Description |
|---|---|---|
/v1/files/:key | GET | Get file data |
/v1/files/:key/nodes | GET | Get specific nodes |
/v1/files/:key/images | GET | Export images |
/v1/files/:key/comments | GET/POST | Manage comments |
/v1/files/:key/versions | GET | Get version history |
/v1/files/:key/components | GET | Get components |
# Using Personal Access Token
curl -H "X-Figma-Token: YOUR_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
# Using OAuth
curl -H "Authorization: Bearer OAUTH_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
This skill integrates with the following processes:
component-library.js - Design-to-code component workflowsdesign-system.js - Design system synchronizationhifi-prototyping.js - High-fidelity prototype exportswireframing.js - Wireframe asset managementWhen executing operations, provide structured output:
{
"operation": "extract-tokens",
"fileKey": "abc123xyz",
"status": "success",
"tokens": {
"colors": {},
"typography": {},
"spacing": {}
},
"metadata": {
"lastModified": "2026-01-24T10:30:00Z",
"version": "123456789"
},
"artifacts": ["tokens.json", "tokens.css"]
}
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.