LanguageDeutsch
Säule 06 · Designsysteme
Motion Tokens: Die komplette Architektur für Designsysteme
Standardisieren Sie die Bewegung in Ihrem gesamten Produktökosystem. Hören Sie auf, beliebige kubische Béziers von 300 ms in Dutzenden von Entwickler-Repositorys fest zu codieren.
What is Motion Tokens: in ExodeUI?
Bewegungstoken sind standardisierte Designtoken, die Animationsparameter – wie Federsteifigkeit, Dämpfungsverhältnis, Masse, Beschleunigungskurven und Dauer – in einem maschinenlesbaren Format definieren. Unser kostenloser Motion-Token-Generator erstellt ein Starterset, das Sie für CSS und JSON exportieren können, und Token-Build-Tools wandeln diese in Code für jede Plattform um.
Kernarchitektur
Warum Entwickler und Designer ExodeUI wählen
Design, logic and motion in one file that runs inside your app.
Frühlingsphysik-Token
Definieren Sie Bewegung mit physikalischen Token (Steifigkeit, Dämpfung, Masse) und nicht mit willkürlichen Zeitzahlen.
Automatisierte Codegenerierung
Wandeln Sie Token mit Ihrer vorhandenen Token-Build-Pipeline in CSS-Variablen und Plattformcode um.
Semantische Hierarchie
Organisieren Sie Bewegungstokens in globale, semantische und Komponentenebenen (z. B. motion.spring.snappy, motion.feedback.success).
Synchronisierung von Design-Tools
Synchronisieren Sie Bewegungstokens nahtlos zwischen Figma-Variablen und Produktions-Git-Codebasen.
Objektive Bewertung
Wie ExodeUI abschneidet gegen Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Vollständige erstklassige Unterstützung für physische Federmarken und Geschwindigkeitskurven
- Exportiert gleichzeitig in native Mobilformate (SwiftUI/Compose) und Webformate
- Mit Visual Inspector können Designer die Token-Physik in Echtzeit spüren
- Automatische Barrierefreiheits-Fallbacks für Preferences-Reduced-Motion
Traditional Design Tokens (Color/Type Only)
- Die meisten Token-Tools unterstützen nur statische Farben, Typografie und Abstände
- Die Bewegung wird auf grobe Dauerzeichenfolgen wie „300 ms Ease-in-out“ reduziert.
- Es gibt keine visuelle Möglichkeit, die Token-Dynamik vor dem Versand an den Code zu testen
- Ingenieure müssen Bewegungsspezifikationen manuell in Framework-Code interpretieren
Übergabe an die Entwicklung
So nutzt du es im Code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } aus 'exodeui';
// Federn, Zustände und Timing live in der .exode-Datei (entworfen im
// Herausgeber). Ihr Code leitet Eingaben weiter und hört Ereignisse zurück.
Exportfunktion SnappyButton() {
zurück (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Warum Designsysteme bei Bewegung versagen
Moderne Designsysteme verfügen über perfektionierte Farbpaletten, Typografieskalen, Höhenschatten und Abstandsraster. Aber Bewegung bleibt das vergessene Designmerkmal. In den meisten Organisationen besteht die Bewegungsdokumentation aus vagen Richtlinien wie „Animationen sollten knackig sein“ oder einer statischen Variablen für die Dauer von 250 ms.
- Inkonsistentes Markengefühl: Ein Ingenieur verwendet Easy-Out, ein anderer Easy-In-Out und Mobilgeräte verwenden die Apple-Standardeinstellungen.
- Brüchige Dauerkurven: Zeitgesteuerte Animationen wirken auf kleinen Elementen langsam und auf großen unteren Blättern eilig.
- Vernachlässigung der Barrierefreiheit: Teams versäumen es, zusammenhängende Bewegungsreduzierungsüberschreibungen für alle Komponenten zu implementieren.
Die 3-stufige Motion-Token-Hierarchie
ExodeUI modelliert Bewegungstokens über drei strukturierte Ebenen:
Stufe 1: Globale Primitive-Tokens
Rohe mathematische Konstanten (z. B. Steifigkeit-400, Dämpfung-25, Masse-1).
Stufe 2: Semantische Absichtstoken
Funktionale Namen, die an die Absicht gebunden sind (z. B. motion.interactive.snappy, motion.modal.enter).
Stufe 3: Komponentenspezifische Token
An bestimmte Komponenten gebundene Überschreibungen (z. B. button.toggle.switch).
Topic Cluster Network
Verwandte Konzepte und Tools
Motion-Token-Generator-Tool
Erstellen und exportieren Sie Bewegungstokens
Motion-Entwicklungsumgebung
Die Vision der MDE-Plattform
Wie ExodeUI-Dateien erstellt werden
Von .exode zu Ihrer App
Glossar: Bewegungstoken
Formale Definition und Standardschema
Noch Fragen?
Häufige Fragen
Lebendige Komponenten mit echter Bewegung bauen.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.