Велике оновлення дизайн-бібліотеки
11 травня 2022

Що і навіщо дизайн-бібліотека?

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

Недоліки нашої бібліотеки

Перший варіант системи


Треба відмітити що ми, звісно, вже мали робочу дизайн-систему. Але на практиці в неї були деякі недоліки:

  • нестача важливих компонентів;
  • не всі компоненти мали свої адаптивні версії та стани;
  • автолейаути спрощували б життя;
  • загальний підхід для іконок;
  • неймінг компонентів та кольорів;
  • структура бібліотеки.

План робіт був досить об’ємний, тож ми не стали гаяти часу та приступили до роботи.

Як ми вирішили проблеми та що будемо робити далі

І ми почали. Перероблений був практично кожен компонент, перебраний кожен токен. Ми додали автолейаути, тож адаптив відображати стало набагато зручніше. Попрацювали з неймінгом, визначились з паттернами. Зробили варіативність через Variants та налаштували атрибути. І, нарешті, загорнули все в нову структуру оформлення.

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

Тож чекайте згодом на продовження цього допису.
UPD: 10 травня фігма викатила цілу купу кльових апдейтів та фіч. Тож робота над бібліотекою продовжує кипіти! :)