Figma: інструмент дизайну для розробників
Figma -- хмарний інструмент UI/UX дизайну, що став стандартом індустрії. Для розробників Figma важлива як джерело специфікацій, ассетів та дизайн-токенів. Dev Mode дозволяє інспектувати елементи, копіювати CSS-код, вимірювати відступи та експортувати графіку без доступу до редагування.
Ключові концепції
- Frame: контейнер (аналог div)
- Component: переиспользовуваний елемент
- Variant: стан компонента (hover, active)
- Auto Layout: аналог CSS Flexbox
- Constraints: правила адаптивності
- Design Token: кольори, шрифти, spacing
Figma vs Code
- Auto Layout = display: flex
- Fill = flex: 1 / width: 100%
- Hug = width: fit-content
- Fixed = width: 200px
- Gap = gap (CSS)
- Padding = padding (CSS)
Компоненти, варіанти та Auto Layout
Компоненти у Figma -- аналог компонентів у React: головний (main) та інстанси (instances). Варіанти дозволяють одному компоненту мати різні стани: default, hover, active, disabled, різні розміри (S, M, L). Auto Layout працює як CSS Flexbox: вертикальне або горизонтальне вирівнювання елементів з автоматичними відступами. Розуміння Auto Layout -- ключ до точної верстки з макету.
Dev Mode, Inspect та експорт ассетів
Dev Mode -- окремий режим для розробників з CSS-специфікаціями кожного елемента. Inspect показує розміри, кольори, шрифти, відступи та CSS-код. Ассети експортуються у SVG, PNG (1x, 2x, 3x), WebP та PDF. Figma Tokens плагін генерує JSON з дизайн-токенами для CSS custom properties або Tailwind config. Prototype mode демонструє інтерактивні переходи між екранами.
Корисні плагіни для розробників
Figma to Code (HTML/Tailwind/React), Figma Tokens (дизайн-токени в JSON), Iconify (іконки), Lorem Ipsum (текст-заповнювач), Inspect (покращений CSS-вивід), Anima (експорт у React/Vue/HTML).
Про тест
Тест містить 20 питань про Auto Layout, компоненти та варіанти, Dev Mode, Inspect, дизайн-токени, constraints, прототипування, експорт ассетів та командну роботу у Figma.