☰
Кузница цифрового совершенства

Дизайн-токены: Единый язык вашего продукта

Управляйте глобальными переменными дизайна централизованно. От цветовых палитр до типографики — ФлоуФордж синхронизирует ваши токены с кодом в реальном времени.

Визуализация потока дизайн-токенов в ФлоуФордж

Визуализация и управление палитрой

Интуитивный интерфейс для работы с цветом. Контролируйте контрастность, генерируйте оттенки и сохраняйте семантические связи между цветами.

🎨

Семантическая окраска

Не просто HEX-коды. Называйте токены по смыслу: --color-primary-action, а не --blue-500. Это упрощает поддержку тем.

♿

Проверка контраста

Автоматический аудит WCAG 2.1 AA и AAA прямо в редакторе. Система подскажет, если выбранный цвет текста на фоне нарушает стандарты доступности.

🌗

Управление темами

Создавайте Светлую, Темную и Брендовую темы в одном месте. ФлоуФордж автоматически пересчитает значения токенов при переключении контекста.

Типографика и сетки

Строгая математика за красивой внешностью.

Забудьте о хаосе в размерах шрифтов. Используйте масштабируемую шкалу (Major Third или Perfect Fourth) и привязывайте размеры к модульной сетке.

ФлоуФордж позволяет задать базовый размер шрифта (например, 16px) и масштабировать заголовки (H1–H6) через CSS-переменные, которые автоматически адаптируются под мобильные устройства.

  • ◆ Масштабирование под Viewport
  • ◆ Управление межстрочным интервалом
  • ◆ Ритм сетки (Baseline Grid)
:root {
--font-scale-base: 16px;
--font-scale-h1: 2.5rem;
--spacing-unit: 8px;
--grid-columns: 12;
}
3 Платформы
0ms Задержка синхр.
100% Соответствие
JSON Формат токенов

Экспорт и кроссплатформенность

Один источник правды — код везде. Матчинг токенов между Web, iOS и Android без потери данных.

💻

CSS & JavaScript

Генерация нативных CSS Custom Properties. Поддержка JavaScript-объектов для React, Vue и Angular приложений.

🍎

iOS (Swift)

Автоматическое создание Swift-структур и Asset Catalog файлов. Поддержка Dark Mode на уровне системы.

🤖

Android (XML/Kotlin)

Генерация XML-ресурсов (colors.xml, dimens.xml) и Kotlin-объектов. Полная совместимость с Material Design 3.

Вопросы о токенах

Что делать, если имя токена меняется? +
ФлоуФордж отслеживает историю изменений. Если вы переименовали токен, система предложит автоматически обновить ссылки в связанных компонентах и сгенерировать Pull Request в ваш репозиторий.
Можно ли импортировать существующие токены? +
Да. Мы поддерживаем импорт из файлов CSS, JSON, Style Dictionary конфигураций и Figma Variables. Процесс миграции занимает считанные минуты.
Как работает матчинг между платформами? +
Мы используем алгоритм сопоставления семантики. Токен "primary-button-bg" будет превращен в CSS-переменную, Swift-enum и Android XML color соответственно, сохраняя единство значений.

Синхронизируйте свой дизайн

Прекратите вручную переписывать цвета и размеры. Автоматизируйте дизайн-систему с ФлоуФордж.

Начать экспорт токенов