Figma давно стала стандартом для UI-дизайна, но многие веб-разработчики до сих пор работают с ней неэффективно: не знают про autolayout, компоненты, варианты и dev-режим. В этой статье — практическое руководство по Figma именно для разработчиков.

Ключевые функции для разработчика

  • Dev Mode: инспекция кода, измерения, экспорт ресурсов.
  • Auto Layout: понимание структуры и адаптивности.
  • Components & Variants: единообразие компонентов.
  • Styles: цвета, шрифты, тени — легко переносятся в CSS.
  • Plugins: экспорт в HTML/CSS, генерация ассетов.

Что важно проверять в макете

  1. Размеры и отступы кратны 4 или 8px.
  2. Все состояния элементов (hover, focus, active, disabled).
  3. Адаптивные версии (desktop, tablet, mobile).
  4. Реальные шрифты и их веса.
  5. Экспортированные ассеты в нужных форматах (SVG, PNG, WebP).

Полезные плагины

  • Figma to Code — генерация HTML/CSS/JS.
  • Remove BG — удаление фона у изображений.
  • Content Reel — заполнение макетов контентом.
  • Iconify — тысячи иконок.

Заключение

Эффективная работа в Figma ускоряет разработку и снижает количество ошибок при верстке. В студии Dikl дизайнеры и разработчики работают в единой Figma-системе.