Skip to main content
figma-api Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/a5c-ai/babysitter --skill figma-apiEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Más de este repositorio Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
assimilate-popular-workflows This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
Explorador de archivos
2 archivos Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name figma-api description Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history. allowed-tools Bash(*) Read Write Edit Glob Grep WebFetch metadata {"author":"babysitter-sdk","version":"1.0.0","category":"design-integration","backlog-id":"SK-UX-002"} graph {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:figma-prototyping","skill-area:design-systems"],"roles":["role:product-designer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]}
figma-api
You are figma-api - a specialized skill for direct Figma API interactions, enabling seamless design-to-code workflows and design asset management.
Overview
This skill enables AI-powered Figma integration including:
Fetching files, components, and component sets
Extracting design tokens (colors, typography, spacing)
Exporting images and assets at various scales
Managing comments and feedback
Accessing version history and change tracking
Syncing design systems between Figma and code
Prerequisites
Figma Personal Access Token (PAT) or OAuth token
Figma file/project access permissions
Optional: MCP server for enhanced real-time integration
Capabilities
1. File and Component Fetching Retrieve Figma file data and components:
const fileData = await figmaApi.getFile (fileKey);
const nodes = await figmaApi.getFileNodes (fileKey, ['1:2' , '1:3' ]);
const components = await figmaApi.getComponents (fileKey);
const componentSets = await figmaApi.getComponentSets (fileKey);
2. Design Token Extraction 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" }
}
}
3. Image Export Export images and assets at various scales:
const images = await figmaApi.getImage (fileKey, {
ids : ['1:2' , '1:3' ],
format : 'png' ,
scale : 2
});
const svgImages = await figmaApi.getImage (fileKey, {
ids : ['1:4' ],
format : 'svg' ,
svg_include_id : true ,
svg_simplify_stroke : true
});
const renderedImages = await figmaApi.getImageFills (fileKey);
4. Comment Management Manage design feedback and comments:
const comments = await figmaApi.getComments (fileKey);
const newComment = await figmaApi.postComment (fileKey, {
message : 'Please review the button states' ,
client_meta : { x : 100 , y : 200 }
});
const reply = await figmaApi.postComment (fileKey, {
message : 'Updated per feedback' ,
comment_id : '123456'
});
await figmaApi.deleteComment (fileKey, commentId);
5. Version History Access file version history:
const versions = await figmaApi.getVersions (fileKey);
{
"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"
}
}
]
}
6. Style Extraction Extract styles from Figma:
const styles = await figmaApi.getStyles (fileKey);
const colorStyles = styles.filter (s =>style_type === 'FILL' );
const textStyles = styles.filter (s =>style_type === 'TEXT' );
const effectStyles = styles.filter (s =>style_type === 'EFFECT' );
MCP Server Integration 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
API Reference
REST API Endpoints Endpoint Method Description /v1/files/:keyGET Get file data /v1/files/:key/nodesGET Get specific nodes /v1/files/:key/imagesGET Export images /v1/files/:key/commentsGET/POST Manage comments /v1/files/:key/versionsGET Get version history /v1/files/:key/componentsGET Get components
Authentication
curl -H "X-Figma-Token: YOUR_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
curl -H "Authorization: Bearer OAUTH_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
Best Practices
Cache responses - Figma API has rate limits; cache file data locallyUse node IDs - Fetch specific nodes instead of entire files when possibleBatch exports - Group image exports to minimize API callsHandle pagination - Large files may require paginated requestsVersion your tokens - Use descriptive names and rotate tokens regularlyRespect rate limits - 50 requests per minute for personal access tokens
Process Integration 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 management
Output Format When 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" ]
}
Error Handling
Handle 403 errors for permission issues
Retry on 429 rate limit errors with exponential backoff
Validate file keys before making requests
Provide helpful messages for common authentication failures
Constraints
Respect Figma API rate limits (50 req/min for PAT)
File exports may timeout for very large files
Some features require team/organization plans
Plugin API requires Figma desktop app running
