Типографіка

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

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

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

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

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

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

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

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

Колір

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

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

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

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

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

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

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

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

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

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

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

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

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