Поради та найкращі практики для роботи з компонентами Figma Рекомендація: Повторюйте дії за мною в Figma Використовуйте створений мною файл Figma Community.
1. Поєднання клавіш для роботи з компонентами
Що краще ви опануєте поєднання клавіш для компонентів, то швидше вони стануть звичкою. Спробуйте такі поєднання клавіш, щоб прискорити робочий процес: Mac:
ALT + 2= Показати панель активів (option + 1 повертає вас на панель шарів)
2. Поміняти місцями компоненти
Відкривши панель активів (використовуючи option / alt + 2 або shift + I), ви можете перетягнути екземпляри компонентів на полотно. Якщо у вас уже є компонент, спробуйте використати ці комбінації клавіш під час перетягування компонента для заміни наявного.
Утримуйте OPTION / ALT, щоб замінити компонент
Утримуйте OPTION / ALT + CMD / CTRL, щоб замінити вкладений компонент
3. Іменування компонентів
Від того, як ви назвете свої компоненти, залежатиме їхня організація. Якщо ви використовуєте поділ косою рискою, Figma згрупує ці компоненти в меню екземпляра, що спростить їхній пошук. Figma використовує наступний шлях file / page / frame / ** ім'я ** / для організації наших компонентів. Так, наприклад, якщо у мене є компонент, що розкривається, я б помістив його в окремий фрейм Figma під назвою "Inputs", а потім назвав би компонент Dropdown / Active. Figma буде використовувати це ім'я для створення папки "Inputs", а потім всередині папки "Dropdown". Ви також можете назвати свій компонентInputs / Dropdown / Active, якщо основний компонент не розташований усередині фрейму під назвою "Inputs".
4. Створюйте компоненти кумедної форми
Використовуючи міць логічних операцій для віднімання фігур і встановлення обмежень для цих фігур, ми можемо створити компоненти, які мають акуратний вигляд (Спасибі Роджі Кінгу). Для цього дотримуйтесь інструкцій Роджі на YouTube (початок з 32:50).
5. Використовуйте базові компоненти
Використовуючи базові компоненти для наборів варіантів, ми можемо внести одне коригування в базовий компонент, і він внесе зміни в усі варіанти екземплярів. Для цього створіть базовий компонент з усіма елементами, необхідними в різних варіантах для значень за замовчуванням, значки ліворуч, значки праворуч, наведення, активного стану, помилки тощо. Це так само просто, як приховати непотрібні нам елементи в різних варіантах. Також корисно додати модифікатор перед іменем компонента, який приховає його з бібліотеки, коли ви будете готові опублікувати компоненти. Для цього додайте "." або "_" перед назвою компонента (наприклад, "_Profile Card Base").
6. Меню швидкої вставки
Додавайте компоненти за секунди за допомогою меню швидкої вставки.
Натисніть SHIFT + I, щоб активувати меню швидкої вставки.
Натисніть ESC, щоб закрити його.
7. Дотримуйтесь принципів атомарного дизайну
Атомарний дизайн Бреда Фроста - це методологія створення дизайн-систем. Вона допомагає нам організувати компоненти для ефективного масштабування нашої дизайн-системи і підтримувати порядок всередині вкладених компонентів. В атомарному дизайні є п'ять різних рівнів:
1. Атоми.
Атоми - це основні будівельні блоки, такі як мітка форми, поле введення або кнопка.
2. Молекули
Молекули - це групи атомів, пов'язаних разом, наприклад, мітка форми, введення і кнопка, об'єднані разом у форму.
3. Організми
Організми складаються зі схожих і / або різних типів молекул. Наприклад, організм "шапка сайту" може складатися з різних компонентів, таких як логотип, основна навігація, пошук і список каналів соціальних мереж.
4. Шаблони
Шаблони конкретні й надають контекст для всіх цих відносно абстрактних молекул і організмів. Шаблони - це те місце, де клієнти починають бачити остаточний дизайн. З часом підвищується точність шаблонів і зрештою вони стають кінцевим результатом.
5. Сторінки
Сторінки - це особливі екземпляри шаблонів. Тут контент-плейсхолдер замінюється реальним репрезентативним контентом, щоб дати точне уявлення про те, що в кінцевому підсумку побачить користувач. Щоб дізнатися більше, подивіться це відео на YouTube і прочитайте книгу Бреда Фроста "Атомарний дизайн".
8. Використовуйте компоненти слота
Слоти дають змогу використовувати плейсхолдер, який ми можемо замінити потрібним нам контентом. Наприклад, створити модальний компонент може бути не просто, тому що не всі модальні вікна матимуть всередині себе однаковий контент. Щоб розв'язати цю проблему, ми можемо використати техніку під назвою "слоти" (спасибі, Rogie, Ben Adelt, і Ridd). Просто вставте компонент слота туди, де вам знадобиться гнучкий контент, і за необхідності поміняйте його.
9. Використовуйте кілька бібліотек
У більших організаціях з великою кількістю компонентів і стилів, необхідних для підтримки безлічі різних платформ і продуктів, бібліотека може дуже швидко зростати. Якщо користувачам потрібен тільки невеликий набір цих компонентів, їм все одно доведеться відсіювати безліч схожих компонентів, які їм ніколи не знадобляться. Спробуйте організувати свої компоненти в різних файлах, наприклад:
Завантажте файл спільноти, щоб поекспериментувати з ним.Компоненти дуже універсальні і можуть використовуватися для створення найрізноманітніших речей, наприклад, анімації з використанням інтерактивних компонентів або кумедних патернів. Використовуючи плагін і компоненти Rotate Copies, можна створювати забавні та динамічні арти просто всередині Figma!
Топ коментарі (0)