> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# De Figma à un code pixel perfect

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="De Figma à un code au pixel près" description="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." prompt="Implémentez la page de tarification à partir de ce fichier Figma : https://figma.com/file/abc123/Pricing-Page. Concentrez-vous sur le frame « Pricing Section » de la page « Marketing ». Il comporte un bloc titre + sous-titre, 3 cartes de niveaux de tarification (Free, Pro, Enterprise) avec des listes de fonctionnalités, un tableau de comparaison sous les cartes, et une mise en page mobile où les cartes sont empilées verticalement et le tableau devient défilable. Utilisez notre configuration Tailwind dans tailwind.config.ts pour les couleurs et les espacements. Réutilisez les composants Card et Button existants depuis src/components/ui/. La page doit être une nouvelle route à src/app/pricing/page.tsx. Après l’implémentation, lancez le serveur de développement et prenez des captures d’écran en pleine page sur desktop (1440px), tablette (768px) et mobile (375px). Enregistrez une capture vidéo de l’écran en faisant défiler la page et en interagissant avec les états de survol. Partagez les captures d’écran et l’enregistrement dans la session. Joignez-les à la pull request (PR) pour que les reviewers puissent voir le résultat visuel. N’ouvrez pas la PR tant que l’implémentation ne correspond pas au design Figma." category="Développement de fonctionnalités" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>Vous ne souhaitez pas effectuer cette configuration manuellement ? Collez un lien vers cette page dans une session Devin et demandez-lui de tout configurer pour vous.</Tip>

  <Steps>
    <Step title="Connecter le MCP Figma">
      Avant que Devin puisse lire vos maquettes, il doit avoir accès à vos fichiers Figma via le [Figma MCP](/fr/work-with-devin/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 > Connections > MCP servers**, trouvez **Figma** et cliquez sur **Enable**
      6. Collez votre token lorsque vous y êtes invité

      <Tip>
        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.
      </Tip>

      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.
    </Step>

    <Step title="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.

      <PromptBlock>
        ```txt Implémenter la page de tarification depuis Figma theme={null}
        Implémente la page de tarification à partir de ce fichier Figma :
        https://figma.com/file/abc123/Pricing-Page

        Concentre-toi sur le frame "Pricing Section" de la page "Marketing". Il contient :
        - Un bloc titre + sous-titre
        - 3 cartes de niveaux de tarification (Free, Pro, Enterprise) avec leurs listes de fonctionnalités
        - Un tableau de comparaison sous les cartes
        - Mise en page mobile : les cartes sont empilées verticalement, le tableau devient défilable

        Utilise notre configuration Tailwind dans tailwind.config.ts pour les couleurs et les espacements.
        Réutilise les composants Card et Button existants depuis src/components/ui/.
        La page doit être une nouvelle route à src/app/pricing/page.tsx.

        Après l’implémentation, lance le serveur de développement et vérifie le résultat :
        - Prends des captures d’écran pleine page sur desktop (1440px), tablette (768px)
          et mobile (375px)
        - Enregistre une capture vidéo faisant défiler la page et
          interagissant avec les états de survol
        - Partage les captures d’écran et l’enregistrement avec moi dans la session
        - Attache-les au PR pour que les reviewers puissent voir le résultat visuel
        - N’ouvre pas le PR tant que l’implémentation ne correspond pas au design Figma
        ```
      </PromptBlock>

      **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](/fr/product-guides/knowledge) — ainsi vous n’aurez pas à le répéter la prochaine fois.
    </Step>

    <Step title="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
      ```
    </Step>

    <Step title="Examinez la PR avec Devin Review">
      Une fois que Devin a ouvert la PR, utilisez [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) 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é.
    </Step>
  </Steps>
</div>