Методологія Atomic Design для проектування дизайн-систем

Переклад статті Rohan Kamath

Весь процес взаємодії з дизайн-системами та їх створення був для мене, як для дизайнера, одним з найцінніших досвідів, який я отримав за свою кар’єру. Протягом останніх кількох років я працював з різними дизайн-системами, від найпопулярніших, таких як Material UI, IBM Carbon та Ant Design, до власних бібліотек компонентів. Раніше я в основному використовував аудит інтерфейсу користувача, щоб орієнтуватися в процесі створення дизайн-систем. Однак нещодавно, працюючи над великим проектом, я натрапив на методологію Atomic Design. Можна сміливо сказати, що вона змінила мій підхід до дизайн-систем. Ось все, що вам потрібно знати, щоб застосувати Atomic Design у вашому наступному проекті.

Що таке атомарний дизайн?

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

Усі ми в школі на уроках хімії вчили, що

Вся матерія складається з крихітних частинок, які називаються атомами.

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

Щоб пояснити це краще, візьмемо для прикладу воду або H2O. Хімічне рівняння показує, що вона містить 2 атоми водню і 1 атом кисню; обидва вони є незалежними самі по собі. Але, коли вони поєднуються, ми отримуємо одну молекулу H2O, або те, що ми називаємо «водою».

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

Елементи атомарного дизайну

Так само, як і матерію, компоненти в дизайн-системі можна ієрархічно організувати в різні рівні залежно від їхньої будови та складності. Хоча стандартний принцип Atomic Design, розроблений Бредом Фростом, має п’ять рівнів, я віддаю перевагу модифікованій версії з додатковим рівнем, оскільки це полегшує прийняття дизайнерських рішень.

Рівні атомарної архітектури такі:

1. Субатомні частинки
2. Атоми
3. Молекули
4. Організми
5. Шаблони
6. Сторінки

Давайте розглянемо їх детальніше

Щоб краще зрозуміти кожну з них, я використаю кілька скріншотів застосунку Spotify для iOS і розберу їх.

Субатомні частинки

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

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

Субатомні частинки на сторінці профілю артиста Spotify

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

Атоми

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

Визначення атомів в Spotify

Молекули

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

Молекула назви пісні Spotify

Організми

Це найвищі рівні складності будь-якого компонента інтерфейсу. Організми може бути складно розпізнати, оскільки вони складаються з декількох молекул; іноді вони повністю різні, а іноді однакові молекули повторюються кілька разів. Заголовки, панелі меню, таблиці даних тощо — це загальноприйняті організми в більшості дизайн-систем, з якими я працював. У випадку Spotify ми бачимо, як популярна секція складається з декількох молекул композицій.

Популярний розділ Spotify, що складається з молекул назв музичних творів.

Шаблони

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

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

Сторінки

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

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

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

Відповіді на поширені запитання

Як застосувати принципи атомарного дизайну до існуючого продукту?

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

Зараз я не створюю дизайн-систему; як застосувати те, що я тут дізнався?

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

Яке програмне забезпечення/інструменти мені потрібно освоїти, щоб застосовувати Atomic Design у своєму наступному проєкті?

• Я особисто використовую Figma, але навіть Sketch або Adobe XD підтримують створення компонентів. Якщо ви дизайнер, то, швидше за все, вже знайомі з цими інструментами. Основні навички, які вам знадобляться, — це створення компонентів Figma, додавання властивостей і створення варіантів компонентів. Цього відносно легко навчитися за допомогою інструкцій на сайті Figma. Однак, щоб освоїти всі можливі варіанти компонентів, знадобиться більше часу. Згодом ви вдосконалите свої навички, співпрацюючи з розробниками. Крім того, у Figma є плагіни, такі як Design system manager, які спрощують завдання підтримки дизайн-системи на основі атомарного дизайну.

Підсумовуючи

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

Велика подяка Бреду Фросту та його електронній книзі «Atomic Design». Якщо моя коротка презентація Atomic Design зацікавила вас, я наполегливо рекомендую прочитати його книгу. Крім того, це перша стаття з серії, в якій я поділюся своїми знаннями про дизайн-системи.

Наразі це все. Запрошую відвідати мій сайт **kamathrohan.com або написати мені на адресу [hello@kamathrohan.com](mailto:hello@kamathrohan.com) **для дружньої розмови за кавою.

Ще більше цікавого контенту буде незабаром. Тож залишайтеся з нами!