LanguageNederlands
Pijler 06 · Ontwerpsystemen
Motion Tokens: de complete architectuur voor ontwerpsystemen
Standaardiseer beweging in uw hele productecosysteem. Stop met het hardcoderen van willekeurige kubieke beziers van 300 ms in tientallen ontwikkelaarsrepository's.
What is Motion Tokens: in ExodeUI?
Motion Tokens zijn gestandaardiseerde ontwerptokens die animatieparameters definiëren, zoals veerstijfheid, dempingsverhouding, massa, versoepelingscurven en duur, in een machinaal leesbaar formaat. Onze gratis Motion Token Generator maakt een starterset die u kunt exporteren voor CSS en JSON, en token-bouwtools zetten deze om in code voor elk platform.
Kernarchitectuur
Waarom ingenieurs en ontwerpers kiezen voor ExodeUI
Design, logic and motion in one file that runs inside your app.
Lente natuurkunde-tokens
Definieer beweging met fysieke tokens (stijfheid, demping, massa) in plaats van willekeurige timingnummers.
Geautomatiseerde codegeneratie
Zet tokens om in CSS-variabelen en platformcode met uw bestaande pijplijn voor het bouwen van tokens.
Semantische hiërarchie
Organiseer bewegingstokens in globale, semantische en componentniveaus (bijvoorbeeld motion.spring.snappy, motion.feedback.success).
Synchronisatie van ontwerptools
Synchroniseer bewegingstokens naadloos tussen Figma-variabelen en productie-Git-codebases.
Objectieve evaluatie
Hoe ExodeUI zich verhoudt tot Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Volledige eersteklas ondersteuning voor fysieke veertokens en snelheidscurves
- Exporteert tegelijkertijd naar native mobiele (SwiftUI/Compose) en webformaten
- Met Visuele inspecteur kunnen ontwerpers de symbolische fysica in realtime voelen
- Automatische terugval in toegankelijkheid voor voorkeur voor minder beweging
Traditional Design Tokens (Color/Type Only)
- De meeste tokentools ondersteunen alleen statische kleuren, typografie en spatiëring
- Beweging wordt gereduceerd tot strings met een ruwe duur, zoals '300 ms easy-in-out'
- Geen visuele manier om de tokendynamiek te testen voordat deze naar code wordt verzonden
- Ingenieurs moeten bewegingsspecificaties handmatig in raamwerkcode interpreteren
Ontwikkelaar Handoff
Gebruik het in uw code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importeer { ExodeUICanvas } uit 'exodeui';
// Veren, toestanden en timing live in het .exode-bestand (ontworpen in de
//redacteur). Uw code geeft invoer door en hoort gebeurtenissen terug.
exportfunctie SnappyButton() {
terug (
<ExodeUICanvas
src="/snappy_button.bexode"
onTrigger={(naam) => console.log('ExodeUI gebeurtenis:', naam)}
/>
);
}Waarom ontwerpsystemen falen bij beweging
Moderne ontwerpsystemen hebben kleurenpaletten, typografische schalen, hoogteschaduwen en afstandsrasters geperfectioneerd. Maar beweging blijft het vergeten ontwerpteken. In de meeste organisaties bestaat bewegingsdocumentatie uit vage richtlijnen, zoals 'animaties moeten pittig zijn' of een statische duurvariabele van 250 ms.
- Inconsistent merkgevoel: de ene ingenieur gebruikt 'ease-out', de andere gebruikt 'ease-in-out' en mobiel gebruikt de standaardinstellingen van Apple.
- Brosse duurcurven: getimede animaties voelen traag aan op kleine elementen en gehaast op grote onderste vellen.
- Toegankelijkheidsverwaarlozing: Teams slagen er niet in om samenhangende overschrijvingen voor verminderde beweging in alle componenten te implementeren.
De 3-laags bewegingstokenhiërarchie
ExodeUI modelleert bewegingstokens over drie gestructureerde niveaus:
Niveau 1: Globale primitieve tokens
Ruwe wiskundige constanten (bijv. stijfheid-400, demping-25, massa-1).
Niveau 2: Semantische intentietokens
Functionele namen die verband houden met de intentie (bijvoorbeeld motion.interactive.snappy, motion.modal.enter).
Niveau 3: Componentspecifieke tokens
Overschrijvingen gebonden aan specifieke componenten (bijvoorbeeld button.toggle.switch).
Topic Cluster Network
Ontdek verbonden concepten en tools
Tool voor het genereren van bewegingstokens
Bewegingstokens maken en exporteren
Bewegingsontwikkelingsomgeving
De MDE-platformvisie
Hoe ExodeUI-bestanden worden gebouwd
Van .exode naar uw app
Woordenlijst: Bewegingstokens
Formele definitie en standaardschema
Heeft u vragen?
Veelgestelde vragen
Bouw levende componenten met echte beweging.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.