Synthèse automatique

Permet de lire des fichiers Figma, d'exporter des actifs et de gérer les commentaires via des commandes en ligne.

Points forts

Accès programmatique aux données de conception Figma
Export d'actifs dans plusieurs formats (PNG, JPG, SVG, PDF)
Gestion des commentaires sur les fichiers et nœuds
Récupération des composants et styles de conception

Limites

Nécessite un jeton d'accès personnel Figma
Limité aux fichiers auxquels l'utilisateur a accès
Peut être soumis aux limites de l'API Figma pour les grands projets

Quand l'utiliser

Lorsque vous devez extraire des spécifications de conception, exporter des actifs ou automatiser la transition design-développement.

Quand l'éviter

Pour la manipulation interactive de fichiers Figma ou lorsque l'API Figma n'est pas suffisante (par exemple, modifications complexes de la structure du fichier).

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

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

File Keys

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

Commands

User Info

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

Files & Projects

# 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

# 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

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

# 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.

Intégration Figma

Recommandé pour