Что нужно мне
Я посмотрела, какие задания дают в компаниях, куда хочу попасть. Почти везде — дашборды, формы и таблицы. Под них и собрала минимальный набор компонентов.
Персональная дизайн-система
Как я ускорила свою работу на 70%, построив дизайн-систему с живым кодом и документацией
Привет, меня зовут Варя!
Когда-то каждое тестовое и каждый личный проект я начинала с чистого листа. Часы уходили на подбор шрифтов, цветов и одни и те же кнопки. В какой-то момент мне это надоело, и я решила сделать свою дизайн-систему. Так появилась Varya’s Design System :-)
Анализ и бенчмаркинг
Как делают другие
Изучила Material Design, Ant Design, Polaris и open-source библиотеки. Подсмотрела лучшие практики по структуре, именованию и вариативности. Собрала свой микс под свои задачи.
Итог
Список необходимых компонентов и понимание их логики
Что вошло в систему
Color
Typography
Grid
Shadow
Button
Input
Select
Textarea
Checkbox
Radio
Table
Modal
Система под мои сценарии
Живое развитие
Какие-то параметры добавлялись позже, когда становилось ясно, чего не хватает. Система росла вместе с задачами.
Некоторые элементы опциональны
Иконки, лейбл, подсказка — всё включается и отключается в пару кликов.
Быстрое переключение состояний
Переключение между состояниями и размерами экономит кучу времени при сборке макета.
Индивидуальные размеры
Я не стала делать единую сетку для всех. Собрала нужное количество размеров под каждый компонент отдельно.
Документация в Figma
Вся информация о компонентах и стилях лежит на отдельных страницах Figma. Все состояния, точные цифры и логика собраны в одном месте.
Гибкость наглядно Все варианты в одном месте. Видно, как компонент ведёт себя в разных контекстах.
Интерактивный просмотр Переключаешь размер, состояние, иконки прямо в сайдбаре. Сразу видно, как компонент реагирует.
Атомарная структура Компоненты разобраны до мельчайших деталей: label, item, icon, container. Показываю, из чего всё собирается.
Параметры для кода Цвета, тени, отступы — всё записано в цифрах. Все значения готовы к переносу в код.
Навела порядок в сложном
Главной проблемой было дать себе много сценариев, при этом не перегрузить систему. Покажу, как справилась, на примере таблицы.
Проблема
В разных сценариях таблицы собирают по строкам или по колонкам. Внутри — десятки типов ячеек с собственными настройками. Как сделать одну гибкую таблицу, а не хаос?
Что я сделала
Изучила, как таблицы устроены у других, но не стала копировать чей-то подход. Сделала свой микс: две переключаемые модели таблицы и два уровня гибкости внутри каждой.
Как это работает
Строки — гибкость на уровне ячейки. Колонки — гибкость на уровне столбца и ячейки. Внутри каждого типа ячейки — своя глубина настройки. Например, у кнопки можно добавить иконку, у статуса изменить его значение.
Итог
Система осталась компактной, но вариативной.
Документация в коде сайта
Для всех компонентов системы я собрала отдельные страницы с описанием анатомии, состояний, размеров и правил использования.
Интерактивная песочница Переключайте тип, размер, иконки и смотрите, как меняется компонент.
Полная спецификация Каждый элемент описан и привязан к правилам. Видно не только, как выглядит кнопка, но и как её правильно применять в интерфейсе.
Правила использования Когда какой тип кнопки брать, как не надо делать. Правила собраны на основе реальных ошибок.
Результат
Скорость сборки макетов выросла на 70%
Раньше на всё уходило около 2 часов. Теперь — 30 минут. Просто перетаскиваю готовые элементы из библиотеки и за пару кликов адаптирую под задачу.