Топология шрифта: три инструмента для построения дизайн-систем

Топология шрифта: три инструмента для построения дизайн-систем

Карьера в бренд-дизайне всё чаще требует не только насмотренности, но и инженерной дисциплины: дизайн-токены (дизайн-решения, привязанные к коду), контроль версий, синхронизация между продуктом и сайтом. Собрал три инструмента, которые закрывают задачу «один источник истины» по-разному — полезно тем, кто строит бренд-систему от нуля или переезжает с «фотошоп + зип-файл».

**Figma Variables + Tokens Studio** — для команд, живущих в одном экосистемном контуре и готовых держать токены в Figma или в репозитории. Сильная сторона: токены описываются как структурированные переменные (цвет, отступ, радиус), стили автоматически подтягиваются, а плагин Tokens Studio даёт Git-синхронизацию и поддержку W3C Design Tokens — это формат, который читают и дизайнер, и фронтенд. Слабая сторона: для разработчиков связка с кодом всё ещё требует ручной настройки тем и обёрток, а большие библиотеки быстро упираются в производительность Figma при работе с тысячами переменных.

**Specify** — для бренд- и продуктовых команд, где дизайнер и фронтенд работают в разных стеках и нужна прямая дистрибуция токенов в код. Сильная сторона: автоматическая генерация типографики и цветовых шкал по описанию, экспорт сразу в CSS-переменные, Swift, Compose и Tailwind — разработчик получает готовые файлы без ручной пересборки. Слабая сторона: при сильной кастомизации брендовых тем (сложные шрифтовые стеки, вариативные шрифты) генератор иногда требует доводки, а модель подписки рассчитана на команду, не на одиночного дизайнера.

**Style Dictionary (от Amazon)** — для тех, кто мыслит дизайн-токены как часть пайплайна сборки, а не как графический интерфейс. Сильная сторона: токены живут в JSON или YAML, платформа-агностик (подходит для web, iOS, Android, email, документов), легко встраивается в CI/CD — то есть в автоматизированный конвейер сборки и тестирования. Для крупных брендов с десятком платформ это рабочая лошадка. Слабая сторона: визуального слоя нет — это чисто инженерный инструмент, дизайнеру без разработчика не развернуть, а онбординг ощутимо дольше, чем у Figma-плагинов.

**Как выбирать.** Если команда до 10 человек и весь дизайн в Figma — Variables плюс Tokens Studio хватит на 80% задач. Если продукт мультиплатформенный, а дизайнер и фронтенд хотят говорить на одном языке без «переведи мне токены в CSS» — стоит смотреть в сторону Specify. Если бренд-система живёт в коде уже на этапе MVP и нужно масштабирование на множество платформ — Style Dictionary.

— @DesignerCareerRuPro