Здається, без програмістів зібрати з макета робочий прототип неможливо. Насправді це не так – у Figma передбачена функція прототипування, яка допоможе вам «завести» додаток та відловити всі помилки у сценаріях до передачі макетів у розробку.

Розповідаємо, як перетворити ваші картинки з Figma на повноцінний прототип - з робочими кнопками, прокручуванням та перемикачами.

Інтерфейс для прототипування

На панелі налаштувань праворуч у верхній частині є три вкладки: Design , Prototype і Inspected . Усі параметри прототипів знаходяться в Prototype .

Основні налаштування прототипів

Device — Виберіть пристрій, у якому відображатиметься прототип. Від цього налаштування залежить не тільки те, як виглядатиме косметична рамка, а й плавність анімації прокручування:

Background – колір фону.

Flows - тут будуть ваші прототипи, на одному макеті їх може бути декілька.

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

Кнопки та навігація

1. Перейдіть до вкладки Prototype .
2. Виділіть будь-який кадр на макеті. На одній із його сторін з'явиться кружечок з плюсиком — затисніть його та тягніть до іншого кадру.
3. Щоб зробити кнопку Назад , виберіть будь-який кадр і на вкладці Prototype натисніть на плюсик напроти слова Interactions . У першому полі вкажіть Tap , а у другому – Back .
4. Щоб запустити прототип, натисніть на синю кнопку .

Прокручування

1. Перейдіть до вкладки Prototype .
2. Виділіть кадр, у якому потрібно прокручувати дизайн. Щоб функція працювала, висота вашого кадру повинна бути більшою за висоту екрана пристрою.
3. На вкладці Prototype в Overflow scrolling виберіть потрібний формат прокручування — горизонтальний, вертикальний або загальний.
4. Щоб зафіксувати верхню та нижню панель програми, перейдіть на вкладку Design і в блоці Constraints натисніть галочку навпроти Fix position when scrolling .
5. Щоб запустити потрібний екран прототипу, натисніть кнопку та перетягніть її до потрібного екрана, а потім натисніть на неї.

Вспливаючі вікна

Такі вікна нерідко зустрічаються в інтерфейсах - зазвичай вони допомагають користувачеві зрозуміти яку інформацію від них хоче програма. Щоб трохи ускладнити завдання, зробіть спливаюче вікно, яке змінюється по кліку.

Як настроїти поп-ап

1. Перейдіть до вкладки Prototype .
2. Виділіть кадр, натиснувши на який повинен з'явитися поп-ап. На одній з його сторін з'явиться кружок - затисніть його і тягніть до іншого кадру, який виконуватиме функцію поп-апу.
3. У вікні Interaction details замість Navigate to виберіть Open overlay .
4. Виберіть ваш поп-ап, натисніть на плюсик навпроти слова Interaction , потім - на пункт і у вікні Interaction details замість None виберіть Swap overlay .
5. У полі в тому ж вікні замість None виберіть додатковий поп-ап.
6. Щоб перевірити прототип, перетягніть кнопку на потрібний кадр і натисніть на неї.

Готово. Тепер у вас є поп-ап, який відкривається після натискання кнопки. А якщо натиснути на нього, він зміниться.

Перш ніж ми заглибимося в випадки використання, ось 2 області, де можна знайти режими змішування у Figma:

A) Fill Blend

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

B) Layer Blend

Ви також можете знайти режими накладання під заголовком «Шар». Це застосовує змішування до вибраного шару, який може бути об’єктом або фреймом, що містить інші об’єкти.

Що таке ‘Pass through’ vs ‘Normal’?

«Pass through» — це налаштування шару за замовчуванням у Figma. Це означає, що змішані шари будуть просвічуватися через шар. Однак, коли шар має значення «Normal», він непрозорий, і змішані шари не просвічуються крізь нього

Тепер, коли ми розібралися з основами, ось кілька практичних способів використання режимів накладання у Figma!

1. Видаліть фон білих зображень

Використайте Multiply. Це чудово підходить для підписів на білому тлі, зображень продуктів, зроблених на білому тлі студії.

Зверніть увагу, що фон повинен бути якомога ближче до білого. Фон кремового кольору не стане прозорим, якщо для режиму змішування встановлено значення «Multiply». Можливо, вам доведеться використовувати Remove bg, щоб досягти такого ж ефекту.

2. Створення ефекту трафаретного друку

Імітуйте ефекти трафаретного друку, встановивши шар друку/заливку на «Multiply» та накладіть його на об’єкт (наприклад, футболку). Це додасть певної реалістичності вашому макету за один крок.

Multiply має адитивний ефект. Він повільно малює шари дизайну. Усі шари прозорі. Таким чином, ви можете додати скільки завгодно шарів для досягнення бажаного ефекту.

3. Градієнтні накладки з більшою яскравістю та глибиною

Градієнтні накладки зазвичай зменшують насиченість зображень.

Створіть/збережіть глибину та яскравість зображення, додавши режим змішування до градієнтного шару. Спробуйте додати режим змішування «Colour Dodge» або «Soft Light», щоб краще підкреслити кольори на зображенні та зробити їх яскравими.

Експериментуйте з різними режимами змішування, щоб досягти унікальних ефектів!

4. «Адаптивні» елементи дизайну

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

Завдяки «Multiply» у нас не виникає потреби налаштовувати кожен дизайн відповідно до різних колірних схем. Кольори гармонійно поєднуються, створюючи таким чином дизайн, який потребує менше налаштувань.

5. Зображення в градаціях сірого

Замість того, щоб вручну налаштовувати насиченість зображень на 0, додайте шар насиченості поверх зображення. Це може прискорити ваш робочий процес.

6. Інші класні ефекти

Ефект Duotone

Створюйте круті кольорові ефекти за допомогою «Difference» та «Hue». Режим Hue/Difference замінює відтінок кольорів нижче на відтінок його вмісту. Це дозволяє створювати цікаві композиції за короткий час.

Режими змішування, які я використовую найчастіше, це Multiply та Soft light.
Пограйте з режимами змішування у Figma та подивіться, що ви можете створити!

У цій статті розглядаються найкращі практики щодо інтервалів і компонування сітки на основі Material Design, Bootstrap і Figma.

Основи інтервалів

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

Базова одиниця

Базова одиниця визначає, чому буде кратне кожне вимірювання. Це забезпечує узгодженість проектів, покращує зв’язок із розробниками та зменшує кількість рішень, які має приймати дизайнер. Найбільш рекомендованою базовою одиницею є 8 пікселів, оскільки це робить масштабування для різноманітних пристроїв легким і послідовним. Це тому, що більшість розмірів екрана діляться на 8 і тому, що 8 саме по собі є числом, яке легко ділиться (8/2=4, 8/4=2).

Порада: піктограми, текст і деякі елементи всередині компонентів можна вирівнювати за сіткою 4 пікселів, щоб зменшити відстань у невеликих областях і полегшити впровадження.

Розміри

Висоту та ширину елементів інтерфейсу користувача слід вимірювати з кроком базової одиниці (тобто 8, 16, 24), коли це можливо. Це створює чітку ієрархію, акуратно вирівнює елементи та забезпечує послідовний візуальний ритм. Наприклад, можна очікувати, що висота рядка, кнопки та вхідні дані форми матимуть однакову висоту в усіх ваших дизайнах.

Підкладка

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

Основи сітки макета

Сітки макетів виникли в ранньому друкарському дизайні для визначення блоків тексту та зображень, і їхні основні принципи все ще застосовуються до того, як ми сьогодні організовуємо двовимірну інформацію в Інтернеті. Оскільки кількість пристроїв і розмірів екранів зростає, сітки є життєво важливими для підтримки послідовності та створення цілісного дизайну.

Останнім часом сітки стали більш гнучкими та потужними в таких інструментах, як Figma, із розширеною функціональністю, як-от стилі, обмеження розміру та вкладені фрейми (про це пізніше).

Анатомія сітки

Усі сітки складаються з трьох елементів: стовпців (Columns), пробілів (Gutter) і крайніх полів (Margin). Стовпці є будівельними блоками сітки та позначають місця розміщення елементів. Пробіли — це негативний простір між колонами, їх ширина має бути кратною базовій одиниці. Крайні поля — це негативний простір між краєм зовнішнього стовпця та рамкою.

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

Рукописна сітка

Це найпростіший макет із лише одним стовпцем, що охоплює ширину всієї області вмісту. Сітка рукопису може бути корисною під час визначення полів на блоці тексту (як у рукописі).

Сітка стовпців

Сітки стовпців є найпоширенішим макетом для веб-додатків. Сітка розбиває кадр на рівномірно розташовані вертикальні поля, за якими вирівнюються об’єкти. Ці сітки, як правило, складаються з 12 стовпців, які потім можна розділити на половини, третини, четверті та шості під час проектування адаптивних розмірів екрана.

Модульна сітка

Це різновид сітки стовпців. Модульні сітки мають як вертикальні стовпці, так і горизонтальні рядки, які перетинаються і створюють матрицю клітинок або модулів. Ці модулі надають додаткові вказівки щодо компонування як окремих блоків, так і більших блоків, якщо їх об’єднати.

Адаптивні сітки макета

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

Проектування за допомогою сіток у Figma

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

Застосуйте сітки макета до будь-якого кадру

У Figma сітки можна застосовувати до будь-якого кадру, а не лише на рівні монтажної області. Це означає, що сітки можна застосовувати до фреймів верхнього рівня (настільний комп’ютер, планшет, мобільний пристрій), а також до вкладених фреймів (тобто обрамлених областей вмісту або компонентів у вашому дизайні).

Застосуйте обмеження для адаптивного дизайну

Обмеження дозволяють контролювати поведінку зміни розміру будь-якого елемента по відношенню до його батьківського кадру. Наприклад, ви можете закріпити елемент (наприклад, кнопку) до кута рамки та зберегти точний розмір і відступ, коли рамку розширюють або стискають.

При використанні з розтягнутою сіткою макета обмеження будуть відносними до найближчого стовпця, щоб зберегти фіксований простір (жолоб) між елементами. Це особливо корисно при проектуванні для пристроїв кількох розмірів.

Зберегти стилі сітки

Створіть і збережіть кілька власних стилів сітки. Це надзвичайно корисно для підтримки узгодженого розміру пов’язаних областей вмісту, типів компонентів і розмірів пристроїв.

Налаштувати вигляду сітки

Зробіть макети сітки легшими для перегляду, оновивши їхній колір і непрозорість.

Просторові методи та сітки компонування необхідні для всіх проектів веб-дизайну. Вони повинні бути визначені на ранніх стадіях процесу проектування з підтримкою кожного в команді. Це забезпечить узгодженість проектів, чіткі вимоги до розробки та швидшу доставку продуктів.

Варіанти - це групи компонентів, які поєднуються в один. Завдяки цьому дизайнер може будь-якої миті вибрати, в якому стані показати елемент інтерфейсу: кнопку - натиснутою або деактивованою, чекбокс - активним або порожнім.

Розповідаємо, як зробити варіанти для кнопок та скористатися ними у макеті.

Підготовка компонентів

Щоб варіанти працювали, спочатку потрібно правильно назвати компоненти для них. Для цього у Figma є система зі слішами / :

Назва елемента/Значення першої властивості/Значення другої властивості/…/Значення десятої властивості

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

checkbox/large/true

Система назв підтримує і кирилицю, але майте на увазі, що якщо ваш макет потрапить до закордонних дизайнерів, вони не зможуть зрозуміти, що в ньому написано:

чекбокс/великий/відзначений

Як зробити кнопки із системою назв у Figma

• Зробіть кнопку через Auto Layout та вкажіть для неї контрастне тло.
• Двічі клацніть назву елемента і напишіть Button/Primary . Це буде стиль кнопки за замовчуванням.
• Зробіть копію кнопки, додайте на неї чорне обведення та заберіть фон. При необхідності перефарбуйте колір тексту на чорний, щоб він читався. Назвіть кнопку Button/Secondary – це буде додатковий стиль.
• Зробіть з кожної кнопки самостійні компоненти — натисніть на кожну правою кнопкою миші і в меню виберіть Create component

Тепер у вас є два готові компоненти, які можна перетворювати на варіанти.

Створення варіантів

Щоб створити варіанти з ваших компонентів, виділіть їх на панелі налаштувань, у блоці Variants натисніть Combine as variants . Ваші компоненти об'єднаються у спільну групу з варіантами – він називається комбайном.

Зверніть увагу, що додати до фрейму варіантів можна лише компоненти. Якщо разом з ними виділити групи, кадри або копії компонентів, Figma не дасть вам зробити варіанти.

Як скористатися варіантом

• Перейдіть на панелі шарів у вкладку Assets та перетягніть кнопку на макет.
• Виділіть кнопку, що з'явилася, і на панелі інструментів у блоці Button вкажіть значення Property 1 — Secondary .

Ваша контрастна кнопка перефарбується в сірий:

Додавання нових станів

У кожного об'єкта може бути скільки завгодно станів, але їх важливо правильно назвати, щоб потім ви не загубилися у своєму ж макеті. Зараз стани Primary і Secondary відносяться до якості Property 1 – вашому арт-директору буде незрозуміло, що це означає.

Щоб перейменувати Property 1 , виділіть весь комбайн з варіантами і на панелі налаштувань у блоці Variants замість Property 1 напишіть Type . Тепер навіть через десять років будь-кому буде зрозуміло, що в цьому меню потрібно вибрати тип елемента:

Як додати нову властивість

• Виділіть фрейм із варіантами.
• На панелі налаштувань у блоці Variants натисніть іконку, потім — Add new property .
• У полі введення, що з'явилося, напишіть State (стан).
• Знову виділіть комбайн із компонентами та натисніть на плюсик у правому нижньому кутку.
• На панелі налаштувань у блоці Variants напроти слова State напишіть Disable . Перевірте значення Property 1 – має бути Primary .
• Вкажіть непрозорість тла вашої кнопки – 50%.

Тепер у стилю Primary з'явився новий стан Disable . Щоб його активувати, виберіть кнопку на макеті та на панелі налаштувань у блоці Button вкажіть значення State — Disable :

Те саме можна зробити і з додатковим стилем кнопки, щоб ви могли швидко показати її відключеною.

За допомогою варіантів можна змінювати будь-що, наприклад колір, розмір, і додавати іконки.

Коли варіантів стає занадто багато, корисно привести весь фрейм варінатів до ладу, щоб ви могли швидко знайти будь-який стан. Рекомендуємо розташовувати вертикально і групувати за типом кнопок:

Не забувайте, що варіанти це ті ж компоненти. Якщо ви бажаєте змінити кольори або форму кнопок по всьому макету, це можна зробити через комбайн.

Плагін Button Buddy

Створити варіанти кнопок нескладно, але малювати кожну окремо довго і нудно. Вирішити проблему допоможе плагін Button Buddy , який автоматично створює всі основні стани за вказаними вами параметрами.

Як користуватися плагіном:

• Завантажте плагін за посиланням .
• Зайдіть у Figma, натисніть правою кнопкою миші на макет, у меню, що випадає, перейдіть в пункт Plugins і натисніть на Button Buddy .
• У меню виберіть колір і радіус заокруглення кнопок, а потім натисніть на кнопку Create .

У вас на макеті з'явиться готовий фрейм варінатів із базовими станами кнопки:

1. Три параметри

Boolean – дозволяє змінювати видимість шару компонента та має два значення true/false.
Застосовується для всіх шарів компонента.

Text – дозволяє міняти текст через панель properties.
Використовує лише текстові шари.

Instance Swap – дозволяє замінювати вкладені компоненти.
Використовується тільки для вкладених компонентів.

2. Як додати

Виберіть компонент, натисніть + на панелі Properties і виберіть властивість, введіть назву — параметр створено. Тепер оберіть шар і прив'яжіть його до потрібної властивості.

Виберіть потрібний шар, натисніть на іконку властивості та виберіть Create property, введіть назву, яка з'явиться на панелі Property.

3. Boolean

Приховує не лише шари, а й пов'язані з ним параметри з панелі properties.

4. Instant swap

Чутливий до ієрархії. Він пропонує замінити компоненти що з ним одному рівні (file, page, artboard). Якщо ви хочете обмежити список пропонованих instanс'ів, об'єднайте їх в один artboard.

Тут криється перше обмеження – через properties ви не можете перемикати варіанти вкладеного компонента. Для того щоб працювати Instant swap це повинні бути самостійні компоненти не об'єднані як variants.

Bonus

При виборі шару всередині компонента з варіантами figma запропонує вибрати подібні (іконка прицілу).

Що це нам все дає?

- Найочевидніше застосування - скорочення великих матриць варіантів. Іконки на кнопках, нотифікації на табах/аватарах та багато іншого можна тепер зробити boolean props без дублювання.
- Зміна тексту знадобиться якщо з макетом взаємодіють менеджери, коли потрібно буде поміняти назву кнопки, наприклад, на вимогу комплаєнсу. Менше ризик, що вони щось зможуть пошкодити.
- З Instant Swap не потрібно буде постійно провалюватися в шари компонента, щоб щось змінити (логотип компанії, іконку тощо).
але...

Що таке Components Properties насправді?
Як на мене це скоріше концептуальний розворот, ніж банальне оновлення.

Як еволюціонувала робота з компонентами:

• На самому початку кожен стан елемента потрібно було робити окремим компонентом, артборди були обмежені в адаптиві, не можна було використовувати вкладені компоненти - бібліотеки були перевантажені компонентами під кожен стан і розмір інтерфейсу.
• Auto layout дозволив скоротити кількість компонентів зав'язаних на різниці в розмірах, адаптивність так само дозволила скоротити деякі стани приховуючи якісь елементи ... Але - всередині стала з'являтися велика кількість прихованих шарів.
• Variants привнесли ієрархію, прибрали необхідність провалюватися всередину компонента щоб увімкнути чи вимкнути якийсь елемент… Але – повернули великі матриці компонентів.
• Components Props вирішили проблему великих матриць компонентів, у якомусь сенсі повернув нас до управління станами видимістю і зробив це зручніше... Але були повністю переосмислені варіанти.

Мені здається попереду на нас чекатимуть більше нових властивостей, але й варіанти нікуди не подінуться, тому що без них не працюватимуть інтерактивні компоненти. Дякуємо за увагу.

Що таке компоненти у Figma, і як вони прискорюють робочий процес?

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

Наприклад, якщо ви намалюєте іконку і зробите компонент, а потім скопіюєте її, то при зміні кольору, розміру та інших параметрів головного компонента, копія буде змінюватися відповідно.

Найпростіший компонент – кнопка. Важливо пам'ятати, що її вигляд не повинен змінюватися від переходу до екрану.

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

Головна перевага роботи з компонентами – можливість вносити зміни до всіх екземплярів проекту відразу, змінюючи тільки мастер-компонент. Це прискорює робочий процес та робить дизайн-систему проекту більш узгодженою, спрощує процес її підтримки та співробітництва з іншими дизайнерами.

Поведінка компонентів: майстер-компонент та екземпляр-компонент (instance)

Перед тим як перейти до рекомендацій щодо роботи з компонентами, треба ознайомитися з поняттями мастер-компонент (master components) та екземпляр-компонент (component instances).

Мастер-компонент створюється при перетворенні елемента інтерфейсу на компонент і визначає його властивості.

Екземпляр-компонент – це копія мастер-компонента, який може повторно використовуватись у різних проектах. Щоб відрізнити мастер-компонент від екземпляра, подивіться на панель шарів. Мастер-компонент позначений іконкою із чотирма зафарбованими ромбами, екземпляр – іконкою з одним контурним.

Примірники безпосередньо пов'язані з майстер-компонентом, тому при внесенні змін до мастер-компонента екземпляри змінюються разом з ним.

Важливо враховувати, що екземпляр успадковує всі зміни, внесені в майстер-компонент крім перевизначення якості та наповнення екземпляра. Зв'язок цих властивостей та наповнення буде розірвано, відновити його можна в панелі властивостей екземпляра.

Компоненти Figma – це одна з головних переваг програми. Щоб не перемальовувати кожен елемент окремо, використовуйте компоненти. Редагуючи лише одну іконку або кнопку, можна вносити комплексні зміни у весь проект. Наступний крок після роботи з компонентами – створення бібліотеки компонентів Figma, де можна зберігати основні заготовки для інтерфейсів. Вона позбавляє подвійної роботи і дозволяє використовувати загальні елементи повторно.

Вибудувати якісну систему компонентів – це складне завдання для новачка. Але як тільки її буде вирішено, у вас з'явиться час, щоб випити не одну, а дві чашки кави.

Щоб зробити маску в Figma накладіть один елемент на інший. Виділіть 2 цих елементи та зверху натисніть на іконку маски «Use as mask». Також для створення маски можна натиснути гарячі клавіші Ctrl+Alt+M. На панелі шарів з'явиться група з маскою, яку можна редагувати.

Елемент, який був зверху, буде обведений по контуру нижнього об'єкта.

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

Як прибрати маску у фігмі

Щоб прибрати або вимкнути маску у фігмі, відкрийте групу з маскою в шарах (Mask Group) і виберіть нижній елемент з іконкою маски. Потім натисніть на піктограму зверху по центру «Use as mask» і ви вимкнете створену маску.

Як використовувати маску у фігмі

Використовувати маску у фігмі можна для обрізання будь-яких об'єктів за певним контуром і формою. Наприклад, можна зробити фото у формі кола, накласти фото поверх тексту і видалити заднє тло на фото у простих елементів.

Як вставити фото в коло фігма за допомогою маски

Щоб вставити фото в коло у фігмі, створіть коло за допомогою стандартних інструментів фігми. Вставте фото, помістіть коло внизу фотографії та натисніть на іконку маски «Use as mask».

Як накласти фото поверх тексту за допомогою маски у фігмі

Щоб накласти фото поверх тексту у фігмі, напишіть якийсь текст та розмістіть фотографію. У шарах помістіть текст вниз фотографії та натисніть зверху по центру піктограму маски Use as mask.

Як видалити фон на фото у фігмі за допомогою маски

Щоб видалити фон у якогось фото у фігмі за допомогою маски, слід зробити контур навколо цього об'єкта (контур робимо за допомогою інструмента Pen, тобто просто відмальовуємо цей обʼєкт). Помістити його вниз фотографії та натисніть на іконку маски зверху по центру.

Почнемо з того, що визначимо основні стилі тексту. За досвідом мінімальний базовий набір повинен включати себе:

1. Стилі заголовків до 5-го рівня.
2. Група стилів для основного розміру тексту (просто текст, жирний текст, підкреслений текст для дизайну посилань).
3. Аналогічна група для дрібного тексту.
4. Іноді необхідно також продумати набір стилів для супер-дрібного тексту (якісь підписи або дрібні деталі інтерфейсу) та великого тексту (виділення, цитати та інше).
5. Стиль для написів на кнопках
6. Стиль для меню та іншої навігації у шапці сайту

Не хвилюйтеся, якщо ви щось забудете - у міру роботи над вашим проектом, ви завжди зможете додати до своєї системи необхідні стилі.

Як це робиться:

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

Система пропонує створити ім'я для нашого стилю, після чого він з'явиться у вас на панелі зліва. Я волію називати всі об'єкти в проекті англійською мовою. У крайньому випадку використовую трансліт.

Аналогічно створюються всі необхідні стилі для вашої системи дизайну.

Отже, ми задали необхідний мінімальний набір стилів для тексту - це ті стилі, які на мій досвід, найчастіше потрібні при дизайні середньостатистичного сайту. Якщо після роботи над проектом вам будуть потрібні інші варіанти оформлення тексту (наприклад, ви захочете вставити цитати курсивом або величезні напівпрозорі фрази в дизайн), ви легко зможете повернутися до вашої дизайн-системи та додати все необхідне.

Колір

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

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

Після того, як ми закінчимо з кольором та текстом, ми побачимо значний список різних стилів у правій панелі у Figma:

Тіні, плашки, стилі обведення у форм та інші ефекти

Думаю, час уже нам познайомитися з компонентами.

Насамперед ми створимо компонент для плашки, налаштуємо її зовнішній вигляд, попутно створимо стиль для всіх тіней у проекті (тіней для плашок у тому числі).

Отже, створимо прямокутник. Задамо йому білий колір (обов'язково з нашої палітри стилів, яку ми налаштували вище). При необхідності ми також можемо встановити прямокутнику радіус заокруглення кутів і колір обведення. Тінь ми створимо трохи згодом.

Виділяємо наш прямокутник та створюємо новий компонент. Не забудьте встановити нове ім'я для компонента на панелі шарів зліва.

Якщо проклікатися до нашого прямокутника, то в лівій панелі у вкладці Constraints ми побачимо, що за умовчанням прив'язки до країв задані як Scale. Це означає, що об'єкт пропорційно масштабуватиметься при зміні розмірів компонента. Задайте значення як на зображенні:

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

Далі виділяємо наш компонент та у правій панелі шукаємо вкладку Effects. Додаємо та налаштовуємо тінь. Тінь застосовується безпосередньо до компонента. Я віддаю перевагу м'яким, неяскравим розмитим тіням, які не надто кидаються в очі, але при цьому м'яко підкреслюють плашки.

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

Створений стиль з'явиться у нашому проекті під стилями кольору:

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

Щоб побачити блок Constraints, треба виділити будь-який елемент вашого дизайну та подивитися на праву бокову панель . Блок зоражено «хрестиком», в якому ви задаєте значення для позиціонування вашого елемента.

Значення Constraints

Елемент можна вирівнювати щодо ширини чи висоти батьківського блоку.

Можливі різні комбінації. За замовчуванням встановлено значення Left, Top — це означає, що при зміні розміру батьківського блоку, ваш об'єкт перебуватиме у лівому верхньому кутку, а також матиме фіксовану ширину та висоту.

Щоб задати «гумова» ширину/висоту, треба вибрати або значення Scale, або Left&Right(Top&Bottom)

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

Left&Right - у свою чергу, фіксує лівий і правий край, а ширина елемента змінюється. Відмінно підходить для створення полів введення, що тягнуться.

Наприклад, ви розтягуєте тло у кнопки, тобто дочірній елемент та батьківський будуть одного розміру. У цьому випадку немає різниці між scale та left&right

💁‍♂️ Tip. При затиснутій клавіші Shift, в хрестику constraints можна вибрати подвійні значення, наприклад Top Bottom і Left Right (не відкриваючи селект, що випадає)

Галочка «Fix position when scrolling» фіксує позицію елемента при скролінг батьківського блоку. Елемент, позначений цією галочкою, виноситься на верх у списку шарів, і потрапляє в блок FIXED. З'являється блок SCROLLS, куди потрапляють усі скрольовані елементи макету.

💁‍♂️ Tip. Fix position when scrolling — можна використовувати для демонстрації роботи елементів із фіксованою позицією: «залипаючих меню», онлайн-чатів, попереджень про використання кукіс, кнопок автоскрола на початок сторінки тощо.

Подивитися, як це працює можна в режимі презентації, натиснувши кнопку «Play» у верхньому правому кутку вікна Figma (поряд з кнопкою Share)

Застосування Constraints

Кнопки

Із кнопками все досить просто. У нас є два (іноді три) елементи. Перший - це фон, який розтягується на всю ширину і висоту кнопки, і текст, який має однакові відступи праворуч і ліворуч, а саме текстове поле займає всю ширину, за винятком цих відступів

Фон - Left & Right, Top & Bottom
Текстове поле - Left & Right, Center

+ Іконка — Left, Center

Tip. Чому ширина текстового поля Left&Right? Та тому так простіше підганяти ширину кнопки під інший текст.

Форми

З полями форм схожа ситуація, як і з клавішами, але елементів у нас на один більше (залежить від дизайну).

Фон - Left & Right, Top & Bottom
Підкреслення в полі - Left & Right, Bottom
Текстове поле - Left & Right, Center
Іконка (маркер списку) — Right, Center

Шапка сайту

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

З фоном все просто, зробимо так само як і з полем форми:
Фон - Left & Right, Top & Bottom
Лінія знизу - Left & Right, Bottom

Елементи, які повинні позиціонуватися по лівому краю, ми «завертаємо» в окремий кадр усередині нашої шапки і виставляємо значення constraints — Left, Center (на випадок, якщо захочемо міняти висоту шапки, якщо ні, то можна вибрати — Top)

Теж саме проробляємо з елементами, які повинні позиціонуватися праворуч, і виставляємо значення — Right, Center

… та логотип — Center, Center

Якщо ви задумали шапку, що «залипає» при скролінгу, не забудьте встановити галочку Fix position when scrolling.

Картка товару

З карткою товару все індивідуально. У моїй картці є фотографія, назва товару та його ціна, назва виробника, дві іконки: купити, sale. Іконку «відсоток» я зробив із підписом, щоб трохи ускладнити приклад.

Давайте розумітися. Картку у нас може змінити ширину та висоту, при цьому розміри можуть змінитися пропорційно чи ні.

Іконка купити завжди буде праворуч і внизу, відповідно вибираємо в constraints — Right, Bottom

Назва виробника - праворуч і вгорі - Right, Top

Ціна - Left, Bottom

Назва товару може бути коротшою або довшою за поточний. Тому ми розтягуємо текстове поле на всю ширину плашки, за вирахуванням бічних відступів. Так ми покажемо хлопцям, які верстати, який розмір має бути біля рядка з назвою товару. Відповідно виставляємо значення - Left & Right, Bottom

Щоб наша фотографія товару розтягувалася пропорційно до зміни розміру картки виставляємо їй значення — Left & Right, Top & Bottom

І, насамкінець, залишилася іконка відсотка з підписом. Щоб вона завжди перебувала на перетині білої області та фотографії, ставимо їй позиціонування — Right, Bottom, і такі самі значення для підпису sale.

Перевірено!
Якщо не лінуватися і встановлювати значення Constraints для елементів дизайну, то згодом це заощадить ваш час при створенні адаптиву сайту.

💁‍♂️ One more Tip. При зміні розміру батьківського об'єкта затисніть Cmd (Ctrl для Windows), і значення constraints будуть ігноруватися. Часто використовую зміни розміру висоти сторінки.

Вирівнювання можна виконувати й вручну, але щоб підвищити швидкість роботи Figma надає спеціальні інструменти. Щоб вирівняти об'єкти, потрібно:

• Виділити обидва прошарки з об'єктами. Зверніть увагу, що менший об'єкт буде вирівнюватись відносно більшого у тому випадку, якщо виконується вирівнювання по краю (лівому, правому, верхньому, нижньому). Якщо робити вирівнювання по центру (горизонтально або вертикально, обидва об'єкти можуть зміститись);
• На правій панелі клацнути по одному з типів вирівнювання. Вони знаходяться зверху панелі властивостей відразу під вкладкою Design. Розглянемо кожен вид вирівнювання та гарячі клавіші:
• Align Left – вирівняти з лівого краю більшого об'єкта. Option + A в MacOS. Alt + A у Windows;
• Align Horizontal Centers – вирівняти горизонтально по центру більшого об'єкта. Option + H у macOs. Alt + H у Windows;
• Align Right – вирівняти праворуч відносно більшого об'єкта. Option + D у macOs. Alt + D у Windows;
• Align Top – вирівняти по верхньому краю більшого об'єкта. Option + W в MacOS. Alt + W у Windows;
• Align Vertical Centers – вирівняти по верхньому краю більшого об'єкта. Option + W в MacOS. Alt + W у Windows;
• Align Bottom – вирівняти по нижньому краю більшого об'єкта. Option + S у macOs. Alt + S у Windows.
• Зверніть увагу, що гарячі клавіші для вирівнювання виставлені в такому ж порядку, як і кнопки-стрілочки. Ще одна аналогія для геймерів – гарячі клавіші вирівнювання аналогічні до переміщення в будь-якому 3D-шутері, наприклад Counter-Strike (AWSD).
• Одразу після клацання об'єкти будуть миттєво переставлені в нове місце, координати зміняться. Ви можете продовжувати натискати на інші типи вирівнювання, спостерігаючи, як оновлюється положення.

Вирівнювання кількох об'єктів відносно іншого

Тут послідовність дій така сама, як і в попередньому випадку, але вибрати потрібно більше двох об'єктів. Вирівнювання буде відбуватися відносно найбільшого.

Зверніть увагу, що об'єкти, які вирівнюються, змінюють своє положення один відносно іншого (оскільки вони різного розміру). Щоб уникнути цього, необхідно попередньо згрупувати об'єкти, що показано в наступному розділі.

Вирівнювання групи відносно об'єкта зі збереженням позиції

Звучить суперечливо, але після перегляду інструкції нижче все стане на свої місця.

Отже, попереднє групування дозволяє зберегти відносні позиції прошарків, що вирівнюються, що іноді стає в нагоді. В іншому випадку без групування при застосуванні кількох вирівнювань усі об'єкти можуть перемішатися в купу, що і сталося на початку відео.

Вирівнювання відокремлених об'єктів

Якщо виділені об'єкти розташовані окремо (без великого об'єкта, який перекриває за розмірами інші, як у попередніх прикладах), то вирівнювання відбуватиметься щодо меж усіх виділених об'єктів. На практиці це виглядає так (після кожного вирівнювання застосовується скасування останньої дії Cmd+Z або Ctrl+Z):

Вирівнювання одного об'єкта всередині фрейму

Якщо виділити лише один об'єкт усередині кадру, він вирівнюватиметься за межами останнього:

Як бачите, залежно від контексту інструмент вирівнювання працює по-різному. Переконайтеся, що ви розумієте, як буде вирівняно об'єкти в залежності від ситуації. Привчайтесь до гарячих клавіш.

Рівномірний розподіл

Ще один дуже корисний інструмент для розміщення об'єктів. Уявіть собі ситуацію: у вас є кілька прямокутників (кнопок), але відстані між ними є різними, а вам потрібні однакові. Звичайно, можна самому все розставити, але інструмент Tidy Up зробить це за вас. Для цього вибираємо усі об'єкти та натискаємо Ctrl+Alt+T у macOs або Ctrl+Alt+Shift+T у Windows. Клацаємо по полю, що з'явилося, і кнопками-стрілками (вгору і вниз) підбираємо відповідну відстань між елементами або вписуємо значення і натискаємо Enter.

Є ще два схожі інструменти – Distribute Vertical Spacing (Ctrl+Alt+V у macOs та Ctrl+Alt+Shift+V у Windows) та Distribute Horizontal Spacing (Ctrl+Alt+H у macOs та Ctrl + Alt + Shift + H у Windows). Вони мають дві відмінності:

1. Вони розподіляють виділені об'єкти всередині своїх кордонів, тобто після перерозподілу об'єктів, вони займатимуть той самий простір, що й до застосування операції. Інструменту Tidy Up навпаки начхати на те, скільки в результаті простору займуть об'єкти на нових позиціях;
2. Вам потрібно вказати, у якому напрямку розподіляти об'єкти (горизонтально або вертикально). Tidy Up робить це автоматично.

На практиці це виглядає так:

Не забуваємо, що розподіл можна застосовувати разом з вирівнюванням. Це дозволяє швидко впорядкувати велику кількість неточно розставлених об'єктів.