Figma для разработчика

Верстать по макету — значит «читать» Figma как спецификацию: размеры, отступы, цвета, токены. Разбираем, что именно смотрит фронтендер в макете и как это переносится в CSS.

Что вытаскиваем из макета

• размеры блока: width/height, border-radius, отступы (padding/margin);
• типографику: font-size, line-height, weight, letter-spacing;
• цвета и градиенты — hex/oklch с копированием в один клик;
• auto layout — аналог flexbox: направление, gap, выравнивание.

/* Auto Layout (direction: column, gap: 8) → CSS: */
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Design tokens

Токены — переменные дизайн-системы: цвета, шрифты, отступы живут в одном месте и экспортируются в CSS:

/* tokens из Figma → style.css */
:root {
  --color-bg: #fafaf9;
  --color-accent: #6366f1;
  --space-2: 8px;
  --radius-md: 12px;
}