LanguageSlovenčina
Pilier 06 · Dizajnové systémy
Pohybové žetóny: Kompletná architektúra pre dizajnové systémy
Štandardizujte pohyb v rámci celého ekosystému produktov. Zastavte napevno kódovanie ľubovoľných 300 ms kubických Bézierov naprieč desiatkami vývojárskych úložísk.
What is Pohybové žetóny: in ExodeUI?
Pohybové tokeny sú štandardizované dizajnové prvky, ktoré definujú parametre animácie – ako je tuhosť pružiny, pomer tlmenia, hmotnosť, krivky nábehu a trvanie – v strojovo čitateľnom formáte. Náš bezplatný generátor pohybových tokenov vytvára štartovaciu sadu, ktorú môžete exportovať pre CSS a JSON, a nástroje na zostavovanie tokenov ich premenia na kód pre každú platformu.
Základná architektúra
Prečo si inžinieri a dizajnéri vyberajú ExodeUI
Design, logic and motion in one file that runs inside your app.
Žetóny jarnej fyziky
Definujte pohyb pomocou fyzických znakov (tuhosť, tlmenie, hmotnosť), a nie ľubovoľnými číslami časovania.
Automatizované generovanie kódu
Premeňte tokeny na premenné CSS a kód platformy pomocou vášho existujúceho procesu vytvárania tokenov.
Sémantická hierarchia
Usporiadajte tokeny pohybu do globálnych, sémantických a komponentových úrovní (napr. pohyb.pružina.snapy, pohyb.spätná väzba.úspech).
Synchronizácia nástroja dizajnu
Bezproblémová synchronizácia pohybových tokenov medzi premennými Figma a produkčnými kódovými základňami Git.
Objektívne hodnotenie
Ako ExodeUI v porovnaní s Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Plná prvotriedna podpora fyzických pružinových žetónov a kriviek rýchlosti
- Export do natívnych mobilných (SwiftUI/Compose) a webových formátov súčasne
- Vizuálny inšpektor umožňuje dizajnérom cítiť fyziku tokenov v reálnom čase
- Automatické obmedzenia dostupnosti pre preferencie-redukovaný pohyb
Traditional Design Tokens (Color/Type Only)
- Väčšina nástrojov tokenu podporuje iba statické farby, typografiu a medzery
- Pohyb je zredukovaný na hrubé trvanie reťazcov, ako napríklad „300 ms easy-in-out“
- Žiadny vizuálny spôsob testovania dynamiky tokenu pred odoslaním do kódu
- Inžinieri musia manuálne interpretovať špecifikácie pohybu do kódu rámca
Developer Handoff
Použitie vo vašom kóde
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } z 'exodeui';
// Pružiny, stavy a časovanie žijú v súbore .exode (navrhnutého v
// editor). Váš kód odovzdá vstupy a vypočuje udalosti.
export funkcie SnappyButton() {
vrátiť (
<ExodeUIPlátno
src="/snappy_button.bexode"
onTrigger={(name) => console.log('Udalosť ExodeUI:', názov)}
/>
);
}Prečo dizajnové systémy zlyhávajú pri pohybe
Moderné dizajnové systémy zdokonalili farebné palety, typografické mierky, výškové tiene a rozstupové mriežky. Pohyb však zostáva zabudnutým tokenom dizajnu. Vo väčšine organizácií dokumentácia pohybu pozostáva z vágnych pokynov, ako napríklad „animácie by mali byť svižné“ alebo statická premenná trvania 250 ms.
- Nekonzistentný pocit značky: Jeden inžinier používa uľahčenie výstupu, ďalší uvoľnenie a mobil používa predvolené nastavenia Apple.
- Krehké krivky trvania: Časované animácie pôsobia pomaly na malých prvkoch a unáhlené na veľkých spodných listoch.
- Zanedbanie prístupnosti: Tímom sa nedarí implementovať súdržné prepisy zníženého pohybu vo všetkých komponentoch.
3-vrstvová hierarchia pohybových tokenov
ExodeUI modeluje pohybové žetóny v troch štruktúrovaných vrstvách:
Úroveň 1: Globálne primitívne tokeny
Hrubé matematické konštanty (napr. tuhosť-400, tlmenie-25, hmotnosť-1).
Úroveň 2: Tokeny sémantického zámeru
Funkčné názvy spojené so zámerom (napr. motion.interactive.snappy, motion.modal.enter).
Úroveň 3: Tokeny špecifické pre komponenty
Nahradenia viazané na konkrétne komponenty (napr. tlačidlo.prepínač).
Topic Cluster Network
Preskúmajte prepojené koncepty a nástroje
Nástroj na generovanie pohybových tokenov
Vytvárajte a exportujte tokeny pohybu
Vývojové prostredie pohybu
Vízia platformy MDE
Ako sa vytvárajú súbory ExodeUI
Od .exode do vašej aplikácie
Slovník: Pohybové žetóny
Formálna definícia a štandardná schéma
Máte otázky?
Často kladené otázky
Zostavte živé komponenty skutočným pohybom.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.