Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Три найкращі дизайн-системи Figma у 2023 році для UI/UX дизайнерів

Мене звати Свят, я Design Lead в TechMagic, і за час своєї роботи я зрозумів, що проєктувати складний інтерфейс без хорошої дизайн-системи — це намагатися побудувати замок з Lego без інструкції. Можливо, ви зможете зробити щось, що виглядатиме добре, але воно не буде таким надійним та ефективним, як могло б бути.

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

За визначенням Nielsen Norman Group, дизайн-система — це повний набір стандартів, призначених для управління проєктуванням у масштабі за допомогою багаторазових компонентів і патернів.

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

У цій статті я розповім про найкращі дизайн-системи, якими мав нагоду користуватись. Зазначу, що всі Figma бібліотеки дизайн-систем з цього списку створені з autolayout, properties та використанням атомарного підходу Бреда Фроста, що робить їх гнучкими у використанні та адаптації під власні потреби.

1. Material Design

Material Design 2 — одна з найпопулярніших дизайн-систем, і тому не дивно, що саме її я найчастіше використовував її у своїх проєктах. Система, розроблена компанією Google, є універсальною та підходить як для веб, так і для мобільних проєктів.

Для мене одна з переваг Material Design — це легкість в роботі з компонентами. Вони мають дуже чітку документацію, де можна знайти відповіді на запитання. Крім того, є багато ресурсів для початківців, щоб почати роботу та зрозуміти основну ідеологію Material Design.

Нещодавно Google випустив Material Design 3, яка є найновішою версією станом на березень 2023 року. Хоча третя версія наразі підтримується лише платформою Android, команда Material Web наполегливо працює над створенням підтримки вебкомпонентів.

Бібліотеки Figma Material 2 і Material 3 є об’ємними та містять усі компоненти, які знадобляться для більшості стандартних проєктів. Рік тому Google припинив оновлення Figma бібліотеки для другої версії, та радить всім перейти на третю, щоб і надалі отримувати останні оновлення та переваги. Обидві версії містять детальні вказівки й описи всіх стилів, компонентів, рекомендації щодо доступності, бібліотеку іконок, глосарій термінів та багато іншого.

Material Design 3 також має компоненти для темної теми та дизайн токени, які допоможуть вам налаштувати проєкт і створять єдиний вигляд для всіх компонентів. Система розроблена з урахуванням вимог WCAG 2.1, що робить її доступною для широкого спектру проєктів і випадків використання. Завдяки хорошій бібліотеці компонентів і детальній документації Material Design неодноразово допомагав мені заощаджувати час та створювати консистентний і доступний дизайн.

2. Carbon

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

Коли я вперше почав використовувати Carbon, мушу визнати, я був трохи наляканий. Але команда IBM виконала чудову роботу, створивши короткі ознайомлювальні відео для швидкого початку роботи. Відео зняті кілька років тому, коли в IBM ще використовували Sketch, але це не має значення — вони все ще корисні та інформативні.

Бібліотека Figma та репозиторій GitHub (React, Angular і Vue) містять різноманітні компоненти, які спрощують роботу навіть над досить складними проєктами. Документація також хороша — вона покриває багато аспектів, від рекомендацій щодо патернів до вимог щодо візуалізації даних. Також містить бібліотеку іконок, інструменти перевірки доступності, які дозволяють легко переконатися, що ваш проєкт відповідає вимогам WCAG 2.1 та багато іншого.

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

3. Orbit

Orbit — дизайн-система тревел-компанії Kiwi. Ми з командою використовували її в одному з наших проєктів, і наш досвід був чудовим. Для мене однією з ключових переваг Orbit стала її гнучкість. Будова компонентів дозволила нам швидко адаптувати їх до наших потреб і вимог.

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

Бібліотека Figma та репозиторій GitHub (React) містять широкий спектр різних компонентів з документацією до кожного з них. Orbit також має дизайн-токени, бібліотеку іконок, рекомендації щодо різних стилів, вимоги доступності та багато іншого. Врахування всіх цих аспектів дозволяє забезпечувати узгоджений вигляд та передбачувану поведінку інтерфейсу, а також робить його зручним для користувачів з різними особливостями (за винятком кольору Product Normal, про проблеми з яким вони проінформовані та це чітко вказано на їхньому сайті).

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

Bottom line

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

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

Також вас може зацікавити моя стаття про 10 найпопулярніших плагінів Figma для UI/UX дизайнерів. Запрошую до прочитання.

👍ПодобаєтьсяСподобалось56
До обраногоВ обраному27
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Я не дизайнер, але було цікаво)

Дякую! Радий, що вам було цікаво)

Дякую, цікавий матеріал, я не знав за існування Orbit системи.

Дякую! Радий, що вам було цікаво)

На минулій роботі писав мобільний додаток на MAUI, використовуючи Material Design 3. Виглядає приємно. Дизайнера на проекті не було, тому проектував дизайн власноруч. Фігму так і не освоїв, простіше було робити дизайн прямо при розробці =)

Це круто, що ви також задоволені роботою з Material Design 3. Якщо знову буде нагода працювати без дизайнера, та потрібно буде щось робити в фігмі, можу вам порекомендувати плейлист від офіційного ютуб каналу фігми — New to Figma? Get started with «Figma for beginners» tutorials. Це покрокове та дуже швидке представлення основних функцій фігми, можливо зможе вам допомогти розібратися швидше)

Дякую, матеріал цікавий та вкрай корисний!

Дякую! Радий, що вам сподобалось)

Підписатись на коментарі