home / skills / idanbeck / claude-skills / figma-skill

figma-skill skill

safe

This skill reads Figma files, exports assets, lists components and styles, and manages comments to streamline design handoff.

npx playbooks add skill idanbeck/claude-skills --skill figma-skill

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

2.2 KB

---
name: figma-skill
description: Read Figma files, export assets, and manage comments. Use when the user asks to get Figma designs, export images from Figma, or work with Figma components.
allowed-tools: Bash, Read
---

# Figma Skill

Read Figma files, export assets, list components/styles, and manage comments.

## Setup

1. Go to Figma → Account Settings → Personal Access Tokens
2. Create a new token
3. Create `~/.claude/skills/figma-skill/config.json`:
   ```json
   {"access_token": "YOUR_TOKEN"}
   ```

## File Keys

Found in Figma URLs: `figma.com/file/FILE_KEY/...`

## Commands

### User Info

```bash
python3 ~/.claude/skills/figma-skill/figma_skill.py me
```

### Files & Projects

```bash
# Get file info
python3 ~/.claude/skills/figma-skill/figma_skill.py get FILE_KEY

# List files in project
python3 ~/.claude/skills/figma-skill/figma_skill.py files --project PROJECT_ID

# List projects in team
python3 ~/.claude/skills/figma-skill/figma_skill.py projects TEAM_ID

# File version history
python3 ~/.claude/skills/figma-skill/figma_skill.py versions FILE_KEY
```

### Nodes & Export

```bash
# Get specific nodes
python3 ~/.claude/skills/figma-skill/figma_skill.py nodes FILE_KEY --ids "1:2,1:3"

# Export images
python3 ~/.claude/skills/figma-skill/figma_skill.py images FILE_KEY --ids "1:2" --format png --scale 2
```

**Export formats:** png, jpg, svg, pdf

### Components & Styles

```bash
python3 ~/.claude/skills/figma-skill/figma_skill.py components FILE_KEY
python3 ~/.claude/skills/figma-skill/figma_skill.py styles FILE_KEY
python3 ~/.claude/skills/figma-skill/figma_skill.py team-components TEAM_ID
```

### Comments

```bash
# List comments
python3 ~/.claude/skills/figma-skill/figma_skill.py comments FILE_KEY

# Add comment
python3 ~/.claude/skills/figma-skill/figma_skill.py add-comment FILE_KEY --message "Nice work!"

# Comment on specific node
python3 ~/.claude/skills/figma-skill/figma_skill.py add-comment FILE_KEY --message "Review this" --node-id "1:23"
```

## Node IDs

Node IDs are in format `1:23`. Find them by:
- Using `get FILE_KEY` to see page structure
- In Figma: Right-click → Copy/Paste → Copy as CSS (includes node ID)
- In Figma dev mode

## Output

All commands output JSON.

Overview

This skill reads Figma files, exports design assets, lists components and styles, and helps manage comments. It connects to the Figma API using a personal access token and produces machine-readable JSON for integration. The tool is CLI-driven and designed to fit into automation scripts, CI pipelines, or developer workflows. It supports image exports in png, jpg, svg, and pdf formats.

How this skill works

The skill authenticates with Figma using a personal access token stored in a local config file. It calls Figma endpoints to fetch file metadata, node structures, components, styles, and comments, then prints structured JSON. Export commands request rendered images for node IDs and return download URLs or image data depending on the command. Comment commands list and create comments tied to file or node IDs.

When to use it

When you need to extract images or assets from a Figma file programmatically.
When you want an inventory of components, styles, or design tokens in a file or team.
When automating design handoff or generating assets for builds and documentation.
When reviewing or creating comments on a file as part of a feedback workflow.
When integrating Figma data into scripts, CI pipelines, or content generators.

Best practices

Create a dedicated Figma personal access token and store it in ~/.claude/skills/figma-skill/config.json with restrictive file permissions.
Use file keys directly from Figma URLs (figma.com/file/FILE_KEY/...) to target files unambiguously.
Query node lists (get FILE_KEY) first to discover node IDs before exporting or commenting on nodes.
Batch requests by IDs when possible to reduce API calls and stay within rate limits.
Always validate the returned JSON and handle missing nodes or permission errors gracefully.

Example use cases

Export retina assets for production builds: export image nodes as PNG at scale 2 for mobile assets.
Generate a component inventory: list components and styles to create a design-system audit or documentation page.
Automate QA screenshots: pull page snapshots or frame exports to compare visual diffs in CI.
Add reviewer comments: post comments to specific node IDs during design review or handoff.
Pull version history: fetch file versions to track changes or trigger rollback workflows.

FAQ

How do I supply the Figma access token?

Create a personal access token in Figma and save it as {"access_token":"YOUR_TOKEN"} in ~/.claude/skills/figma-skill/config.json.

Where do I find the file key and node IDs?

The file key is in the Figma file URL. Use the get FILE_KEY command to inspect pages and node IDs or copy IDs from Figma dev mode or copy-as-CSS.