Петро Дудченко

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

Початковий підхід: Літеральні назви

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

• сірий/500

• синій/500

• пурпурний/500

• зелений/500

• червоний/500

• ...

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

Дослідження абстрактних назв

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

• нейтральний/500

• первинний/500

• вторинний/500

• позитивний/500

• критичний/500

• ...

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

Надання функціональних назв

Щоб забезпечити ясність використання кольорів, я вирішив називати кольори на основі їх конкретних функцій. Цей підхід призвів до назв, таких як:

• фон/сторінка

• фон/нейтральний

• межа/первинний

• ...

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

• фон/первинний

• фон/первинний

• межа/первинний

Прийняття змінних Figma

Перемотавши і змінивши Figma, я зміг поєднати вищезазначені підходи та створив дві колекції змінних:

• Примітивні кольори

• Семантичні кольори

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

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

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

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