Дизайн-система
Design Systems
Дизайн-система в продукте была, но пользоваться ей было тяжело. Она собиралась постепенно и без единых правил: всё лежало на одной странице, типографика была несистемной, иконки устарели и дублировались, отступы и радиусы жили без логики, а цвета были просто списком без подсказок, где что применять. Разработчикам было сложно ориентироваться. Я пересобрала систему заново — с нуля выстроила фундамент, по которому строятся все экраны.
Роль:
Product Designer
Год:
2025
Узнайте всю историю —
Проблема
Старой системой было тяжело пользоваться, и проблемы были на каждом уровне: — Всё на одной странице. Разработчики не понимали, что где искать. — Лишняя информация. В системе висели веб-паттерны вроде hover-состояний кнопок — хотя продукт мобильный, и в приложении их нет. — Хаос в типографике. Размеры были случайными — 18, 22 — вместо кратных четырём. Разработчикам было неудобно переносить это к себе. — Устаревшие иконки. Много старых, дубли, перерисованные по-разному варианты, часть вообще нигде не использовалась. — Отступы и радиусы без логики. Не было понимания, где что применять. Даже базовый отступ от краёв экрана гулял: где-то 16px, где-то 24px. — Цвета без назначения. Палитра была просто списком вроде blue-600, без подсказки, в каких случаях этот цвет использовать.
Цель
Пересобрать систему так, чтобы ей было легко пользоваться — и дизайнеру, и разработчикам. Навести порядок на каждом уровне: убрать лишнее, привести значения к правилам, дать каждому токену понятное назначение. Сделать фундамент, на который можно опереться при сборке любого экрана.
Результат
Фундамент дизайн-системы собран и работает: типографика, цвета, отступы, радиусы и иконки приведены к единым правилам. Разработчики уже используют систему в работе. Впереди — сборка остальных компонентов поверх готового фундамента.
Порядок в foundations: типографика + отступы + радиусы
Пересобрала типографическую шкалу — все размеры кратны четырём, каждый стиль получил понятное имя и назначение. Навела порядок в спейсингах и радиусах: дала чёткую классификацию, где какой отступ и какой радиус используется. Даже базовый отступ от краёв экрана, который раньше гулял между 16 и 24px, теперь однозначный. Стили настраивала по правилам Figma — размер подставляется автоматически через настройки, а не вписывается вручную.
Цветовая система с двумя уровнями
Пересобрала палитру целиком — убрала неактуальное и лишнее. Выстроила в два уровня: примитивы (сырые значения вроде blue-600) и семантические токены (text/primary, bg/surface, status/error), которые говорят, где и зачем цвет применяется. Собрала варианты для светлой и тёмной темы. Теперь не нужно гадать — токен сам подсказывает своё назначение.
Иконки и компоненты
Полностью обновила иконочный набор: убрала устаревшие, дубли и неиспользуемые, перерисовала актуальные в едином стиле. Из компонентов собрала input, textfield и кнопки со всеми состояниями и вариантами — первые компоненты поверх нового фундамента. Впереди — сборка остальных компонентов.