LanguageБългарски
Стълб 06 · Системи за проектиране
Motion Tokens: Пълната архитектура за системи за проектиране
Стандартизирайте движението в цялата си продуктова екосистема. Спрете твърдото кодиране на произволни 300ms кубични безери в десетки хранилища на разработчици.
What is Motion Tokens: in ExodeUI?
Motion Tokens са стандартизирани дизайнерски токени, които дефинират параметри на анимация - като твърдост на пружината, коефициент на затихване, маса, криви на облекчаване и продължителност - в машинночетим формат. Нашият безплатен генератор на токени за движение създава стартов набор, който можете да експортирате за CSS и JSON, а инструментите за изграждане на токени ги превръщат в код за всяка платформа.
Основна архитектура
Защо инженерите и дизайнерите избират ExodeUI
Design, logic and motion in one file that runs inside your app.
Spring Physics Tokens
Дефинирайте движението с физически токени (коравина, затихване, маса), а не с произволни времеви числа.
Автоматизирано генериране на код
Превърнете токените в 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 леко влизане и излизане"
- Няма визуален начин за тестване на динамиката на токена преди изпращане до код
- Инженерите трябва ръчно да интерпретират спецификациите за движение в рамков код
Разработчик Handoff
Използването му във вашия код
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
импортиране { ExodeUICanvas } от 'exodeui';
// Пружини, състояния и синхронизиране на живо във файла .exode (проектиран в
// редактор). Вашият код предава входове и чува събитията обратно.
функция за експортиране SnappyButton() {
връщане (
<ExodeUIПлатно
src="/snappy_button.bexode"
onTrigger={(име) => console.log('ExodeUI събитие:', име)}
/>
);
}Защо системите за проектиране се провалят в движение
Съвременните системи за проектиране имат усъвършенствани цветови палитри, типографски мащаби, сенки на височината и разстояния. Но движението остава забравеният символ на дизайна. В повечето организации документацията за движение се състои от неясни насоки като „анимациите трябва да са бързи“ или статична променлива за продължителност от 250 ms.
- Непоследователно усещане за марка: Един инженер използва 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
Разгледайте свързаните концепции и инструменти
Инструмент за генериране на токени за движение
Създавайте и експортирайте токени за движение
Среда за разработка на движение
Визията на платформата MDE
Как се създават ExodeUI файловете
От .exode до вашето приложение
Речник: Жетони за движение
Формална дефиниция и стандартна схема
Имате въпроси?
Често задавани въпроси
Изградете живи компоненти с реално движение.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.