LanguageРусский
Направление 06 · Системы проектирования
Токены движения: полная архитектура для систем проектирования
Стандартизируйте движение во всей экосистеме вашего продукта. Прекратите жестко кодировать произвольные кубические диаграммы Безье длительностью 300 мс в десятках репозиториев разработчиков.
What is Токены движения: in ExodeUI?
Токены движения — это стандартизированные токены дизайна, которые определяют параметры анимации, такие как жесткость пружины, коэффициент демпфирования, массу, кривые замедления и продолжительность, в машиночитаемом формате. Наш бесплатный генератор токенов движения создает стартовый набор, который вы можете экспортировать для CSS и JSON, а инструменты создания токенов превращают их в код для каждой платформы.
Базовая архитектура
Почему инженеры и дизайнеры выбирают ExodeUI
Design, logic and motion in one file that runs inside your app.
Жетоны весенней физики
Определите движение с помощью физических токенов (жесткость, демпфирование, масса), а не произвольных временных чисел.
Автоматизированная генерация кода
Превратите токены в переменные CSS и код платформы с помощью существующего конвейера сборки токенов.
Семантическая иерархия
Организуйте токены движения на глобальном, семантическом и компонентном уровнях (например, motion.spring.snappy, motion.feedback.success).
Синхронизация инструментов проектирования
Беспрепятственно синхронизируйте токены движения между переменными Figma и производственными базами кода Git.
Объективная оценка
Как ExodeUI сравнивается с Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Полная первоклассная поддержка физических жетонов пружин и кривых скорости.
- Экспорт в собственные мобильные (SwiftUI/Compose) и веб-форматы одновременно.
- Визуальный инспектор позволяет дизайнерам почувствовать физику токена в реальном времени.
- Автоматические резервные возможности доступности для предпочтения ограниченного движения
Traditional Design Tokens (Color/Type Only)
- Большинство инструментов токенов поддерживают только статические цвета, типографику и интервалы.
- Движение сведено к грубым строкам продолжительности, таким как «300 мс замедление».
- Нет визуального способа протестировать динамику токена перед отправкой в код.
- Инженеры должны вручную интерпретировать характеристики движения в код платформы.
Передача разработке
Как использовать в коде
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
импортировать { ExodeUICanvas } из exodeui;
// Пружины, состояния и синхронизация находятся в файле .exode (разработанном в
// редактор). Ваш код передает входные данные и принимает события обратно.
функция экспорта SnappyButton() {
возврат (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Почему системы проектирования терпят неудачу в движении
Современные системы дизайна усовершенствовали цветовые палитры, типографские масштабы, тени высот и интервальные сетки. Но движение остается забытым символом дизайна. В большинстве организаций документация по анимации состоит из расплывчатых указаний, таких как «анимация должна быть быстрой» или статической переменной продолжительности 250 мс.
- Непоследовательное ощущение бренда: один инженер использует easy-out, другой — easy-in-out, а мобильная версия использует настройки Apple по умолчанию.
- Хрупкие кривые длительности: синхронизированная анимация кажется медленной на маленьких элементах и быстрой на больших нижних листах.
- Пренебрежение доступностью: командам не удается реализовать целостные переопределения с ограниченным движением во всех компонентах.
Трехуровневая иерархия токенов движения
ExodeUI моделирует токены движения на трех структурированных уровнях:
Уровень 1: Глобальные примитивные токены
Необработанные математические константы (например, жесткость-400, демпфирование-25, масса-1).
Уровень 2: Токены семантического намерения
Функциональные имена, связанные с намерением (например, motion.interactive.snappy, motion.modal.enter).
Уровень 3: Токены для конкретных компонентов
Переопределения, привязанные к конкретным компонентам (например, button.toggle.switch).
Topic Cluster Network
Связанные понятия и инструменты
Инструмент генератора токенов движения
Создание и экспорт токенов движения
Среда разработки движения
Видение платформы MDE
Как создаются файлы ExodeUI
От .exode к вашему приложению
Глоссарий: токены движения
Формальное определение и стандартная схема
Остались вопросы?
Частые вопросы
Создавайте живые компоненты с настоящим движением.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.