LanguageČeština
Pilíř 06 · Návrhové systémy
Pohybové žetony: Kompletní architektura pro návrhové systémy
Standardizujte pohyb v celém ekosystému vašeho produktu. Přestaňte napevno kódovat libovolné 300 ms kubické beziery napříč desítkami vývojářských úložišť.
What is Pohybové žetony: in ExodeUI?
Tokeny pohybu jsou standardizované prvky návrhu, které definují parametry animace – jako je tuhost pružiny, poměr tlumení, hmotnost, křivky náběhu a trvání – ve strojově čitelném formátu. Náš bezplatný generátor pohybových tokenů vytváří startovací sadu, kterou můžete exportovat pro CSS a JSON, a nástroje pro vytváření tokenů je převedou na kód pro každou platformu.
Základní architektura
Proč si inženýři a designéři vybírají ExodeUI
Design, logic and motion in one file that runs inside your app.
Jarní žetony fyziky
Definujte pohyb pomocí fyzických prvků (tuhost, tlumení, hmotnost) spíše než libovolnými čísly časování.
Automatické generování kódu
Proměňte tokeny na proměnné CSS a kód platformy pomocí vašeho stávajícího kanálu sestavení tokenu.
Sémantická hierarchie
Uspořádejte tokeny pohybu do globálních, sémantických a komponentních úrovní (např. motion.spring.snappy, motion.feedback.success).
Synchronizace nástroje pro návrh
Bezproblémová synchronizace pohybových tokenů mezi proměnnými Figma a produkčními kódovými bázemi Git.
Objektivní hodnocení
Jak ExodeUI ve srovnání s Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Plná prvotřídní podpora fyzických pružinových žetonů a křivek rychlosti
- Export do nativních mobilních (SwiftUI/Compose) a webových formátů současně
- Vizuální inspektor umožňuje návrhářům cítit fyziku tokenů v reálném čase
- Automatická nouzová dostupnost pro preferenci s omezeným pohybem
Traditional Design Tokens (Color/Type Only)
- Většina nástrojů tokenu podporuje pouze statické barvy, typografii a mezery
- Pohyb je redukován na hrubé řetězce trvání, jako je „300 ms easy-in-out“
- Žádný vizuální způsob, jak otestovat dynamiku tokenu před odesláním do kódu
- Inženýři musí ručně interpretovat specifikace pohybu do kódu rámce
Developer Handoff
Použití ve vašem kódu
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 časování žijí v souboru .exode (navržený v
// editor). Váš kód předává vstupy a slyší události zpět.
export funkce SnappyButton() {
vrátit (
<ExodeUIPlátno
src="/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Proč designové systémy selhávají při pohybu
Moderní designové systémy zdokonalily barevné palety, typografická měřítka, výškové stíny a mřížky mezer. Pohyb ale zůstává zapomenutým designovým tokenem. Ve většině organizací se dokumentace pohybu skládá z vágních pokynů, jako je „animace by měly být svižné“ nebo statická proměnná trvání 250 ms.
- Nekonzistentní vnímání značky: Jeden technik používá plynulý výstup, jiný náběh a mobilní zařízení používá výchozí nastavení Apple.
- Křivky křehkého trvání: Časované animace jsou pomalé na malých prvcích a uspěchané na velkých spodních listech.
- Zanedbání přístupnosti: Týmům se nedaří implementovat soudržná potlačení omezení pohybu ve všech komponentách.
3vrstvá hierarchie pohybových tokenů
ExodeUI modeluje pohybové žetony na třech strukturovaných úrovních:
Úroveň 1: Globální primitivní tokeny
Hrubé matematické konstanty (např. tuhost-400, tlumení-25, hmotnost-1).
Úroveň 2: Tokeny sémantického záměru
Funkční názvy vázané na záměr (např. motion.interactive.snappy, motion.modal.enter).
Úroveň 3: Tokeny specifické pro komponenty
Přepisy vázané na konkrétní komponenty (např. tlačítko.přepínač.přepínač).
Topic Cluster Network
Prozkoumejte propojené koncepty a nástroje
Nástroj Generátor pohybových tokenů
Vytvářejte a exportujte tokeny pohybu
Prostředí pro vývoj pohybu
Vize platformy MDE
Jak se vytvářejí soubory ExodeUI
Od .exode do vaší aplikace
Glosář: Pohybové žetony
Formální definice a standardní schéma
Máte otázky?
Často kladené otázky
Vytvářejte živé komponenty skutečným pohybem.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.