# Figma To Code > Figma → Code (Pixel-Perfect) - Skill: `leandrodslv/figma-to-code` (Agent Skill) - Install (CLI): `npx skillmds@latest add leandrodslv/figma-to-code` - Raw SKILL.md: https://api.skillmd.com/api/skills/leandrodslv/figma-to-code/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: leandrodslv (https://skillmd.com/u/leandrodslv) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/leandrodslv/figma-to-code --- # Figma → Code (Pixel-Perfect) Convertit n'importe quelle frame ou composant Figma en code production-ready via le MCP Figma (`get_design_context`). Supporte HTML/CSS vanilla, React + Tailwind, React + CSS Modules, Vue. --- ## Étape 0 — Prérequis Avant de commencer, s'assurer d'avoir : 1. **Un lien Figma** avec un `node-id` dans l'URL - Format : `https://www.figma.com/design/FILEKEY/nom?node-id=123-456` - Si pas de `node-id` → appeler `get_metadata` pour lister les pages et demander à l'utilisateur de sélectionner un nœud 2. **Le format de sortie souhaité** — si non précisé, demander : - HTML/CSS vanilla (défaut) - React + Tailwind - React + CSS Modules - Vue 3 + CSS Si le lien est fourni sans `node-id`, utiliser `get_metadata` pour explorer la structure et guider l'utilisateur. --- ## Étape 1 — Extraire le contexte Figma ### Appel principal ``` Figma:get_design_context({ fileKey: "", nodeId: "", clientFrameworks: "html,css" | "react" | "vue", clientLanguages: "html,css" | "javascript,typescript" }) ``` Cet appel retourne : - **`code`** : code de référence généré par Figma (point de départ, à adapter) - **`screenshot`** : image du design (vérité visuelle — s'y référer en priorité) - **`metadata`** : structure des nœuds, propriétés, dimensions ### Si les variables de design sont importantes ``` Figma:get_variable_defs({ fileKey: "", nodeId: "" }) ``` Retourne les tokens de design (couleurs, espacements, typographie) → les transformer en variables CSS ou tokens JS. ### Si la structure est complexe ``` Figma:get_metadata({ fileKey: "", nodeId: "" }) ``` Pour obtenir l'arbre des nœuds enfants et leur hiérarchie. --- ## Étape 2 — Analyser le design À partir du screenshot et des métadonnées, identifier : ### Structure visuelle - Quelles sont les **sections principales** ? (header, hero, cards, footer...) - Quel est le **layout** de chaque section ? (flex row, flex column, grille...) - Y a-t-il des **composants réutilisables** ? (boutons, badges, avatars...) ### Propriétés CSS à extraire | Propriété Figma | CSS équivalent | |-----------------|----------------| | Fill (solid) | `background-color` / `color` | | Fill (gradient) | `background: linear-gradient(...)` | | Font name + size + weight | `font-family` + `font-size` + `font-weight` | | Line height | `line-height` | | Letter spacing | `letter-spacing` | | Corner radius | `border-radius` | | Stroke | `border` | | Drop shadow | `box-shadow` | | Auto layout (horizontal) | `display: flex; flex-direction: row` | | Auto layout (vertical) | `display: flex; flex-direction: column` | | Gap | `gap` | | Padding | `padding` | | Opacity | `opacity` | | Blend mode | `mix-blend-mode` | ### Couleurs Extraire en hex depuis les fills Figma (r, g, b sont en 0–1 → multiplier par 255 → convertir en hex). --- ## Étape 3 — Générer le code ### FORMAT : HTML/CSS Vanilla Structure à respecter : ```html [Nom du design]

``` ### FORMAT : React + Tailwind ```jsx // [ComponentName].jsx // Extrait depuis Figma : [frame name] export default function [ComponentName]() { return (

Titre

{/* ... */}

); } ``` Pour les valeurs non-standard Tailwind, utiliser les classes arbitraires : `w-[347px]`, `text-[#1a1a2e]`, `rounded-[12px]`. ### FORMAT : React + CSS Modules ```jsx // [ComponentName].jsx import styles from './[ComponentName].module.css'; export default function [ComponentName]() { return (

Titre

); } ``` ```css /* [ComponentName].module.css */ .container { display: flex; flex-direction: column; width: [X]px; background-color: #[hex]; border-radius: [X]px; padding: [X]px; gap: [X]px; } .title { font-family: '[Font]', sans-serif; font-size: [X]px; font-weight: [W]; color: #[hex]; line-height: [X]; } ``` --- ## Étape 4 — Règles de fidélité ### Toujours respecter 1. **Les dimensions exactes** en px depuis Figma (width, height, padding, gap) 2. **Les couleurs exactes** converties depuis les fills Figma 3. **La hiérarchie des nœuds** → structure HTML imbriquée identique 4. **Les fonts** — chercher l'équivalent Google Fonts si la font Figma n'est pas disponible sur le web 5. **Le screenshot** est la référence visuelle absolue — si le code généré par Figma diverge du screenshot, se fier au screenshot ### Gestion des cas spéciaux | Cas Figma | Traitement code | |-----------|-----------------| | Image fill | `` avec `object-fit: cover` ou `background-image` | | Icône SVG | Copier le SVG inline ou créer un `` - Hiérarchie `

` → `

` respectée - `role` et `aria-label` sur les éléments interactifs sans texte visible - Contraste suffisant (signaler si une couleur Figma ne passe pas le WCAG AA) --- ## Étape 6 — Livraison ### Format de réponse ``` ✅ Code généré depuis : "[Nom de la frame Figma]" Format : [HTML/CSS | React + Tailwind | React + CSS Modules | Vue] Dimensions : [W]×[H]px Fonts utilisées : [liste] Couleurs extraites : [palette hex] [code dans un artifact] ⚠️ Points d'attention : - [Font X] n'est pas sur Google Fonts → remplacée par [Font Y] - [Image Y] → placeholder, remplacer par la vraie image - [Element Z] → comportement interactif à implémenter ``` ### Si le design est très large (page entière) Découper en sections et générer section par section : 1. Confirmer la découpe avec l'utilisateur 2. Générer section 1, demander validation 3. Continuer jusqu'à la page complète 4. Assembler le tout dans un fichier final --- ## Workflow résumé ``` Lien Figma fourni ↓ get_design_context (screenshot + code de référence) ↓ Analyser screenshot + métadonnées ↓ Identifier layout, couleurs, fonts, composants ↓ Générer code dans le format demandé ↓ Livrer dans un artifact avec points d'attention ```