From Figma to EVA CSS

Guide for creating an EVA CSS project from a Figma design via MCP (Model Context Protocol).

Prerequisites

MCP Desktop

Recommended option

  1. Open Figma Desktop
  2. Enable Dev Mode (Shift+D)
  3. Enable desktop MCP server
claude mcp add figma-desktop http://127.0.0.1:3845/mcp

MCP Remote

Cloud alternative

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

MCP Tools

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

Workflow

Step 1

Figma Extraction

Extract via MCP: layout, HEX colors, dimensions (width, height, gap, padding), font sizes.

Step 2

Size Analysis

Identify: gaps, paddings, dimensions, border radius.

Step 3

Color Conversion

HEX → OKLCH

npx eva-color convert "#FF00FB"

brand, accent, extra, dark, light

Step 4

Project Setup

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

SCSS Config

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

OKLCH Theme

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

EVA Variables

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

Compilation

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

HTML

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

Important rules

Rule 1

No fixed values

Always var(--XX), never XXpx

Rule 2

Respect Figma

If Figma uses --120__, use var(--120__)

Rule 3

buildClass: false

Semantic CSS using EVA variables

Rule 4

Loop on repetitions

If a Figma element contains "loop", iterate

Live Demo: Ulysse Project

Open Ulysse

View the complete Figma to EVA CSS integration

Open project →

Figma Design

Compare with the original design

View on Figma →

Config used

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