LanguageMagyar
06. pillér · Tervezési rendszerek
Motion Tokenek: A tervezési rendszerek teljes architektúrája
Szabványosítsa a mozgást a teljes termékökoszisztémában. Állítsa le a tetszőleges 300 ms-os köbös bezierek merevkódolását több tucat fejlesztői adattárban.
What is Motion Tokenek: in ExodeUI?
A Motion Tokenek szabványos tervezési tokenek, amelyek az animációs paramétereket – például a rugó merevségét, csillapítási arányát, tömegét, könnyítési görbéit és időtartamát – gépi olvasható formátumban határozzák meg. Ingyenes Motion Token Generatorunk létrehoz egy kezdőkészletet, amelyet exportálhat a CSS és JSON számára, és a tokenépítő eszközök ezeket kódokká alakítják az egyes platformokhoz.
Core Architecture
Miért választják a mérnökök és tervezők a ExodeUI
Design, logic and motion in one file that runs inside your app.
Tavaszi fizika tokenek
Határozza meg a mozgást fizikai jelzőkkel (merevség, csillapítás, tömeg) tetszőleges időzítési számok helyett.
Automatizált kódgenerálás
Változtassa a tokeneket CSS változókká és platformkódokká a meglévő tokenépítési folyamattal.
Szemantikai hierarchia
A mozgásjogkivonatokat globális, szemantikai és komponensszintekbe rendezheti (pl. motion.spring.snappy, motion.feedback.success).
Tervező eszköz szinkronizálása
Zökkenőmentesen szinkronizálja a mozgásjogkivonatokat a Figma változók és az éles Git kódbázisok között.
Objektív értékelés
Hogyan ExodeUI ehhez képest Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Teljes első osztályú támogatás a fizikai rugójelzők és sebességgörbék számára
- Egyidejűleg exportál natív mobilra (SwiftUI/Compose) és webes formátumba
- A Visual Inspector segítségével a tervezők valós időben érezhetik a token fizikát
- Automatikus kisegítő lehetőségek tartalékok előnyben részesített-csökkentett mozgáshoz
Traditional Design Tokens (Color/Type Only)
- A legtöbb token eszköz csak a statikus színeket, tipográfiát és térközt támogatja
- A mozgás durva időtartamú karakterláncokra csökken, mint például a „300 ms-os könnyű be-be”
- Nincs vizuális módszer a token dinamikájának tesztelésére a kódba szállítás előtt
- A mérnököknek kézzel kell értelmezniük a mozgási specifikációkat keretkódba
Fejlesztői átadás
Használja a kódjában
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } from 'exodeui';
// A rugók, állapotok és időzítés élőben a .exode fájlban (a
// szerkesztő). A kód bemeneteket továbbít, és visszahallgatja az eseményeket.
export function SnappyButton() {
vissza (
<ExodeUIVászon
src="/snappy_button.bexode"
onTrigger={(név) => console.log('ExodeUI esemény:', név)}
/>
);
}Miért buknak meg a tervezési rendszerek mozgás közben?
A modern tervezési rendszerek tökéletesített színpalettákkal, tipográfiai skálákkal, magassági árnyékokkal és térközrácsokkal rendelkeznek. De a mozgás továbbra is az elfeledett tervezési jelző. A legtöbb szervezetben a mozgásdokumentáció homályos irányelvekből áll, mint például az „animációnak gyorsnak kell lennie” vagy egy statikus, 250 ms-os időtartamú változóból.
- Inkonzisztens márkaérzés: Az egyik mérnök az egyszerűsítést, a másik az egyszerűsítést használja, a mobil pedig az Apple alapértelmezett beállításait használja.
- Törékeny időtartamú görbék: Az időzített animációk kis elemeken lassúak, nagy alsó lapokon pedig sietnek.
- Kisegítő lehetőségek elhanyagolása: A csapatok nem hajtanak végre összefüggő csökkentett mozgásfelülírásokat az összes összetevőben.
A 3-szintű mozgási token hierarchia
A ExodeUI három strukturált szinten modellezi a mozgásjelzőket:
1. szint: Globális primitív tokenek
Nyers matematikai állandók (pl. merevség-400, csillapítás-25, tömeg-1).
2. szint: Szemantikus szándékjelzők
A szándékhoz kötött funkcionális nevek (pl. motion.interactive.snappy, motion.modal.enter).
3. szint: Alkatrész-specifikus tokenek
Felülbírálások meghatározott összetevőkhöz kötöttek (pl. button.toggle.switch).
Topic Cluster Network
Fedezze fel a kapcsolódó fogalmakat és szerszámokat
Motion Token Generator Tool
Mozgásjelzők létrehozása és exportálása
Mozgásfejlesztő környezet
Az MDE platform jövőképe
Hogyan készülnek a ExodeUI fájlok
A .exode-től az alkalmazásig
Szószedet: Mozgásjelzők
Formális definíció és szabványos séma
Kérdései vannak?
Gyakran Ismételt Kérdések
Építsen élő alkatrészeket valódi mozgással.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.