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.
npx skills add a5c-ai/babysitter --skill figma-api --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: ```javascript // 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); ``` ### 2. Design Token Extraction Extract design tokens from F
- Overview
- Prerequisites
- Capabilities
- 1. File and Component Fetching
- 2. Design Token Extraction
- 3. Image Export
- 4. Comment Management
- 5. Version History
- 6. Style Extraction
- MCP Server Integration
- API Reference
- REST API Endpoints
- Authentication
- Best Practices
Using Personal Access Token curl -H "X-Figma-Token: YOUR_TOKEN" \ Using OAuth curl -H "Authorization: Bearer OAUTH_TOKEN" \
What does the figma-api skill do?
Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill figma-api --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.