Дизайн-система в Figma. Погляд на інтерфейс через компоненти

Якою повинна бути оптимальна дизайн-система в Figma? Що таке перевикористовуємий компонент? Як зрозуміліше і зручніше організувати структуру всередині панелі Instance? Які етапи розробки подібного продукту? І так далі. Відповіді на ці та інші запитання я спробую дати в цій статті.

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

Осмислення застосування настає після хайпу.

Як і будь-яке нововведення на ринку, дизайн-системи пережили хайп і перейшли в стадію практичного переосмислення. Відтепер їх можна застосовувати зовсім у різних випадках і для вирішення більшого типу задач. Для великої організації — це візуальна мова, брендинг, порядок, єдність дизайну і коду. Для невеликих організацій — це командна бібліотека в Figma, в якій ефективний невеликий штат розробників і дизайнерів. Дизайн-систему може застосовувати для своїх завдань і приватний фрілансер — це і автоматизація правок від клієнтів (через майстер-компоненти він швидко рухає пікселі, змінює кольори і форми) і поступово зростаюча база UI віджетів (всі вони впорядковані і логічно перебудовуються при resize). Швидкість виконання завдань з таким продуктом зростає в кілька разів. Сьогодні кожен зможе знайти для себе плюси роботи всередині дизайн-системи.

Як би я пояснив суть дизайн-системи в Figma простою мовою? Всього в чотири слова: “Поміняли тут змінилось скрізь”. У цьому полягає головний принцип використання компонентів і примірників при розробці будь-якого інтерфейсу, який при коректній послідовності використання атомів і молекул для створення темплейту, перетвориться згодом в повноцінну систему.

Дивитися на світ і бачити компоненти

Раніше дизайнеру достатньо було просто малювати і рухати пікселі. Іноді він навіть упорядковував і акуратно переназивав верстви і групи. Потім з’явилися символи і дали 50% автоматизації процесів. Зараз компоненти та зміни можна транслювати автоматично в різні фрагменти артбордів, розкидані по всій дизайн-системі. Застосування компонентів змінило і сам підхід до візуальної розробки.

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

Уніфікація компонентів і переиспользуемость.

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

Читайте також  Flutter для Android-розробників. Як створювати UI для Activity, використовуючи Flutter

Бачите? Обидва компоненти ідентичні за структурою, відрізняється лише розмірність і щільність шрифту, контент у круглому елементі.

Для створення інтерфейсу неможливо придумати якийсь новий модуль. Всі списки, таблиці, заголовки і акордеони вже існують, але використовуються іноді по-різному. При плануванні складу компонентів потрібно починати з дослідження на предмет пошуку візуально схожих, щоб постаратися звести до одного компоненту в системі, примірник якого буде використовуватися повторно з різним наповненням. Хоча зараз Figma досить потужна, щоб зберігати в одній бібліотеці 500 і більше компонентів, краще намагатися зводити їх до мінімуму, щоб простіше було організувати структуру. Отже, настав час нарешті перейти до самого продукту…

Кейс: дизайн веб-система для landing сайтів. Зустрічайте Websy!

У цій статті мова піде про конструювання веб-сайтів. Слово “конструювання” використовувалося неспроста. Ця дизайн-система є своєрідним конструктором, щоб з наданих блоків швидко створювати будь-які templates, і ще швидше їх кастомізувати. Як для мобільних пристроїв так і для десктопних. Саме компонентна архітектура дозволить зробити це ефективно; щоб у майбутньому ви могли просто клонувати ісходник, швидко змінити колір, типографіку та створювати теми. “Поміняли тут змінилось скрізь”. Пам’ятаєте?

Дослідження і аналіз майбутнього складу

Landing-сайти ідеальна сфера застосування компонентного підходу. Вистачить пальців двох рук, щоб перелічити всі блоки, з яких будується класичний веб-сайт, що рекламує товар, послугу або сервіс: Header, Footer, Call to action, Features, Testimonials, Download, Video і так далі. Принцип такої системи для конструювання в наявності достатніх комбінацій всіх перерахованих блоків. Таким чином можна зібрати пазл будь-який сайт + мобільну версію. Залишалося лише як дослідження вивчити сотню свіжих landing-сайтів і колекціонувати найбільш часто використовувані елементи. Їх у майбутньому я перемалюю, створю компоненти, поставлю певний стиль і в кінці зберу темплейти. Забігаючи вперед, скажу що в підсумку вдалося зібрати 18 повноцінних темплейтів: 9 повноекранних і 9 мобільних версій. Я намагався створити універсальні шаблони, які однаково підходили б для презентації сервісів, додатків, портфоліо і будь-яких інших продуктів

Більшість сайтів в основному безликі

Саме до таких висновків я прийшов, коли спробував просто гуглити. Веб загалом швидко застаріває і це нормально. Адже бути в актуальному дизайні — це завжди зміни. А ми ставимося до змін з побоюванням, обережністю. Якщо старий сайт працює і абияк продає себе, то краще не заважати механізму працювати. Але є компанії, які займаються оптимізацією внутрішніх процесів. І продуктовий дизайн для них не на останньому місці. Більшість хороших сайтів, щоб провести аудит, мені вдалося знайти на hyperpixel.io і www.lapa.ninja. Я припускаю, що переглянув 100+ різних посилань і це лише мала частина списку. Має бути почуття міри, щоб розуміти обсяг, необхідний для першої версії (читайте MVP). Тому я зупинився, коли обсяг компонентів у розділі Text blocks (різні текстові блоки, можливо з формами і кнопками) досяг числа 30:

Читайте також  Повне керівництво по правильному використанню анімації у UX

Зовнішній вигляд продукту

Як саме має виглядати продукт? Один з важливих питань на етапі проектування. На пошук відповіді і дослідження витрачаються величезні ресурси компаній. Для себе я вирішив так — продукт повинен бути візуально актуальним. Дизайн і стилістика повинні бути не вчорашніми, не завтрашними, а в тому вигляді, який зараз в тренді. Простий приклад: сьогодні рідко де зустрінеш шрифт Open Sans в західному інтернеті, хоча три роки тому він був дуже актуальний. Якщо Google як бренд переходить на Product Sans, треба придивлятися до схожих шрифтів. Якщо Intercom використовує стилістику papercut у своєму продуктовому дизайні, треба зрозуміти як схожі прийоми використовувати в своїх проектах. Зараз типографіка — це одночасно дизайн, посилання і настрій. З неї і почнемо.

Хороший шрифт — це вже половина справи

Ідея прийшла зовсім раптово. Неймовірно пропорційний neo-гротеск Objectivity (на жаль, немає русифікації) відразу ж вразив мене своєю актуальністю. Alex Slobzheninov проробив колосальну роботу і дозволив безкоштовне комерційне використання. Мені відразу ж захотілося щось “задизайнити” на основі цього шрифту. Якийсь час я водив його по артбордам в Figme, перш ніж зрозумів “Це ідеальний шрифт для веба!”. Мабуть в той момент і народився план створення системи саме для web.

Хороша дизайн-система в Figma — це:

  • Використання глобальних стилів (типографіка, колір, тіні)
  • Врахована логіка зміщення внутрішніх об’єктів при resize компонента (constraints)
  • Використання примірників для різних станів об’єктів (hover, active і т. п.)
  • Неймінг з використанням “/” символу для створення зручної структури примірників
  • Створення складних компонентів з простих (молекули → темплейти)
  • Наявність вбудованої бібліотеки з впорядкованими іконками

Тепер мені хотілося б розповісти про кожен пункт окремо, отже…

Використання глобальних стилів

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

Кольори

Скільки квітів зберігати в системі? Мені зустрічалися дизайн-системи під Sketch в яких були оголошені всі кольори веселки + десяток відтінків для кожного. У реальності це надмірно багато і 80% такої палітри ніколи не будуть використовуватися. У моїй системі Websy, про яку я починаю розповідати докладно з цього моменту, зберігається всього 8 кольорів: білий, чорний, основний колір (action), додатковий колір (secondary), і 4 градації чорного. З білим і чорним, я думаю, все ясно. Action & Secondary кольору ми використовуємо для забарвлення елементів, з якими можна взаємодіяти (кнопки, іконки, посилання). Secondary колір можна використовувати для акценту. Наприклад, для виділення важливої фрази, слогану і т. п. Допускається оголошення Success / Warning кольорів, якщо ваша система більше про інтерфейси, ніж про сайти.

Читайте також  Виявлені елементарні дизайн-частинки

Тіні

Я адепт матеріального дизайну, тому я тримаю в системі кілька варіантів підйому над площиною (elevation). У Websy ви знайдете 4 комбінацій тіней: 2dp, 4dp, 8dp, 16dp. Вони відрізняються зміщенням і розмиття (blur). Наприклад, для звичайної картки рекомендується використовувати 2/4dp тіні. Для випадаючих списків, onhover станів і діалогів можна використовувати 8/16dp. Уважний дизайнер вже помітив, що деякі продукти Google зараз використовують reflex-тіні і подвійні тіні, які більш реалістичні. Тому додатково в системі оголошено кілька багатошарових тіней, які дають дуже реалістичний ефект:


Через глобальні стилі тіні перемикаються всього в пару кліків.

Обведення

Параметр Stroke в Websy регулюється через кілька окремих компонентів, які відрізняються різними параметрами скруглення кутів. Обведення найчастіше використовується для кнопок і текстових полів. Подібно тіням, оголошено 5 варіантів скруглення кутів: 0px, 4px, 8px, 16px і 99px. Для чого стільки? Почну з прикладу того, як взагалі використовується компонент обведення, наприклад для кнопки:

Розмістивши кнопку, яка за замовчуванням має обведення 4dp, можна виділити компонент Stroke і переключити через панель Instance скруглення кутів в меншу або більшу сторону. Це трохи більш складний спосіб, але дозволяє зберігати в окремому майстер-компоненті різні види округлень. Найпростіший спосіб — змінювати ступінь скруглення через поле вводу в правій панелі. Аналогічна схема застосовна і для текстових полів, карток або будь-яких фонових компонентів.

Розстановка constraints компонентів.

Давайте я розповім про цей пункт та інших у наступній главі. Про поведінку модулів і елементів при зміні розмірів потрібно сказати багато чого. А також ми перейдемо до дуже цікавої частини — опису всіх компонентів у складі веб-дизайн системи Websy. І, можливо, розглянемо деякі готові темплейти для landing pages. Обговоримо їх склад і гнучкість зміни блоків, щоб підганяти під будь-які потреби і цілі… Підписуйтесь, якщо цікаво.

На десерт невелике відео.

В даному ролику я з допомогою готових компонентів збираю layouts, які будуть використовуватися в якості екранів-презентацій для системи. Перший варіант мені сподобався менше, а другий (починається з 1:30) я взяв за основний:

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *