Структурирование дизайна: создание дизайн-системы

Контекст

Ранее дизайн веб-сервиса находился в хаотичном состоянии:

• В файлах Фигмы не было структуры, элементы были разбросаны и использовали разные стили без единой системы.

• Цвета, шрифты и отступы применялись произвольно, не было никаких правил и токенов.

• В коде также отсутствовала система оформления, разработчики использовали разные значения без структуры.

• Только несколько элементов были оформлены в компоненты, но они не использовались последовательно.

 

Что было сделано

Я создала отдельный файл для дизайн-системы и подключила его ко всем макетам.

Разделила и структурировала страницы в дизайн-системе.

 

 

Цвета преобразовала в токены

Базовую палитру — набор основных цветов, используемых в продукте

 

Семантическую палитру, которая разделена на два типа:

• 🌷 Семантические стили цветов Ключевые компоненты имеют свои уникальные наборы стилей, которые не пересекаются ни с кем. Эти стили всегда основаны на цветах из базовой палитры стилей. Меняются только их названия и применение в конкретной ситуации.
В итоге мы получаем такие названия:
• button / primary / background / default
• button / primary / text and icon / pressed
• и т. д.

• 💐 Общие семантические стили цветов У них тоже есть особое назначение, но они используются в более широком масштабе. Например, стили только для текста, только для иконок, только для бордера и т. п.
В итоге мы получаем такие названия:
• text / main / primary
• bg / primary / default
• и т. д.

 

Пример структуры 🌷 семантического стиля

 

Пример структуры 💐 общего семантического стиля

Создала токены отступов

и радиусов скругления

Создала компоненты и написала для них спецификации

Результаты и влияние