Name: Figma Design to Code
Author: Figma

Figma Design to Code

Transformez des frames Figma en code de production avec le serveur MCP officiel de Figma.

Officielle de l'éditeurpar FigmaVérifié le 18 octobre 2026

Installez Figma Design to Code gratuitement

Laissez votre email et les étapes d'installation s'ouvrent ici même : un prompt à coller dans votre outil d'IA. Valable pour les 149 skills.

La skill officielle de Figma pour transformer un design Figma en code via son serveur MCP. Elle indique à Claude comment récupérer le bon contexte de design, l'associer à vos composants et vérifier le résultat par rapport à la frame d'origine.

Pour qui

Développeurs frontend
Designers qui codent
Équipes produit

Prompts à essayer

Une fois la skill installée, demandez le résultat avec vos mots. Votre outil d'IA utilise la skill tout seul.

Prompt 1

Implémente cette frame Figma en composant React : <figma link>

Prompt 2

Construis la page de tarifs depuis notre fichier Figma avec nos composants de bouton existants

Prompt 3

Transforme cet écran mobile Figma en SwiftUI

Comment l'installer

Les skills suivent le standard ouvert Agent Skills, celle-ci n'est donc pas liée à une seule entreprise. Choisissez l'outil d'IA que vous utilisez. Vous hésitez ? Le premier onglet couvre la plupart d'entre eux en une étape.

Le plus simple : collez ceci dans votre outil d'IA

Installe cette skill pour qu'elle fonctionne dans tous mes projets : exécute `npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g -y` dans mon terminal. S'il manque Node.js, explique-moi d'abord comment l'installer. Une fois terminé, confirme que la skill est installée et dis-moi comment commencer à l'utiliser.

Ou faites-le vous-même :

Une seule commande installe la skill dans les outils d'IA de votre ordinateur. Elle détecte ceux que vous avez et vous demande où l'ajouter : Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode et plus de 60 autres.

$npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g

Node.js doit être installé (gratuit, sur nodejs.org). L'option -g rend la skill disponible dans tous vos projets.

Bon à savoir : Le plugin Figma regroupe d'autres skills, dont l'écriture sur le canevas, les design systems, FigJam et Slides.

Débloquez les étapes d'installation

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes d'installation des 149 skills, et recevez chaque mois les meilleures nouvelles skills.

Comment nous l'avons vérifié

Nous avons vérifié la skill à sa source d'origine le 18 octobre 2026 : le SKILL.md est au bon endroit, les fichiers ont été mis à jour au cours de l'année et la licence autorise son usage. Nous ne l'avons pas encore testée sur une tâche.