Проблема
Каждый дизайнер собирал кнопки и поля заново
Lab.pics · 2025 · Автор дизайн-системы
Дизайн-система, на которую новый бренд переезжает за день
Коротко
В студии шло несколько продуктов сразу, и каждый дизайнер собирал кнопки и поля заново. Новый проект начинался с копирования чужого файла.
- Моя роль
- Автор дизайн-системы. Аудит макетов студии, токены, три темы, 30+ компонентов и документация. Обучал дизайнеров и вёл правки после релиза, названия свойств согласовывал с разработкой.
- Команда
- Дизайнеры и разработчики студии
- Срок
- 3 месяца, 2025
- Темы
- Светлая, тёмная, контрастная
- Статус
- В работе у студии, открыта в Figma Community
Проблема
Проблема
Одинаковые элементы отличались на пару пикселей
Нужна была не библиотека на один продукт, а система, которая переживёт смену бренда: одни и те же компоненты под разные фирменные стили и темы.
Иначе под каждого клиента библиотеку пришлось бы пересобирать с нуля.
Проблема
Разработчики каждый раз уточняли отступы
Решение 01
01
Темы через переменные, а не через копии
БылоПод тёмную тему собирали второй комплект компонентов.
СталоСветлая, тёмная и контрастная темы переключаются токенами.
Цена решенияМультитемность с первого дня стоила лишней недели на старте, зато потом экономила по спринту на каждом новом клиенте.
Решение 02
02
Компоненты, удобные разработчику
БылоМакет отдавали картинкой, отступы мерили линейкой.
СталоАвто-лейаут и варианты, свойства названы как пропсы в коде.
Решение 03
03
Новый бренд за день, а не за спринт
БылоПод каждого клиента библиотеку пересобирали с нуля.
СталоПодменяется набор токенов, и система перекрашивается следом.
Система
Система
Компоненты, размеры и уровни глубины
Итог
Итог
Система стала основой новых проектов и ушла в Figma Community
- 30+
- компонентов
- 300+
- токенов
- 400+
- иконок
Результат
Lab UI можно скопировать себе и адаптировать под свой продукт: файл открыт, его можно проверить.
Самой полезной частью оказалась не библиотека, а документация и обучение: без них через месяц команда снова собирала бы компоненты руками. Система живёт ровно до тех пор, пока ей удобно пользоваться.
Вывод
Дизайн-система работает как договорённость команды, записанная в файле