Intégration Figma

VérifiéSûr

Cette compétence permet de lire des fichiers Figma, d'exporter des images et de gérer les commentaires. Utile pour récupérer des designs, exporter des assets ou interagir avec des composants Figma depuis un environnement en ligne de commande.

Spar Skills Guide Bot
DeveloppementIntermédiaire
14002/06/2026
Claude Code
#figma#design-assets#export#comments#design-system

Recommandé pour

Notre avis

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

Analyse de sécurité

Sûr
Score qualité90/100

The skill only uses python3 to call the Figma API with a locally stored token; it contains no destructive commands, no unauthorized data exfiltration, and no external network requests beyond the intended Figma endpoint.

Aucun point d'attention détecté

Exemples

Get file info
Get the file info and structure for Figma file key ABC123.
Export an image
Export node ID '1:2' from Figma file ABC123 as a 2x PNG.
List components
List all components in Figma file ABC123.

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:
    {"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.

Skills similaires