/услуги · дизайн-система
Дизайн-система: Figma и код на одном языке
Собираю основу, на которой ваша команда делает новые экраны быстро и одинаково: токены, компоненты в Figma и те же значения в коде. Дизайнер и разработчик перестают спорить о «том самом сером».
Для продуктовых команд, студий и компаний, у которых макетов уже много, а единых правил нет.
что получите
- Токены: цвет, типографика, отступы, радиусы — в Figma и в CSS
- Компоненты с состояниями и вариантами
- Документация: что, когда и как использовать
- Сверка макетов и кода по одним названиям
01 · что входит
Из чего состоит система
Аудит текущего
Собираю, какие цвета, шрифты и элементы уже используются, и где они расходятся.
Токены
Переменные цвета, типографики и отступов — с режимами, если нужна тёмная тема или телефон.
Компоненты
Кнопки, поля, карточки, меню — с состояниями и вариантами, привязанные к токенам.
Код
Те же значения в CSS-переменных: имена в Figma и в коде совпадают.
Документация
Страницы с правилами и примерами — чтобы новые люди не изобретали своё.
Передача команде
Объясняю, как пользоваться и развивать систему дальше.
02 · как проходит
Как идёт работа
03 · вопросы
Частые вопросы
Сколько стоит?
От 150 000 ₽. Итог зависит от числа компонентов и платформ — оценю после знакомства с продуктом.
У нас нет макетов, только сайт. Это возможно?
Да: систему можно собрать из существующего кода и интерфейса, а затем перенести в Figma.
Можно начать с части?
Да. Часто начинают с токенов и самых частых компонентов, а остальное добавляют по мере работы.
С каким кодом работаете?
Основа — CSS-переменные: их можно подключить к любому фреймворку. Детали обсудим под ваш стек.
обсудить дизайн-систему
Расскажите о продукте — оценю объём
- Оценю объём и стоимость
- Заявка ни к чему не обязывает
- Можно просто задать вопрос
Данные из формы нужны, чтобы ответить на заявку.