Структура файлів

Кольори до проєкту зберігаються у Figma у бібліотеці Style. Для кожної платформи - окремий файл (наприклад Styles-Android, Styles-IOS, Styles-Web).

Ілюстрації, іконки прапорів та логотипи сторонніх брендів зберігаються у файлі з компонентами. Кольори у них не прив’язані до токенів та можуть відрізнятися від палітри у фалі Styles.

У Figma ми маємо три основні колекції для кольорів: Primitives, Semantic та Components та колекція Constant. Ми використовуємо змінні для управління токенами кольорів.

Primitives

Колекція Primitives (Базові токени) містить усі кольори, які можна використовувати в інтерфейсі. Це найпростіші, атомарні елементи, які визначають базові значення, наприклад:

• Токен: colors-red-500
• Колір: #F04438

Навіщо потрібні?

• Єдине джерело правди: усі кольори централізовані, що забезпечує узгодженість у системі.
• Масштабованість: базові токени використовуються як основа для семантичних токенів, що дозволяє легко оновлювати колірну палітру.
• Простота оновлень: якщо, наприклад, потрібно змінити відтінок червоного colors-red-500, достатньо оновити його в Primitives, і зміни автоматично застосуються до всіх семантичних токенів, які на нього посилаються (наприклад, color-text-danger-mid, color-border-danger-strong). Це значно зменшує ризик пропустити або помилково оновити значення в окремих семантичних чи компонентних токенах.

Ми не використовуємо колекцію Primitives напряму в дизайні, натомість використовуємо колекції Semantic та Components про які детальніше написано далі.

Структура

Кольори в колекції Primitives структуровані наступним чином:

• Basic
  • Містить базові кольори: чорний і білий.
• Кольорова палітра
  • Gray, Red, Green, Blue, Yellow, Purple.
  • Палітра налаштовується під продукт і включає відтінки, впорядковані за насиченістю та сортовані під номерами від 25 до 950, де 950 — найбільш насичений.
  • Якщо у проєкті використовується багато схожих відтінків сірого, це може створити хаос і ускладнити підтримку. У таких випадках варто оптимізувати кольорову палітру, щоб уникнути зайвих дублювань.