Figma для розробників — практичний гайд за підходом Jurn van Wissen

Архівний матеріал: розбір публікації від 2020-09-02. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.

Автор Jurn van Wissen розбирає, як розробникам працювати з макетами у Figma без страху зламати дизайн і без нескінченних уточнень у дизайнерів. Нижче — переосмислений практичний конспект його підходу саме з точки зору розробника.

1. Як змінився handoff — від папок з PNG до спільного файлу

Команда автора порівнює старий і новий сценарії роботи з дизайном.

Раніше

• Дизайнери надсилали лист із десятками вкладень: PNG/JPG екранів, zip з іконками, окремим документом з текстами.
• Ліцензії на дизайн інструменти були дорожчими, тож розробники часто взагалі не відкривали вихідні файли.
• Оновлення версій губилися в листуванні і таск-трекерах — кожна правка вимагала нового листа.

Проміжний етап

• Для handoff зʼявилися окремі сервіси на кшталт Zeplin або Invision.
• Розробник бачив макет, міг подивитися шрифти, кольори, відступи, експортувати ресурси.
• Проте дизайнеру доводилося синхронізувати кілька інструментів та стежити, щоб завжди була залита остання версія.

Що змінила Figma

• Figma працює в браузері, тому не потрібно нічого ставити, щоб подивитися макет. Є й десктоп застосунок, але це надбудова над тим самим веб-ядром.
• Файл зберігається в хмарі — усі бачать актуальну версію без «final_v7_new-new.fig».
• Розробник і дизайнер працюють в одному середовищі: у реальному часі, з коментарями, анотаціями, експортуванням ресурсів і CSS-підказками.

Автор пропонує навчитися базовим прийомам у Figma, щоб розробник міг самостійно:

• орієнтуватися в сторінках і стилях;
• витягати інформацію про шрифти, кольори, відступи;
• експортувати графіку;
• читати прототипи й анімації.

2. Структура інтерфейсу — що шукає розробник

Ви можете відкрити макет у браузері або в десктоп застосунку. Функціональність майже однакова. Важлива різниця: локальні шрифти в браузері вимагають встановлення Figma Font Helper, а десктоп застосунок вміє використовувати їх «з коробки».

Інтерфейс Figma складається з трьох областей:

• Центральне полотно — власне дизайн: фрейми, екрани, компоненти.
• Ліва панель — вкладки Layers, Assets, Pages:

• Pages — сторінки файлу (дизайн система, іконки, екрани тощо);
• Layers — структура шарів усередині поточної сторінки;
• Assets — компоненти й бібліотеки.

Права панель — властивості вибраного елемента: layout, стилі, вкладка Code, а у режимі Prototype — налаштування переходів і анімацій.

На одному файлі може бути кілька сторінок, кожна сторінка має власне полотно. Автор радить при першому відкритті:

• пройтися по списку Pages зліва;
• знайти, чи винесені окремо:

• кольори,
• типографіка,
• іконки,
• компоненти дизайн системи.

Часто це економить час при верстці — не потрібно шукати значення кольору по всіх екранах.

3. Навігація і шорткати, які реально корисні розробнику

Розробнику важливо швидко переміщатися між екранами і блоками. Автор виділяє декілька основних дій.

Базове масштабування та прокрутка

• Зум — Cmd/Ctrl + колесо миші або клавіші «+» і «-».
• Панорамування полотна — затиснути пробіл і тягнути мишкою.
• Зум до вибраного — вибрати елемент або фрейм і натиснути Shift + 2.
• Показати все — Shift + 1, щоб усі фрейми помістилися в екран.

Список усіх шорткатів у Figma відкривається через Cmd/Ctrl + Shift + ?.

Після першого використання комбінації вона підсвічується синім у довіднику — так легше відслідковувати, що вже «лягло в руки», а що ще варто спробувати.

4. Стилі проєкту — як швидко витягти шрифти, кольори й сітки

Коли ви відкриваєте новий файл, варто почати не з конкретного екрану, а з глобальних стилів. Figma вміє показувати їх у правій панелі, але є умова: жоден елемент не повинен бути виділений.

Щоб скинути виділення і побачити панель стилів:

• клікніть у порожнє місце на полотні, або
• натисніть Esc.

У правій панелі ви побачите блоки стилів, які дизайнер налаштував у файлі:

• Typography (текстові стилі — розмір, вага, міжряддя, трекінг);
• Colors (філи, обводки, іноді — стани компонентів);
• Grids (layout сітки, колонки, відступи);
• інші типи стилів, якщо вони є у проєкті.

Натиснувши на іконку редагування біля стилю, можна розкрити докладну інформацію і відобразити всі параметри, які потім закладаються в CSS або дизайн систему у коді. Практична стратегія, яку описує автор:

• відкрити файл;
• подивитися список глобальних текстових стилів — намітити токени шрифтів;
• подивитися палітру — виписати назви та значення кольорів;
• за потреби — подивитися сітки, щоб підібрати CSS Grid/Flex конфігурацію.

5. Вибір шарів і вкладка Code — як читати макет, не переписуючи CSS 1 до 1

Як правильно виділяти елементи

У реальних макетах елементи майже завжди вкладені в групи, автолейаути і компоненти. Простий клік найчастіше потрапляє у верхній рівень — наприклад, весь картковий блок замість конкретного тексту.

Автор пропонує кілька базових прийомів:

• Cmd/Ctrl + клік — «глибоке» виділення конкретного шару під курсором, минаючи верхні групи.
• Правий клік — меню з переліком усіх шарів під курсором, де можна вибрати потрібний.
• Подвійний клік — кожен раз опускає виділення на один рівень глибше всередину групи або компонента.

Цього достатньо для більшості кейсів, але Figma має й інші варіанти навігації по шарах — їх описано в документації: Select layers and objects.

Що дає вкладка Code

Коли потрібний елемент виділено, у правій панелі можна перемкнутися на вкладку Code. Там відображаються:

• CSS-властивості для розміру, кольорів, шрифтів;
• іноді — фрагменти коду для інших платформ (якщо налаштовані інтеграції);
• значення, зручні для копіювання — наприклад, rgba кольори, border-radius, box-shadow.

Критичне застереження від автора: це згенерований CSS. Його не варто сприймати як продукційний код позиціювання блоків. Позиціонування особливо часто виходить непридатним для верстки. Практичний варіант використання вкладки Code:

• копіювати окремі значення (колір, розмір шрифту, тіні);
• звіряти між собою елементи, щоб підтягнути до єдиного стилю;
• шукати, чи є повторювані патерни, які можна винести в CSS змінні або токени.

6. Вимірювання відстаней — як перевірити відступи та розмітку

Для коректної верстки важливо розуміти, які відступи між елементами закладені у макеті. У Figma це робиться без додаткових плагінів:

• виділіть елемент, від якого хочете вимірювати відстань;
• затисніть Alt;
• наведіть курсор на інший елемент — Figma покаже червону лінію між ними і підпише відстань у пікселях.

Якщо потрібно виміряти відступ до вкладеного елемента в іншій групі або фреймі, можна поєднати це з «глибоким» вибором:

• затиснути Cmd/Ctrl для вибору потрібного дочірнього елемента під курсором;
• далі — діяти так само з Alt для вимірювання.

Цей прийом зручний, коли потрібно зʼясувати, наприклад, відстань від краю контейнера до конкретного тексту всередині, а не до всієї групи.

7. Експорт ресурсів — від одиночних іконок до пакетного вивантаження

У підході, який описує автор, розробник більше не чекає zip від дизайнера — він сам експортує потрібні файли.

Підготовка шару до експорту

Будь-який шар (іконка, логотип, кнопка, цілий фрейм) потрібно спочатку позначити як експортований:

• виділіть елемент;
• у правій панелі знайдіть секцію Export внизу;
• натисніть іконку плюса.

Далі задаються параметри:

• масштаб (1x, 2x тощо);
• формат файлу (PNG, JPG, SVG, PDF);
• опційний суфікс до назви.

За замовчуванням імʼя шару стає іменем файлу. Після налаштування можна натиснути кнопку Export і зберегти файл.

Швидка альтернатива, яку рекомендує автор: правий клік → Copy/paste → Copy image або Copy as SVG. Це підходить, якщо потрібно просто вставити іконку або фрагмент SVG без тонкого налаштування експорту.

Пакетний експорт

Якщо в макеті багато шарів, позначених як exportable, усе можна вивантажити разом:

• File → Export..., або
• Shift + Cmd + E (macOS) / Shift + Ctrl + E (Windows).

Відкриється список усіх експортованих елементів у файлі:

• можна перевірити розміри, формати;
• відключити зайві файли перед експортом;
• навести курсор на превʼю, щоб побачити майбутнє імʼя файла.

Якщо потрібно змінити налаштування конкретного ресурсу, клік по його превʼю повертає вас до відповідного шару на полотні, де можна змінити параметри експорту.

Для навігації у великій кількості ресурсів автор радить простий трюк з іменами шарів: використовувати слеш «/» як роздільник групи. Наприклад, назви виду icons/menu/hamburger або logos/app/primary. Під час експорту Figma створює відповідні підпапки на диску.

8. Прототипи та анімації — як зчитати логіку й перенести її в код

Figma підтримує інтерактивні переходи, модальні вікна, жести для мобільних сценаріїв та інші анімації. Для розробника це особливо корисно, коли потрібно зрозуміти поведінку інтерфейсу, а не тільки статичні стани.

Перегляд прототипу

• Натисніть іконку Play у правому верхньому куті — відкриється Presentation view з інтерактивним прототипом.
• Клік, тап або жести (якщо задані) відтворюють відповідні переходи і анімації.

Де шукати параметри анімацій

На відміну від стилів, інформацію про анімації не показують у вкладці Code. Вона живе в режимі Prototype:

• виділіть екран або елемент, який має інтерактивність;
• перейдіть на вкладку Prototype у правій панелі;
• на полотні зʼявляться сині стрілки, що показують потік (user flow);
• клікніть стрілку, щоб побачити деталі конкретного переходу.

Автор наводить приклад з анімацією бургер-меню:

• тригер — On Tap на іконці;
• дія — Navigate To екрану, де меню вже в «відкритому» стані;
• тип переходу — Smart Animate, коли Figma сама інтерполює зміни між двома станами;
• функція плавності — Ease Out;
• тривалість — 300 ms.

Саме ці параметри зазвичай потрібні розробнику для реалізації анімацій у CSS або JavaScript.

9. Комунікація в макеті — як ставити питання прямо в Figma

Щоб не втрачати обговорення у месенджерах, автор пропонує ставити питання безпосередньо в макеті за допомогою коментарів.

Алгоритм:

• натиснути іконку «хмарки» вгорі або клавішу C, щоб увімкнути інструмент Comment;
• клікнути в потрібну точку макета — зʼявиться поле для введення тексту;
• написати питання чи зауваження;
• натиснути V, щоб повернутися до звичайного курсора.

Нюанс, на який звертає увагу автор: не всі автоматично отримують сповіщення про ваш коментар. Якщо потрібно, щоб його точно побачила конкретна людина, згадайте її через @імʼя — за аналогією зі Slack або Twitter.

Коментарі видно всім, хто має доступ до файлу, приватних гілок немає. Після того, як питання розвʼязане, коментар можна позначити як Resolved — він «сірає» і не заважає читати актуальні обговорення.

10. Куди рухатися далі

Підхід, який описує Jurn van Wissen, дає розробнику базовий набір навичок у Figma:

• орієнтація в сторінках і глобальних стилях;
• точний вибір шарів і робота з вкладкою Code для читання стилів;
• вимірювання відступів та розмірів;
• експорт одиничних і пакетних ресурсів;
• читання user flow і параметрів анімацій у Prototype;
• використання коментарів для синхронізації з командою.

За глибшими деталями інструменту автор радить звертатися до офіційної документації: https://help.figma.com/hc/en-us. Там описані розширені сценарії роботи з автолейаутом, компонентами, бібліотеками та іншими функціями, які спрощують спільну роботу дизайнерів і розробників.

---

Джерело: Jurn van Wissen – Smashing Magazine. Дата оригіналу: 2020-09-02.