Implémenter un design Figma en React avec Brique

Contexte

Vous avez un design Figma (une page, un écran, une flow complète) et vous voulez le transformer en composants React shadcn/ui production-ready. Brique orchestre la conversion automatique, respecte votre design system et génère du code prêt à intégrer.

Prérequis

URL Figma valide (Dev Mode activé, lien shareable)
Accès à Figma MCP configuré : claude mcp add --transport http figma https://mcp.figma.com/mcp
Ou via install.sh : ./install.sh --with-figma-mcp
Projet React/Vue configuré avec Tailwind + shadcn/ui
Fichier components.json existant (généré par shadcn/ui init)
Optionnel : design-system-rules.json pour fidélité maximale

Étapes

1. Générer les design system rules (une fois par projet)

/figma-create-design-system-rules

Cette skill Figma crée un mapping design-system-rules.json :

Couleurs Figma → tokens Tailwind
Spacing Figma → classes Tailwind
Composants Figma → composants shadcn/ui
Auto-layout patterns → Flexbox classes

Brique chargera ce fichier automatiquement en Phase 0.

2. Invoquer Brique avec l’URL Figma

/ulk:brique https://www.figma.com/design/xxxxx/Project-Name?node-id=1234%3A5678
# ou simplement
figma-shadcn https://www.figma.com/design/xxxxx/Project-Name

3. Phase 1 : Diagnostic

Brique scanne le design :

🔍 Brique — Figma → shadcn/ui
━━━━━━━━━━━━━━━━━━━━━━━━━━━

URL Figma       : https://...
Design System   : Détecté (design-system-rules.json ✅)
Composants      : 12 components & variants détectés
Layout type     : Auto-layout (Flexbox-compatible)
Colors used     : 8 (mapped to Tailwind via rules)

Stack détecté   : React 19 + Tailwind 3 + shadcn/ui v2
Cible           : Components + CSS-in-JS avec cn()

4. Phase 2-5 : Transformation automatique

Brique appelle /figma-implement-design [url] en interne (skill Figma officielle) :

Extrait le design en React + Tailwind
Applique les design system rules
Remplace les classes Tailwind par des composants shadcn/ui
Génère des variantes (hover, focus, disabled)
Teste la parité visuelle

Étapes internes :

get_design_context → React/Tailwind représentation
Appliquer design-system-rules.json pour mapping couleurs et spacing
Invoquer shadcn MCP pour suggestérer les composants appropriés
Générer le code final + stories Storybook
Créer des tests snapshot visuels

5. Phase 6 : Output

Brique retourne :

📦 Résultat — Composants générés
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

components/
├── HeroSection.tsx
│   └── Props bien typées (TypeScript)
│   └── Variantes (size, variant)
├── CTAButton.tsx
│   └── Utilise shadcn/ui Button + cn()
├── FeatureCard.tsx
│   └── Composants nestés pour réusabilité
└── index.ts

tests/
├── HeroSection.test.tsx
└── CTAButton.test.tsx

Storybook/
├── HeroSection.stories.tsx
└── CTAButton.stories.tsx

6. Phase 7 : Intégration

Brique guide l’intégration :

# 1. Copier les composants
cp components/*.tsx src/components/custom/

# 2. Installer les shadcn/ui components manquants
npx shadcn-ui add button card dialog
# (Brique suggère les exact packages nécessaires)

# 3. Vérifier les imports
# (Brique crée un checklist)

# 4. Tester visuellement
npm run storybook

Exemple de sortie

HeroSection.tsx (généré) :

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

interface HeroSectionProps {
  title: string
  subtitle?: string
  ctaText?: string
  variant?: 'default' | 'dark'
  size?: 'sm' | 'md' | 'lg'
}

export function HeroSection({
  title,
  subtitle,
  ctaText = 'Get Started',
  variant = 'default',
  size = 'md'
}: HeroSectionProps) {
  return (
    <section className={cn(
      'relative w-full py-20 px-6',
      variant === 'dark' && 'bg-slate-900 text-white',
      size === 'lg' && 'py-32'
    )}>
      <div className="mx-auto max-w-3xl text-center">
        <h1 className="text-4xl font-bold tracking-tight">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-4 text-lg text-gray-600">
            {subtitle}
          </p>
        )}
        <Button size="lg" className="mt-8">
          {ctaText}
        </Button>
      </div>
    </section>
  )
}

Variantes

Variante A : Code HTML/Tailwind existant — tw2shad [code] convertit du HTML/Tailwind en shadcn/ui sans Figma
Variante B : Figma + Code Connect — Après génération, lancez figma-code-connect pour lier les composants Figma aux composants code
Variante C : Design System complet — figma-generate-library crée un design system Figma entier (composants + tokens + documentation)

Agents enchaînés

Flux typique :

brique (frontend/01)
  ├─ /figma-implement-design [url]
  │   └─ Skill Figma officielle : design → code
  ├─ shadcn MCP (conseil composants)
  │   └─ Recommend Button, Card, Dialog, etc.
  └─ Output : HeroSection.tsx + stories + tests

Post-intégration optionnel :

vision (05) ─→ Audit visuel vs design Figma
perf-auditor (07) ─→ Optimiser bundle size du design

Troubleshooting

Symptôme	Cause probable	Résolution
”Figma MCP not configured”	`claude mcp add figma ...` jamais lancé	Relancez `./install.sh --with-figma-mcp` ou ajoutez manuellement
”design-system-rules.json not found”	Rules jamais générées	Lancez `figma-create-design-system-rules` une fois
Couleurs ne matchent pas le design Figma	Rules mal mappées ou règles Tailwind trop strictes	Éditez `design-system-rules.json` manuellement ou regénérez-le
Composants shadcn/ui manquants après génération	Installation incomplète	Lancez les commandes `npx shadcn-ui add` suggérées par Brique
Code généré trop volumineux ou mal structuré	Design Figma trop complexe ou mal organisé	Fragmentez en plusieurs artboards Figma + relancez par section

Voir aussi

./01-bruce-from-scratch.md — Démarrer un projet (contexte initial)
./04-brique-figma-to-code.md — Cette fiche (Figma → code)
./07-shadcn-migration.md — Migrer une UI existante vers shadcn/ui
agents/frontend/01-brique.md — Documentation complète de Brique
agents/_shared/figma-protocol.md — Protocole Figma pour tous les agents
Skill figma : /figma-implement-design [url] — Implémenter un design Figma complet