Архівний матеріал: розбір публікації від 2019-08-27. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.
Матеріал розбирає підхід дизайнера Philippe Hong до щоденної роботи у Figma: як прискорити типові дії, впорядкувати дизайн-систему та легше працювати в команді.
Швидка робота з великою кількістю зображень
У продуктовому або маркетинговому дизайні часто доводиться міняти десятки картинок у макеті. Автор описує прийом, який прибирає рутинне перетягування файлів по одному.
- Використовується імпорт кількох зображень через Ctrl/Cmd + Shift + K.
- Після вибору файлів курсор перетворюється на «чергу» картинок.
- Клік по будь-якому об'єкту або фрейму послідовно «розкладає» ці зображення в макеті.
Це зручно, коли потрібно швидко оновити прев'ю, галереї або аватари на цілих серіях екранів.
Глибоке прибирання у файлі: масове перейменування та емодзі-статуси
Batch Rename для шарів
Коли файл готують до експорту або будують з нього бібліотеку, хаотичні назви шарів починають заважати. Philippe Hong спирається на вбудований Batch rename, щоб швидко навести лад:
- Можна перейменувати групу шарів або фреймів цілком.
- Можна змінити лише частину назви або окремі символи (пошук і заміна через поле Match).
- Доступна автонумерація, коли кожен шар отримує свій порядковий номер для подальшого експорту в окремі файли.
Це полегшує експорт і роботу з іконками, ілюстраціями, серіями скрінів.
Емодзі в імені фрейму як індикатор статусу
Для командної роботи авторська команда додає емодзі на початок назви фрейму, щоб позначити стан екрана:
- робота в процесі,
- готовий до рев'ю,
- затверджений варіант тощо.
Емодзі викликається системними шорткатами (Win key + . / ; на Windows, Cmd + Ctrl + space на Mac). Так будь-хто, відкривши файл, одразу бачить, що редагувати безпечно, а що краще не чіпати.
Швидке впорядкування елементів і відступів
Перерозподіл елементів у фреймі
Figma вміє автоматично перевпорядковувати об'єкти всередині фрейму. Автор показує це на прикладах списків, іконок, табів. Прийом корисний, коли:
- ви змінюєте порядок елементів у навігації або табах;
- потрібно рівномірно розкласти кілька іконок чи карток;
- потрібно перебудувати невелику сітку без ручного вирівнювання.
Гнучка зміна відступів у групі
Окремо дизайнер виділяє зміну відступів «на льоту». У Figma можна задати відстань між вибраними елементами один раз, а потім просто збільшувати чи зменшувати її, утримуючи задану рівномірність. Це рятує, коли тестуєте різні щільності інтерфейсу без переробки авто-лейаутів.
Tidy Up для швидкого вирівнювання
Функція Tidy Up допомагає миттєво скласти обрану групу об'єктів у сітку або рівно вирівняти їх. У поєднанні з можливістю змінювати відступи та перевпорядковувати елементи з пункту вище, це перетворюється на швидкий спосіб отримати акуратний ряд або блоки карток.
Автор звертає увагу ще на один варіант: наводите курсор на правий нижній кут виділення і натискаєте синю іконку, щоб застосувати Tidy Up без пошуку команди в меню.
Структура дизайн-системи: стилі, описи, пошук
Ієрархія імен для текстів і кольорів
Local Styles у Figma зручні, але легко перетворити їх на хаос, якщо нехтувати іменуванням. Philippe Hong використовує просту систему з роздільником «/»:
- «Heading/H1», «Heading/H2», «Body/Default» тощо для текстових стилів;
- аналогічний підхід для кольорів (наприклад, «Primary/Blue», «State/Error»).
Завдяки цьому всі стилі збираються в «дерево» і легше орієнтуватися, коли різних кеглів або кольорів десятки.
Опис до кожного стилю
Ще одна порада стосується роботи у команді. Для текстових стилів, кольорів та компонентів у Figma можна додати опис. Команда автора використовує це як міні-гайд, де саме дозволено застосовувати стиль:
- «Використовуйте для основних заголовків сторінки»,
- «Тільки на бейджах статусу»,
- «Фон блоків попередження» тощо.
Це скорочує кількість питань до дизайн-лида і допомагає новачкам швидшe розібратися в бібліотеці.
Ключові слова в компонентах для швидкого пошуку
Коли бібліотека компонентів зростає, знайти потрібний елемент за однією назвою стає важко. Автор радить додавати до компонентів keywords:
- ключові слова не зобов'язані дублювати ім'я компонента;
- шукати можна за будь-яким із доданих ключових слів;
- це дає змогу врахувати різні способи, якими команда називає один і той самий елемент (наприклад, «toast», «notification», «message»).
Робота з компонентами та властивостями елементів
Заміна інстансу прямо з панелі Layers
Стандартний dropdown для вибору інстансів стає незручним, коли компонентів багато. Автор користується прийомом перетягування:
- у панелі Layers берете потрібний компонент мишкою;
- утримуєте Alt + Ctrl/Cmd;
- перетягуєте на інстанс, який хочете замінити.
У результаті інстанс на полотні замінюється, а позиція та контекст залишаються без змін.
Копіювання всіх властивостей разом
Коли потрібно перенести стиль з одного елемента на інший (у тому числі зображення), автор використовує шорткат:
- Ctrl/Cmd + Alt + C — скопіювати всі властивості;
- Ctrl/Cmd + V — застосувати їх до іншого елемента.
Так переносяться заливки, рамки, ефекти й інші стилі одним рухом, без створення окремого Style.
Копіювання лише однієї властивості
Якщо потрібно перекинути тільки один параметр (наприклад, зображення або конкретний ефект), автор обирає його в правій панелі та копіює через Ctrl/Cmd + C, а потім вставляє через Ctrl/Cmd + V на інший об'єкт. Figma в цьому випадку переносить саме вибрану властивість, а не весь набір.
Пошук елементів із однаковими властивостями
Ще один прийом для «ревізії» дизайн-системи — використати меню Same Properties, щоб знайти всі елементи з однаковою:
- заливкою (конкретний колір);
- стилем тексту;
- інстансом компонента тощо.
Підхід, описаний автором, корисний, коли ви хочете:
- замість «голого» кольору призначити Color Style,
- виправити застарілий стиль на новий по всьому файлу,
- знайти й замінити різні «локальні» варіації одного й того ж елемента.
Масштабування, фрейми та шейпи
Scale tool проти звичайного resize
Philippe Hong використовує окремий інструмент Scale (клавіша K), коли потрібно масштабувати об'єкт разом з його властивостями:
- змінюються розміри елемента,
- пропорційно змінюється товщина обводки, розмір тіней та інших ефектів.
З утриманням Shift зберігаються пропорції. Якщо ж потрібна зміна тільки розмірів без впливу на властивості, автор радить використовувати стандартний Select та змінювати розмір через панель Properties.
Зміна розміру фрейму без зміни вмісту
Коли адаптуєте екрани під інші роздільності, часто потрібно збільшити або зменшити сам фрейм, не ломаючи розмітку всередині. Для цього дизайнер радить при зміні розміру фрейму утримувати Ctrl/Cmd — тоді внутрішні шари не масштабується слідом за рамкою.
Швидке створення дуг та графіків
Для прогрес-індикаторів та кругових графіків команда автора використовує вбудовані можливості кіл у Figma. Замість того, щоб різати контур, достатньо:
- створити коло,
- увімкнути режим дуги,
- налаштувати параметри в правій панелі (кут, напрямок, товщину) до потрібного значення, наприклад для лоадера.
Історія версій, GIF та UI-кити
Повернення до попередньої версії та посилання на неї
Автор активно користується історією версій. Це вирішує типові ситуації:
- потрібно відкотити помилкові правки;
- клієнт просить повернутися до попереднього варіанту екранів, не втрачаючи поточну роботу;
- потрібно показати альтернативну версію без дублювання файлу.
Figma дозволяє не тільки відновити стан, а й скопіювати посилання на будь-яку попередню версію. Це полегшує обговорення змін з командою та стейкхолдерами.
UI kit бібліотеки для старту проекту
Щоб не починати дизайн «з нуля», Philippe Hong підключає готові UI-кити як бібліотеки. У власній роботі він згадує:
- Wireframy для вайрфреймів;
- Bootstrap Grid як базову сітку;
- Figma Redlines для специфікацій.
У Figma є окремий розділ з asset-ами (figma.com/resources), де можна знайти безкоштовні набори під свої задачі.
GIF у прототипах
У 2019 році Figma додала підтримку GIF у прототипах. Автор посилається на приклад Aris Acoba, який показує, як це дозволяє вбудовувати прості анімації взаємодій прямо в прототип без складних motion-інструментів. Це корисно, якщо потрібно показати замовнику базову динаміку інтерфейсу.
Налаштування робочого оточення та плагіни
View Settings для зручності фокусу
Philippe Hong окремо згадує системні налаштування перегляду, які не одразу помітні:
- меню доступне з верхнього правого кута («Settings» / «View»);
- там можна вмикати лінійки (Rulers) та сітку (Grid);
- увімкнути або вимкнути Snap to Pixel Grid, якщо він заважає точному позиціюванню;
- приховати курсори інших учасників, щоб не відволікатися під час фокусної роботи.
Плагіни як доповнення до процесу
На момент публікації статті Figma щойно запустила систему plugins, і автор уже використовував їх у повсякденній роботі. Серед плагінів, які він відзначає:
- Content Reel — для швидкого підстановлення контенту;
- Unsplash — для пошуку й вставки стокових зображень;
- Stark — для перевірки доступності та контрастності;
- Image Palette — для отримання палітри з картинки;
- Google Sheet sync — для зв'язки макетів із даними з Google Sheets.
Автор заохочує експериментувати з готовими плагінами й, за потреби, розробляти власні під конкретні робочі процеси, але не наводить прикладів самостійно створених рішень.
Джерело: Philippe Hong – Smashing Magazine. Дата оригіналу: 2019-08-27.