Архівний матеріал: розбір публікації від 2022-08-15. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.
Стаття розбирає підхід Крістін Валлауер до того, як дизайнерська робота в Figma перетинається з розробкою. Нижче — стиснутий практичний конспект саме з фокусом на тому, що корисно знати розробникам.
1. Компоненти, варіанти і props — як це зіставити з кодом
Компоненти та варіанти в Figma
В Figma дизайнери збирають інтерфейс з компонентів — повторно використовуваних блоків, які можуть вкладатися один в один. Це дозволяє будувати бібліотеки в дусі atomic design: кнопка як атом, картка як молекула, форма як організм.
Варіанти — це набір станів одного компонента (primary/secondary, hover/pressed/disabled тощо), які зібрані в один «component set». У дизайнера всі ці стани лежать в одному місці і перемикаються через панель властивостей.
Figma дозволяє робити варіанти багатовимірними — наприклад, по осях type=primary/secondary, state=default/hover/pressed, size=sm/md/lg.
Авторка звертає увагу на прийом: логічні властивості типу true/false або yes/no зручно використовувати як «тумблер» — наприклад, для перемикання light/dark мод. Такий підхід вона бачила в iOS 16 UI Kit для Figma від Joey Banks.
Component properties (props)
З весни 2022 в Figma є властивості компонентів: текстові props, props для підміни вкладених інстансів і toggle props. В одному компоненті їх можна комбінувати, наближаючи його до API React/Vue компонента.
Локальні бібліотеки і зовнішні
Компоненти і стилі можуть жити в одному файлі або в окремих бібліотеках, які підключаються в різні проєкти як «single source of truth». Для розробника це фактично UI-kit, який має бути синхронізований з кодовим дизайн-системою.
Як розробнику використати це зі своєї сторони
1.1. Вирівняйте структуру і назви з кодом
Ключова можливість — зробити так, щоб структура імен компонентів в Figma збігалася з кодом. Для цього потрібна спільна сесія: показати дизайнерам, як влаштована (або має бути влаштована) компонентна система в коді, які є пропси, стани, модифікатори.
1.2. Додавайте посилання на код прямо в компоненти
Figma дозволяє в документації компонента додати опис і URL (наприклад, на GitHub або Storybook). У вкладці Inspect для інстанса з'явиться кнопка з цим посиланням, а пошук по компонентах враховуватиме текст опису. Це простий спосіб зв'язати дизайн і код без окремого порталу.
1.3. Вбудовуйте Figma в документацію
Посилання на frame або файл Figma (Cmd + L) можна лайв-embed-нути в Notion, GitHub Docs та інші інструменти. Дизайн вбудовується як «живий» артефакт і автоматично оновлюється.
1.4. Тестові бібліотеки і Storybook
Якщо однакові за назвою стилі та компоненти існують у двох бібліотеках, Figma дає змогу їх масово підмінити. Це зручно для тестових середовищ: перевірити нову тему або оновлені компоненти в макеті до того, як вони потраплять у «мастер».
Для більш щільної інтеграції авторка згадує плагін Storybook Connect, який зв'язує інстанси в Figma з компонентами в Storybook.
Важливе застереження від авторки: повна синхронізація Figma з кодом вимагає часу і постійної підтримки. Має сенс робити це для масштабних дизайн-систем, а не для разового лендингу.
2. Стилі і токени — чому Figma «не дуже розумна» сама по собі
Що таке стилі в Figma
Дизайнери створюють окремі стилі для кольорів, тексту, сіток і ефектів (тінь, blur) і перевикористовують їх у макеті. На цьому «магія» закінчується — немає автоматичної документації, немає пов'язаних системних масштабів типу «базова гарнітура + модуль кроку».
Ще один нюанс — немає стилів для відступів. Спейсинг-система існує тільки як домовленість і ручні відстані.
Що просить розробник — токени
Окремо згадується плагін Figma Tokens. Через нього можна:
- описувати дизайн-токени (кольори, типографіку, спейсинг) прямо в Figma
- вирівнювати ці токени з токенами в коді
Документація плагіна: https://docs.figmatokens.com/, відео творця Jan Six: https://www.youtube.com/watch?v=zkLfw6Jb6WM.
3. Як Figma моделює responsive — auto layout, constraints, grid
Авторка докладно розбирає інструменти, якими дизайнери наближаються до responsive-поведінки:
- Auto layout — приблизний аналог flexbox
- Constraints — прив'язка елементів до сторін контейнера
- Grid — колоночні сітки на фреймах
Важливо для розробника: в Figma немає справжніх breakpoint-ів. Вона не може автоматично проганяти макет через «320/768/1024px» як браузер.
Auto layout і його обмеження
Auto layout задає відступи між елементами, padding контейнера, вирівнювання, resize-режим («hug content», fixed, «fill container»), дає можливість вкладати один auto layout в інший і автоматично підлаштовуватися під контент.
Головне обмеження, важливе розробнику: дизайнер не може задавати пропорційний розподіл типу «60% / 40%» між елементами всередині одного auto layout — Figma схильна рівномірно ділити простір. Щоб емулювати 60/40, один елемент фіксують, а другий розтягують.
Constraints, grid і їх комбінування
Constraints фіксують елемент щодо батьківського фрейма при його ресайзі — наприклад, «stick to left + top» або «center». На відміну від auto layout, constraints не враховують зміну контенту елемента, тільки зміну розміру фрейма.
На фрейм можна накинути grid: задати кількість колонок, gutter, відступи і поведінку при ресайзі. Цікава деталь: коли активна сітка, constraints «орієнтуються» по колонках як по системі координат, тому дизайнери можуть імітувати responsive, комбінуючи grid + constraints.
Але як тільки контент ускладнюється, вилазить обмеження, про яке прямо говорить авторка: margin і padding при ресайзі не адаптуються так, як це сталося б у CSS.
Повністю auto layout сторінки
Один з підходів дизайнерів — будувати цілі сторінки тільки через auto layout, інколи імітуючи grid (gutter як «space between»), інколи взагалі без строгої сітки. Це ще один сигнал для розробника: те, як щось зроблено в Figma, не означає, що в коді обов'язково має бути flexbox — можна обрати більш доречну техніку (CSS Grid, комбінації, clamp () тощо).
4. Breakpoints в Figma — тільки «вручну»
Figma не має вбудованого механізму «осіяти дизайн по брейкпоінтах». Тому дизайнер, який хоче чесно протестувати адаптивність, створює окремі фрейми для кожного breakpoint-діапазону (наприклад, XS, S, M, L) і розкладає авто-лейаут компоненти всередині.
Для responsive grid підхід той самий: на різні розміри екрана задаються стилі сітки і зберігаються як grid styles. При тестуванні потрібного брейкпоінта дизайнер підключає відповідний стиль.
Типографіка і fluid-ефекти
Автоматичної responsive-типографіки в Figma немає. Масштаб шрифтів під різні брейкпоінти дизайнер змінює вручну, перемикаючи text styles.
Якщо в коді використовуються vw, clamp(), calc() та інші fluid-прийоми, їх авторка рекомендує тестувати вже в браузері — Figma не симулює таку поведінку, максимум дає «зріз» на вибраному розмірі.
Є окремі плагіни на кшталт Breakpoints plugin, які дозволяють більш наочно проганяти створені вручну стани, але чуда автоматичного CSS там немає — це візуалізація того, що дизайнер уже розклав.
5. Реальні дані замість lorem ipsum
Figma не підключається до БД безпосередньо, але підтримує робочі сценарії через плагіни:
Дизайнер називає текстові шари #columnname, запускає плагін, вказує посилання на таблицю — і контент підтягується в макет. Авторка окремо відзначає, що в такому режимі можна динамічно міняти й варіанти компонентів.
Практичний ефект для розробника: якщо дизайнер тестує стани «мало контенту/багато контенту/порожньо/помилка/завантаження» на реальних значеннях, стає помітно, де макет розсипається і куди варто закладати додаткові обмеження в UI і API.
6. Soft grid vs hard grid — як пояснити спейсинг системи
Коли дизайнер вмикає Grids, Figma додає фонову піксельну сітку. Інтуїтивно хочеться використовувати її як «жорстку» (hard) grid для відступів. Але в верстці спейсинг зазвичай задається як набір кроків (4/8/12/16 тощо), а не «прив'язкою піксель в піксель».
Figma не дає окремих «spacing blocks». Максимум — змінити крок «nudge» (через Cmd + / → nudge) і рухати елементи стрілками по 8 px із затиснутим Alt, щоб бачити відстані.
Тут знову виручає Figma Tokens: реальну спейсинг-систему з кодових токенів можна підтягнути в Figma і використовувати в компонентах, щоб не роз'їхатися між макетом і CSS.
7. Line-height і чому дизайнери «ламають» його до 1
Багато UI-дизайнерів приходять з графічного дизайну, де працюють з baseline, а не з line-height як у Figma/CSS. Це породжує питання на кшталт «як прибрати порожній простір над і під текстом». Частина вирішує це, виставляючи line-height в 1, що виглядає дивно в коді.
Авторка звертає увагу на такі деталі Figma:
- за замовчуванням line-height вказується в px
- можна ввести значення у %, де 150% ≈
line-height: 1.5у CSS - точне px-значення видно в Inspect табі
З погляду розробника має сенс проговорювати з дизайнерами, що line-height повинен залишатися «живим» — текст не завжди буде в один рядок, будуть переклади, змінна довжина, а число стилів бажано обмежувати. Нормальне лінійне інтерліньяж — це плюс до читабельності, а не «зайвий повітря».
8. Чому в макеті всюди px — і чому це не вимога до коду
Figma працює тільки в px (власна «1px = 1pt»), без rem/em. Тому та сама розмірність з'являється у всіх числах, які бачить розробник. Авторка окремо підкреслює: наявність px в інспекті не означає, що дизайнер очікує «захардкоджених» px в CSS — це просто обмеження інструмента.
9. Прототипи без окремих інструментів
Figma дозволяє збирати інтерактивні прототипи прямо з тих самих фреймів, що й основний дизайн: лінкувати екрани, робити overlay, анімації між варіантами одного компонента, структурувати окремі потоки (flows).
Для розробника це можливість подивитися не тільки на статику, а й на основні сценарії, не заходячи в додаткові прототипні інструменти.
10. View only — що розробник реально може робити в Figma
Часто розробник отримує запрошення з правами View only. Авторка показує на прикладі демо файлу, що навіть у такому режимі ви не обмежені простим «подивитися картинку».
10.1. Структура файлів і сторінок
Окрім frame-ів на canvas, є «Pages» над панеллю шарів. Різні команди використовують їх по-різному: під версії, спринти, окремі розділи «Components», «Design», «Testing». Варто не ігнорувати цей рівень — там часто лежать бібліотеки компонентів і документація.
10.2. Inspect — ваш головний інструмент
У View only файл відкривається з активною вкладкою Inspect. Клік по елементу показує:
- відстані до сусідніх елементів
- специфікацію стилів справа (колір, шрифт, радіус, layout-параметри)
- кодове представлення у форматах CSS, iOS, Android (перемикання вкладок)
Якщо на головному компоненті задано посилання на кодову документацію або GitHub, воно теж з'явиться в Inspect.
10.3. Огляд стилів
Клік по «порожньому» полотну показує список локальних стилів файлу. Частина з них може приїжджати з зовнішніх бібліотек, тому для повної картини потрібна окрема документація від дизайн-команди — Figma не згенерує її автоматично.
10.4. Перехід до головного компонента
У будь-якого інстанса на canvas є маленька «діамантова» іконка — клік по ній переносить до main component і його документації. Там зазвичай лежить еталонні розміри, всі варіанти, текстові описи.
10.5. Експорт ассетів і коментарі
Навіть у View only можна експортувати елементи в JPG/PNG/SVG і задати масштаб або конкретну ширину/висоту. Авторка дає прийом: замість 2x/3x вказати, наприклад, 300w або 200h, і Figma збереже пропорції.
Коментарі в дизайні працюють як обговорення безпосередньо «на макеті» — зручно ставити питання до конкретних елементів.
10.6. Перегляд прототипу
Кнопка Play у правому верхньому куті переводить у режим презентації прототипу. Якщо дизайнер налаштував flows, можна отримати окремі посилання на різні гілки сценаріїв (курс реєстрації, кошик, онбординг тощо) і прив'язати їх до задач у трекері або планування в інших інструментах.
У підсумку описаний авторкою набір прийомів дає розробнику два ключові інструменти: розуміння реальних можливостей/обмежень Figma (щоб не вимагати від макета того, чого в ньому не може бути) і конкретні точки інтеграції з кодом (токени, Storybook, посилання з компонентів, View only + Inspect).
Джерело: Christine Vallaure – Smashing Magazine. Дата оригіналу: 2022-08-15.