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.

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 :

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

Les variables CSS, comme les styles Figma

Tout comme vous définissez vos couleurs dans Figma, vous pouvez le faire en CSS :

:root {
  --couleur-principale: #0D00FF;
  --couleur-accent: #D6FF79;
}

Typography : 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, mais la logique est identique.

Mon conseil

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