De Figma à EVA CSS

Guide pour créer un projet EVA CSS à partir d'un design Figma via MCP (Model Context Protocol).

Prérequis

MCP Desktop

Option recommandée

  1. Ouvrir Figma Desktop
  2. Activer Dev Mode (Shift+D)
  3. Activer le serveur MCP desktop
claude mcp add figma-desktop http://127.0.0.1:3845/mcp

MCP Remote

Alternative cloud

claude mcp add figma https://mcp.figma.com/mcp

Outils MCP

  • get_figma_data - Layout, styles
  • get_variable_defs - Variables
  • download_figma_images - SVG/PNG
  • get_screenshot - Capture

Workflow

Étape 1

Extraction Figma

Extraire via MCP : layout, couleurs HEX, dimensions (largeur, hauteur, gap, padding), tailles de police.

Étape 2

Analyse des tailles

Identifier : gaps, paddings, dimensions, border radius.

Étape 3

Conversion couleurs

HEX → OKLCH

npx eva-color convert "#FF00FB"

brand, accent, extra, dark, light

Étape 4

Création projet

projects/NAME/
├── index.html
├── styles/NAME.scss
└── render/NAME.css
Étape 5

Config SCSS

@use 'eva-css-fluid' with (
  $sizes: (...),
  $font-sizes: (...),
  $build-class: false
);
Étape 6

Thème OKLCH

.theme-NAME {
  --brand-lightness: XX%;
  --brand-chroma: X.XXX;
  --brand-hue: XXX.XX;
}
Étape 7

Variables EVA

  • var(--64) / var(--64_) / var(--64__)
  • var(--fs-120) / var(--fs-120_)
  • var(--brand) / var(--brand-d) / var(--brand-b)
Étape 8

Compilation

npx sass --load-path=node_modules styles/NAME.scss:render/NAME.css
Étape 9

HTML

<body class="current-theme theme-NAME">

Règles importantes

Règle 1

Pas de valeurs fixes

Toujours var(--XX), jamais XXpx

Règle 2

Respecter Figma

Si Figma utilise --120__, utiliser var(--120__)

Règle 3

buildClass: false

CSS sémantique avec les variables EVA

Règle 4

Loop sur répétitions

Si un élément Figma contient « loop », itérer

Démo en direct : projet Ulysse

Ouvrir Ulysse

Voir l'intégration Figma vers EVA CSS complète

Ouvrir le projet →

Design Figma

Comparer avec le design original

Voir sur Figma →

Config utilisée

$sizes: 4, 8, 16, 32, 54, 64, 120, 141;
$font-sizes: 10, 16, 36, 120;
#00d4ff → oklch(84.1% 0.155 200.4)