CSS pour les graphistes : la mise en page que je comprends enfin

Pendant longtemps, le CSS me semblait aléatoire. Un div qui ne se centre pas, une image qui déborde, une marge qui apparaît de nulle part… Et puis j'ai eu le déclic : le CSS *est* du design, juste exprimé autrement. Depuis ce jour-là, je code mes interfaces avec le même plaisir que je les dessine sur Figma.

Flexbox = le monde de Figma Auto Layout

Si vous venez de Figma et que vous utilisez Auto Layout, vous connaissez déjà Flexbox. La logique est exactement la même : un conteneur parent qui définit la direction, l'alignement et l'espacement de ses enfants.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Dans Figma, le "gap", c'est l'espacement entre les éléments en Auto Layout. Le justify-content: space-between c'est le mode "Space between" de votre frame. Le align-items: center, c'est l'alignement vertical au centre. Vous voyez la parallèle ?

CSS Grid : la mise en page en deux dimensions

Là où Flexbox gère une direction à la fois (ligne ou colonne), CSS Grid travaille en deux dimensions simultanément. C'est idéal pour les layouts complexes : galeries, grilles de cartes, mises en page avec sidebar.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Ce code crée une grille de 3 colonnes de largeur égale avec 24px d'espacement — l'équivalent d'une grille Figma à 3 colonnes. Pour des layouts responsives, utilisez auto-fill avec minmax() :

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

Les cartes se réorganisent automatiquement selon l'espace disponible. Plus besoin de media queries uniquement pour la grille.

Les unités CSS : rem, em, vw, vh

Les unités CSS ont de quoi perdre un graphiste habitué aux pixels. Voici la logique :

• ▸px : valeur absolue, indépendante du contexte. À éviter pour les tailles de texte.
• ▸rem : relatif à la taille de police de la balise (généralement 16px). 1rem = 16px. Utilisez-le pour les tailles de texte et les espacements.
• ▸em : relatif à la taille de police de l'élément *parent*. Utile pour les composants auto-suffisants.
• ▸% : relatif à l'élément parent. Idéal pour les largeurs (width: 100%).
• ▸vw / vh : relatif à la largeur / hauteur de la fenêtre. Parfait pour les sections plein écran.

h1 { font-size: 3rem; }       /* 48px si la base est 16px */
.hero { min-height: 100vh; }  /* Hauteur plein écran */
.container { max-width: 80%; }

Les variables CSS, comme les styles Figma

Tout comme vous définissez vos couleurs dans Figma, vous pouvez le faire en CSS. Ces variables se comportent exactement comme les Color Styles ou Variables de Figma :

:root {
  --couleur-principale: #0D00FF;
  --couleur-accent: #D6FF79;
  --couleur-texte: #1a1a1a;
  --espacement-base: 16px;
  --rayon-bord: 8px;
}

.bouton { background-color: var(--couleur-principale); border-radius: var(--rayon-bord); padding: var(--espacement-base); } ```

L'avantage : si votre client change sa couleur principale, vous n'avez qu'une ligne à modifier. Exactement comme changer un style global dans Figma.

Typographie : les mêmes règles qu'en print

font-size, line-height, letter-spacing, font-weight… ce sont exactement les propriétés typographiques que vous utilisez dans Illustrator ou InDesign. La terminologie change légèrement, mais la logique est identique.

body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--couleur-texte);
}

h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } ```

En design print, on parle d'interlignage et de crénage. En CSS, c'est line-height et letter-spacing. Même concept, autre syntaxe.

Les transitions et animations : donner vie à vos interfaces

C'est là que le CSS devient vraiment magique pour les graphistes. Les transitions CSS, c'est l'équivalent du "Smart Animate" de Figma.

.bouton {
  background-color: var(--couleur-principale);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.bouton:hover { background-color: #0a00cc; transform: translateY(-2px); } ```

Ce code crée un bouton qui change de couleur et remonte légèrement au survol, avec une transition fluide de 0.2 secondes. En Figma, vous auriez créé deux variantes et un Smart Animate entre elles.

Le responsive design : pensez mobile d'abord

Le mobile-first est la méthode recommandée : vous codez d'abord pour mobile, puis vous ajoutez des styles pour les écrans plus larges via des media queries.

/* Mobile par défaut */
.container {
  padding: 16px;
}

/* Tablette et + */ @media (min-width: 768px) { .container { padding: 32px; } }

/* Desktop */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; padding: 48px; } } ```

Dans Figma, vous créez plusieurs frames (Mobile, Tablet, Desktop). En CSS, les media queries jouent ce même rôle de seuils de rupture.

Tailwind CSS : le pont entre design et code

Si vous cherchez un framework CSS qui parle la même langue que Figma, Tailwind CSS est fait pour vous. Au lieu d'écrire du CSS classique dans un fichier séparé, vous appliquez des classes utilitaires directement dans votre HTML :

<button class="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors">
  Voir mes projets
</button>

Les valeurs sont tirées d'une échelle prédéfinie (spacing, couleurs, typographie), exactement comme un design system. Ce portfolio est d'ailleurs construit avec Tailwind CSS v4 — et le résultat parle de lui-même.

Mon conseil

Ouvrez Figma et votre éditeur de code côte à côte. Dessinez quelque chose sur Figma, puis essayez de le reproduire en CSS. C'est l'exercice le plus efficace que j'ai trouvé pour progresser rapidement.

Commencez par une carte simple (image, titre, bouton), puis complexifiez : une navbar responsive, une grille de projets. Chaque exercice vous fera voir le lien entre les propriétés Figma et leurs équivalents CSS — et à un moment, le déclic se fait. Vous commencez à *penser* les deux en même temps.