Skip to main content

De Figma à un code au pixel près

Connectez le MCP Figma et laissez Devin extraire les design tokens, créer les composants et vérifier visuellement le résultat par rapport à vos maquettes.
AuthorCognition
CategoryDéveloppement de fonctionnalités
FeaturesMCP
1

Connecter le MCP Figma

Avant que Devin puisse lire vos maquettes, il doit avoir accès à vos fichiers Figma via le Figma MCP. Une fois connecté, le MCP est disponible pour tous les membres de votre organisation — n’importe quel membre de l’équipe peut ajouter des fichiers Figma dans ses sessions avec Devin.
  1. Dans Figma, cliquez sur votre icône de profil > Settings > Security
  2. Sous Personal access tokens, cliquez sur Generate new token
  3. Accordez-lui au minimum les autorisations read sur File content et Dev resources
  4. Copiez le token
  5. Dans Devin, allez dans Settings > MCP Marketplace, trouvez Figma et cliquez sur Enable
  6. Collez votre token lorsque vous y êtes invité
Envisagez de créer un compte Figma dédié pour Devin (par exemple, devin@yourcompany.com) avec un accès en lecture à vos fichiers de conception. Cela évite de lier le MCP à un compte personnel et facilite la gestion des accès à mesure que votre équipe grandit.
Une fois connecté, Devin peut lire n’importe quel fichier Figma que vous lui indiquez — en extrayant les hiérarchies de composants, les couleurs, les espacements, la typographie et les contraintes de mise en page directement à partir du design.
2

Partagez un lien de design et envoyez un prompt à Devin

Collez l’URL d’un fichier Figma dans votre prompt en précisant ce que vous voulez implémenter. Soyez précis sur les frames à réaliser et les parties de votre codebase à utiliser.Ce qui fait un bon prompt Figma :
  • Mettre le lien du fichier Figma spécifique (et non uniquement le projet)
  • Nommer précisément le frame ou la page dans le fichier — les gros fichiers peuvent avoir des dizaines de pages
  • Faire référence à votre bibliothèque de composants existante et à votre framework CSS
  • Mentionner où se trouvent les design tokens (par exemple, tailwind.config.ts, src/tokens/)
  • Spécifier le chemin de fichier cible pour les nouveaux composants
Si vous vous surprenez à répéter le même contexte d’une session à l’autre (par exemple, “toutes les nouvelles pages vont dans src/app/” ou “nous utilisons les primitives Radix UI”), donnez ce retour à Devin et il proposera automatiquement de l’enregistrer comme Knowledge — ainsi vous n’aurez pas à le répéter la prochaine fois.
3

Devin extrait, construit et vérifie

Devin lit le fichier Figma via le MCP, fait correspondre les propriétés de design à votre base de code, implémente les composants, puis ouvre le navigateur pour vérifier visuellement le résultat.
  1. Lit le fichier Figma — Récupère l’arborescence des composants, les design tokens (couleurs comme #6366F1, espacements comme 24px), la typographie (Inter, 18px/28px, graisse 500) et les propriétés d’auto-layout à partir de la frame spécifiée
  2. Fait correspondre les tokens à votre système — Fait correspondre les couleurs Figma à vos tokens Tailwind les plus proches (par exemple, #6366F1 → indigo-500) et utilise votre échelle d’espacement au lieu de coder en dur des valeurs en pixels
  3. Construit les composants — Crée des composants React qui suivent vos patterns existants, en réutilisant des composants partagés comme <Card> et <Button> lorsque le design correspond
  4. Vérifie dans le navigateur — Démarre votre serveur de développement, navigue vers localhost:3000/pricing et compare visuellement le résultat au design Figma sur plusieurs tailles d’écran
  5. Prend des captures d’écran et des enregistrements d’écran — Devin prend des captures d’écran pleine page aux breakpoints desktop, tablette et mobile, et enregistre une vidéo d’écran en faisant défiler la page et en interagissant avec les états de survol. Il les partage directement dans la session pour que vous puissiez vérifier le résultat visuellement — inutile de récupérer la branche et de l’exécuter vous‑même.
  6. Partage les preuves partout — Devin joint les captures d’écran et les enregistrements à la pull request (PR) afin que les relecteurs puissent voir le résultat visuel sans récupérer le code. Si vous avez connecté Slack, Devin peut également les publier dans un canal pour que votre équipe design puisse les examiner sans quitter Slack.
  7. Ouvre une PR — Soumet l’implémentation avec la preuve visuelle jointe en plus des modifications de code
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

Examinez la PR avec Devin Review

Une fois que Devin a ouvert la PR, utilisez Devin Review pour examiner l’implémentation. Devin Review peut détecter les écarts visuels, les breakpoints responsive manquants et les composants qui ne respectent pas votre design system.Si quelque chose doit être ajusté — espacement incorrect, état de survol manquant, couleurs qui ne correspondent pas — laissez un commentaire directement sur la PR et Devin s’en occupera. Inutile d’ouvrir une nouvelle session ou de rédiger un prompt séparé.