Архівний матеріал: розбір публікації від 2020-10-21. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.
Abel Hancock ділиться набором плагінів Figma, які суттєво прискорюють рутинні дії: вибір однотипних елементів, генерацію контенту, масове перейменування та організацію дизайн-систем. Нижче — структурований практичний конспект його підходу з акцентом на тому, коли саме має сенс діставати кожен плагін.
Коли варто шукати плагін, а не клікати вручну
У 2020 році, за спостереженням автора, UI-дизайнери витрачають дивно багато часу на кліки, вибір об'єктів, перейменування, пересування й дрібні правки у Figma. Навіть з урахуванням нових нативних можливостей Figma, чимало повторюваних задач лишаються монотонними.
Hancock формулює просте правило: якщо дія повторюється десятки разів або займає більше кількох секунд на елемент, швидше за все, у спільноті вже є плагін, який зробить це пакетно.
За його досвідом, найбільшу віддачу дають плагіни, які дозволяють робити щось оптом:
- генерувати контент одразу для багатьох елементів
- організовувати компоненти та стилі пакетно
- змінювати текст, назви або стилі для групи шарів одночасно
Далі — п'ять плагінів, які автор застосовує щодня (або епізодично, але з великим виграшем у часі), і спосіб, як поєднувати їх між собою.
1. Similayer — швидкий вибір однотипних елементів
Коли використовувати
Similayer корисний, коли потрібно вибрати більше 4-5 елементів з однаковими властивостями: компоненти, текстові шари, зображення, фрейми. Стандартне Shift-клікання по групах і вкладених шарах у таких випадках повільне й помилкове.
Що він робить
- обирає подібні шари за кілька кліків
- дозволяє задати дуже конкретні умови: тип шару, стиль тексту, розмір, назву тощо
- може шукати тільки в межах обраного фрейму або по всій сторінці
Як це спрощує роботу
При глибокій ієрархії фреймів і груп спроби виділити декілька шарів вручну часто закінчуються помилками: не ті елементи, пропущені інстанси, випадкове виділення контейнера замість вмісту. Hancock використовує Similayer набагато частіше, ніж усі інші плагіни разом.
Типові сценарії застосування у нього такі:
- виділити всі інстанси певного компонента в межах екрана
- виділити весь текст із певним шрифтом, кеглем або насиченістю у фреймі
- знайти всі шари з однаковою назвою на сторінці (наприклад, усі «Button/Primary»)
Після цього по вибраних елементах можна одним рухом змінювати стилі, текст, автолейаут або запускати інші плагіни.
Прийом з кількома root-фреймами
Abel описує прийом, коли потрібно вибрати елементи тільки в частині екранів, а не на всій сторінці. Наприклад, є 5 макетів, а правки потрібні лише в двох.
- Тимчасово загорнути потрібні топ-рівневі фрейми в один додатковий фрейм.
- У Similayer увімкнути опцію «Limit selection within root frame».
- Запустити пошук потрібних елементів — вибір обмежиться цим тимчасовим контейнером.
Після змін контейнер можна видалити, не зачепивши внутрішні фрейми.
2. Content Reel — масова генерація реалістичного контенту
Коли використовувати
Content Reel стане у пригоді, коли потрібно згенерувати більше кількох елементів «заглушок»:
імена, телефони, email-адреси, аватари, номери замовлень, адреси тощо.
Можливості
- швидко заповнює макет структурованим контентом
- працює як з текстом, так і з картинками
- дозволяє створювати власні набори даних і за бажанням публікувати їх для команди або спільноти
Для чого автор його застосовує
Hancock використовує Content Reel щоразу, коли вручну вигадувати контент нудно або неефективно. Приклад — таблиці з реалістичними телефонами: замість однакових «(555) 555-5555» плагін генерує варіативні значення, які краще імітують реальні дані й дозволяють протестувати обмеження по довжині.
При першому запуску доступні готові набори для базових кейсів. Для специфічних задач автор рекомендує:
- шукати в Content Library публічні набори
- створювати власні кастомні колекції
Окремий кейс, який він описує, — застосунок для бронювання переговорних кімнат. Для нього була створена кастомна колекція «Amenities» (WiFi, TV, розетки, кавоварка та інші опції), яку плагін випадково розподіляв між кімнатами.
Для аватарів автор використовував як дефолтний набір плагіна, так і власну колекцію «професійні портрети». Як джерело зображень згадується Unsplash.
Налаштування приватності наборів
Коли ви створюєте власний контент-сет в Content Reel, можна:
- залишити його приватним — тільки для себе
- опублікувати для команди або спільноти, щоб інші могли підключити його з плагіна
3. Change Text — пошук і заміна тексту в кількох шарах
Коли використовувати
Change Text потрібен у двох базових випадках:
- коли треба знайти і замінити слово або фразу в багатьох місцях
- коли потрібно одночасно змінити вміст кількох текстових шарів
Що вміє плагін
- робить пошук і заміну тексту по вибраних шарах
- підтримує патерн
$&за аналогією з нативним інструментом batch rename у Figma - змінює тільки вибрані текстові шари — це одночасно плюс (менше ризику зламати все) і мінус (потрібно уважно виділяти зону дії)
Як автор застосовує Change Text у клієнтських проектах
Hancock описує типову ситуацію: у макетах є друкарська помилка, яку скопіювали десятки разів. Замість того, щоб переглядати кожний екран, плагін перетворює це на задачу «на 5 секунд».
Так само корисно:
- змінити назву компанії в усіх макетах
- замінити напис на кнопці з «Create» на «Add» згідно з побажанням клієнта
Автор зауважує, що у добре побудованій компонентній системі така масова заміна потрібна рідше. Але на практиці не завжди вдається з самого початку грамотно виділити все в компоненти, і тоді плагін економить багато часу.
Зв'язка із Similayer
Практичний прийом, який пропонує Hancock:
- Спочатку використати Similayer, щоб вибрати всі потрібні текстові шари. Наприклад, за «Text characters» або за стилем тексту.
- Потім запустити Change Text і зробити пошук/заміну тільки в цих шарах.
Так ви контролюєте область змін і не чіпаєте випадкові тексти поза контекстом.
4. Lorem ipsum — гнучкий генератор «риби»
Коли використовувати
Lorem ipsum — варіант для будь-яких ситуацій, коли потрібен текст-заглушка: на 10 хвилин, поки немає копірайту, або на період очікування фінального контенту від клієнта.
Чим цей плагін відрізняється
- вміє генерувати кілька текстових боксів одночасно
- не обмежується обов'язковим початком з «Lorem ipsum» і робить унікальний текст для кожного елемента
- має режим auto-generate, який заповнює текстовий блок рівно на його розмір
Навіщо автор віддає перевагу саме йому
Hancock зазначає, що в Figma є багато плагінів для «риби». Він виділяє цей варіант через поєднання простоти й достатньої гнучкості: можна за кілька секунд задати кількість слів, речень або абзаців і отримати текст, який не доводиться руками підчищати.
Особливий плюс — auto-generate для заповнення фіксованих текстових областей, коли:
- компонент на auto layout не має змінювати розмір від довжини тексту
- потрібно швидко показати заповнений стан без «переливання» контенту
Комбінація з шрифтом Redacted
Автор пропонує прийом для більш абстрактних макетів: використати Lorem ipsum разом зі шрифтом Redacted (архів за посиланням old-sources.zip). Так текст поводиться як реальний за обсягом, але не відволікає нікого змістом.
5. Design System Organizer — масове прибирання у дизайн-системі
Коли використовувати
Design System Organizer не належить до плагінів «щодня», але у великих файлах економить години. Автор радить його в трьох сценаріях:
- створення нової бібліотеки компонентів
- адаптація або «переварювання» скопійованої бібліотеки зі спільноти
- файли з великою кількістю локальних стилів або компонентів, які потребують прибирання
Основні можливості
- масове перейменування, видалення, переміщення компонентів
- робота з усіма видами стилів: текст, колір, заливка, ефекти, сітки
- інтерпретація назв зі слешами як вкладених папок всередині плагіна («Button/Primary/Large» і подібні)
Як його описує автор
Hancock відзначає, що цей плагін може заощадити години, які інакше пішли б на перейменування та структурування вручну. Особливо це стосується роботи з клієнтами або новими дизайн-системами, де багато чужих рішень по назвам і категоризації.
Ще один кейс — клон бібліотек із Figma Community. Більшість з них досить добре впорядковані. Але якщо звична логіка іменування інша, іноді простіше «перекласти» систему під себе за допомогою Design System Organizer, ніж щоразу звикати до оригінальної структури.
Плагін платний: $2.99 за довічну ліцензію. При цьому для кожного файлу передбачена 30-денна безкоштовна пробна версія. Abel вважає, що навіть одноразова підготовка великої дизайн-системи виправдовує цю суму.
Швидке видалення стилів
Окремо автор виділяє можливість масово видаляти стилі. На відміну від компонентів, Figma не дає виділити багато стилів і стерти їх одним разом. Через плагін можливо вибрати кілька стилів і видалити їх за один прохід.
6. Прискорюємо запуск плагінів: гарячі клавіші
Навіть найзручніший плагін втрачає частину користі, якщо щоразу відкривати його через контекстне меню. Автор окремо описує, як скоротити шлях до запуску.
Базовий пошук по назві
Комбінація Cmd + / (macOS) або Ctrl + / (Windows) відкриває Search. Далі можна вводити назву плагіна й запускати його клавішею Enter.
Повторний запуск останнього плагіна
Комбінація Cmd + Opt + P (macOS) або Ctrl + Alt + P (Windows) відкриває останній використаний плагін. Hancock зазначає, що в нього так майже завжди запускається Similayer, бо це найчастіше вживаний інструмент.
Кастомні шорткати для плагінів у macOS
На Mac можна задати власні клавіатурні скорочення для будь-якого пункту меню Figma, включно з плагінами. Автор пропонує таку послідовність:
- Відкрити System Preferences → Keyboard → Shortcuts → App Shortcuts.
- Натиснути «+» внизу списку.
- Вибрати Figma в полі Applications.
- У полі назви меню ввести назву плагіна або пункту меню точно так, як вона показана в інтерфейсі Figma (наприклад, Similayer).
- Призначити комбінацію клавіш і натиснути «Add».
- Після цього плагін можна запускати прямо з Figma за вашою комбінацією.
Автор зауважує, що для Windows, ймовірно, існують програми з аналогічною функціональністю, але власного досвіду їх використання він не описує.
Як поєднувати плагіни в один робочий ланцюжок
З підходу Hancock вимальовується типова послідовність для пришвидшення рутинних задач у Figma:
- Вибір потрібних елементів — через Similayer, щоб точно й швидко виділити цільові шари.
- Масова зміна вмісту — Change Text для тексту або інші плагіни/стилі для візуальних властивостей.
- Заповнення контентом — Content Reel чи Lorem ipsum для реалістичних або абстрактних заглушок.
- Періодичне прибирання — Design System Organizer, коли накопичується багато стилів і компонентів і їх потрібно впорядкувати.
За рахунок такого комбінування багато «дрібних» дій у Figma перетворюються на кілька команд і шорткатів, а вивільнений час можна спрямувати на сам дизайн, а не на клікання по шарах.
Джерело: Abel Hancock – Smashing Magazine. Дата оригіналу: 2020-10-21.