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).
За даними UXTools Design Tools Survey (2025), Figma використовують 80%+ дизайнерів у всьому світі, зробивши його стандартом індустрії після придбання Adobe. Dev Mode у Figma автоматично генерує CSS, Swift та Android-код з макетів, скорочуючи час передачі дизайну в розробку на 40-60%. Auto Layout та варіанти компонентів дозволяють створювати адаптивні дизайн-системи, де одна зміна оновлює сотні елементів. Знання Figma стало обов'язковим не лише для дизайнерів, а й для frontend-розробників.
Ключові навички розробника у Figma: інспекція стилів (кольори, шрифти, відступи), експорт ассетів (SVG, PNG, WebP), розуміння Auto Layout (аналог flexbox), робота з варіантами компонентів. Design tokens — спільна мова між дизайнерами та розробниками: кольори, типографіка, радіуси, тіні у форматі JSON. Плагіни Figma to Code (Locofy, Anima) генерують React/HTML-код з макетів, хоча результат потребує рефакторингу. Handoff-процес: дизайнер розставляє коментарі, розробник використовує Dev Mode для точних специфікацій.
Про тест
Тест містить 20 питань про Auto Layout, компоненти та варіанти, Dev Mode, Inspect, дизайн-токени, constraints, прототипування, експорт ассетів та командну роботу у Figma.
Також рекомендуємо: UX/UI дизайн, HTML та CSS, React та JavaScript.