LanguageΕλληνικά
Πυλώνας 06 · Συστήματα Σχεδιασμού
Motion Tokens: The Complete Architecture for Design Systems
Τυποποιήστε την κίνηση σε ολόκληρο το οικοσύστημα του προϊόντος σας. Σταματήστε την κωδικοποίηση αυθαίρετων κυβικών beziers 300ms σε δεκάδες αποθετήρια προγραμματιστών.
What is Motion Tokens: in ExodeUI?
Τα Motion Tokens είναι τυποποιημένα διακριτικά σχεδίασης που καθορίζουν παραμέτρους κινούμενων εικόνων—όπως η ακαμψία του ελατηρίου, ο λόγος απόσβεσης, η μάζα, οι καμπύλες χαλάρωσης και η διάρκεια—σε μορφή αναγνώσιμη από μηχανή. Το δωρεάν Motion Token Generator δημιουργεί ένα σετ εκκίνησης που μπορείτε να εξαγάγετε για CSS και JSON και τα εργαλεία δημιουργίας διακριτικών τα μετατρέπουν σε κώδικα για κάθε πλατφόρμα.
Βασική Αρχιτεκτονική
Γιατί οι μηχανικοί και οι σχεδιαστές επιλέγουν ExodeUI
Design, logic and motion in one file that runs inside your app.
Ανοιξιάτικες μάρκες φυσικής
Ορίστε την κίνηση με φυσικούς δείκτες (ακαμψία, απόσβεση, μάζα) αντί για αυθαίρετους αριθμούς χρονισμού.
Αυτοματοποιημένη δημιουργία κώδικα
Μετατρέψτε τα διακριτικά σε μεταβλητές CSS και κώδικα πλατφόρμας με την υπάρχουσα διοχέτευση δημιουργίας διακριτικών.
Σημασιολογική Ιεραρχία
Οργανώστε τα διακριτικά κίνησης σε καθολικά, σημασιολογικά και επιμέρους επίπεδα (π.χ. motion.spring.snappy, motion.feedback.success).
Συγχρονισμός εργαλείων σχεδίασης
Συγχρονίστε απρόσκοπτα τα διακριτικά κίνησης μεταξύ των μεταβλητών Figma και των βάσεων κωδικών Git παραγωγής.
Αντικειμενική Αξιολόγηση
Πώς συγκρίνεται το ExodeUI με Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Πλήρης υποστήριξη πρώτης κατηγορίας για φυσικά ελατήρια και καμπύλες ταχύτητας
- Εξαγωγές σε εγγενείς μορφές κινητών (SwiftUI/Σύνθεση) και σε μορφές ιστού ταυτόχρονα
- Ο οπτικός επιθεωρητής επιτρέπει στους σχεδιαστές να αισθάνονται συμβολική φυσική σε πραγματικό χρόνο
- Αυτόματες εναλλακτικές δυνατότητες προσβασιμότητας για προτιμήσεις-μειωμένη κίνηση
Traditional Design Tokens (Color/Type Only)
- Τα περισσότερα εργαλεία διακριτικών υποστηρίζουν μόνο στατικά χρώματα, τυπογραφία και απόσταση
- Η κίνηση περιορίζεται σε ακατέργαστες συμβολοσειρές διάρκειας όπως "300ms ease-in-out"
- Δεν υπάρχει οπτικός τρόπος δοκιμής της δυναμικής του διακριτικού πριν την αποστολή στον κώδικα
- Οι μηχανικοί πρέπει να ερμηνεύουν χειροκίνητα τις προδιαγραφές κίνησης σε κώδικα πλαισίου
Προγραμματιστής Handoff
Χρησιμοποιώντας το στον Κώδικά σας
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
εισαγωγή { ExodeUICanvas } από το 'exodeui';
// Ελατήρια, καταστάσεις και χρονισμός ζωντανά στο αρχείο .exode (σχεδιασμένο στο
// συντάκτης). Ο κώδικάς σας μεταβιβάζει εισόδους και ακούει τα συμβάντα πίσω.
συνάρτηση εξαγωγής SnappyButton() {
επιστροφή (
<ExodeUIΚαμβάς
src="/snappy_button.bexode"
onTrigger={(όνομα) => console.log('ExodeUI συμβάν:', όνομα)}
/>
)
}Γιατί τα συστήματα σχεδίασης αποτυγχάνουν κατά την κίνηση
Τα μοντέρνα συστήματα σχεδίασης έχουν τελειοποιήσει τις χρωματικές παλέτες, τις κλίμακες τυπογραφίας, τις σκιές ανύψωσης και τα πλέγματα απόστασης. Αλλά η κίνηση παραμένει το ξεχασμένο διακριτικό σχεδιασμού. Στους περισσότερους οργανισμούς, η τεκμηρίωση κίνησης αποτελείται από ασαφείς οδηγίες, όπως "τα κινούμενα σχέδια πρέπει να είναι ευέλικτα" ή μια στατική μεταβλητή διάρκειας 250 ms.
- Ασυνεπής αίσθηση επωνυμίας: Ένας μηχανικός χρησιμοποιεί ease-out, άλλος χρησιμοποιεί ease-in-out και το κινητό χρησιμοποιεί τις προεπιλογές της Apple.
- Εύθραυστες καμπύλες διάρκειας: Τα χρονομετρημένα κινούμενα σχέδια είναι αργά σε μικρά στοιχεία και βιαστικά σε μεγάλα κάτω φύλλα.
- Παράβλεψη προσβασιμότητας: Οι ομάδες αποτυγχάνουν να εφαρμόσουν συνεκτικές παρακάμψεις μειωμένης κίνησης σε όλα τα στοιχεία.
Η Ιεραρχία διακριτικών κίνησης 3 επιπέδων
Το ExodeUI μοντελοποιεί διακριτικά κίνησης σε τρία δομημένα επίπεδα:
Tier 1: Global Primitive Tokens
Ακατέργαστες μαθηματικές σταθερές (π.χ. ακαμψία-400, απόσβεση-25, μάζα-1).
Tier 2: Semantic Intent Tokens
Λειτουργικά ονόματα που συνδέονται με την πρόθεση (π.χ. motion.interactive.snappy, motion.modal.enter).
Βαθμίδα 3: Διακριτικά για συγκεκριμένα στοιχεία
Παρακάμπτει που συνδέεται με συγκεκριμένα στοιχεία (π.χ. button.toggle.switch).
Topic Cluster Network
Εξερευνήστε Συνδεδεμένες Έννοιες και Εργαλεία
Εργαλείο δημιουργίας διακριτικών κίνησης
Δημιουργήστε και εξάγετε διακριτικά κίνησης
Περιβάλλον Ανάπτυξης Κίνησης
Το όραμα της πλατφόρμας MDE
Πώς δημιουργούνται τα αρχεία ExodeUI
Από το .exode στην εφαρμογή σας
Γλωσσάρι: Motion Tokens
Επίσημος ορισμός και τυπικό σχήμα
Έχετε ερωτήσεις;
Συχνές Ερωτήσεις
Κατασκευάστε ζωντανά εξαρτήματα με πραγματική κίνηση.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.