LanguageУкраїнська
Стовп 06 · Системи проектування
Жетони руху: повна архітектура для систем проектування
Стандартизуйте рух у всій екосистемі продуктів. Припиніть жорстке кодування довільних 300 мс кубічних Безьє в десятках сховищ розробників.
What is Жетони руху: in ExodeUI?
Жетони руху — це стандартизовані маркери дизайну, які визначають параметри анімації, такі як жорсткість пружини, коефіцієнт демпфування, маса, криві пом’якшення та тривалість, у машиночитаному форматі. Наш безкоштовний генератор маркерів руху створює початковий набір, який можна експортувати для CSS і JSON, а інструменти створення маркерів перетворюють їх у код для кожної платформи.
Основна архітектура
Чому інженери та дизайнери обирають ExodeUI
Design, logic and motion in one file that runs inside your app.
Жетони Spring Physics
Визначте рух за допомогою фізичних маркерів (жорсткість, демпфування, маса), а не довільних часових чисел.
Автоматизована генерація коду
Перетворіть маркери на змінні 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) і веб-формати
- Візуальний інспектор дозволяє дизайнерам відчути фізику маркера в реальному часі
- Автоматичні резервні варіанти доступності для prefers-reduced-motion
Traditional Design Tokens (Color/Type Only)
- Більшість інструментів маркерів підтримують лише статичні кольори, типографіку та інтервали
- Рух зводиться до рядків грубої тривалості, як-от "300ms ease-in-out"
- Немає візуального способу перевірити динаміку маркера перед відправкою в код
- Інженери повинні вручну інтерпретувати специфікації руху в код рамки
Розробник Handoff
Використання цього у вашому коді
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 мс.
- Непослідовне відчуття бренду: один інженер використовує ease-out, інший – ease-in-out, а для мобільних пристроїв використовуються стандартні налаштування Apple.
- Крихкі криві тривалості: часові анімації здаються повільними на маленьких елементах і поспішними на великих нижніх аркушах.
- Нехтування доступністю: командам не вдається реалізувати узгоджені перевизначення зменшення руху в усіх компонентах.
3-рівнева ієрархія маркерів руху
ExodeUI моделює маркери руху на трьох структурованих рівнях:
Рівень 1: глобальні примітивні токени
Необроблені математичні константи (наприклад, жорсткість-400, демпфування-25, маса-1).
Рівень 2: Токени семантичного наміру
Функціональні імена, пов’язані з наміром (наприклад, motion.interactive.snappy, motion.modal.enter).
Рівень 3: токени, що стосуються окремих компонентів
Перевизначення, пов’язані з певними компонентами (наприклад, button.toggle.switch).
Topic Cluster Network
Досліджуйте концепції та інструменти Connected
Генератор маркерів руху
Створення та експорт маркерів руху
Середовище розвитку руху
Бачення платформи MDE
Як створюються файли ExodeUI
Від .exode до вашої програми
Глосарій: маркери руху
Формальне визначення та стандартна схема
Виникли запитання?
Часті запитання
Створюйте живі компоненти за допомогою реального руху.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.