LanguageBahasa Indonesia
Pilar 06 · Sistem Perancangan
Token Gerak: Arsitektur Lengkap untuk Sistem Desain
Standarisasi pergerakan di seluruh ekosistem produk Anda. Hentikan hardcoding bezier kubik 300ms sewenang-wenang di lusinan repositori pengembang.
What is Token Gerak: in ExodeUI?
Token Gerak adalah token desain standar yang menentukan parameter animasi—seperti kekakuan pegas, rasio redaman, massa, kurva pelonggaran, dan durasi—dalam format yang dapat dibaca mesin. Generator Token Gerak gratis kami membuat set starter yang dapat Anda ekspor untuk CSS dan JSON, dan alat pembuatan token mengubahnya menjadi kode untuk setiap platform.
Arsitektur Inti
Mengapa Insinyur & Desainer Memilih ExodeUI
Design, logic and motion in one file that runs inside your app.
Token Fisika Musim Semi
Definisikan gerak dengan tanda fisik (kekakuan, redaman, massa) dan bukan angka waktu yang berubah-ubah.
Pembuatan Kode Otomatis
Ubah token menjadi variabel CSS dan kode platform dengan pipeline pembuatan token Anda yang sudah ada.
Hierarki Semantik
Atur token gerakan ke dalam tingkat global, semantik, dan komponen (misalnya motion.spring.snappy, motion.feedback.success).
Sinkronisasi Alat Desain
Sinkronkan token gerakan dengan lancar antara variabel Figma dan basis kode Git produksi.
Evaluasi Objektif
Bagaimana ExodeUI Dibandingkan dengan Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Dukungan penuh kelas satu untuk token pegas fisik dan kurva kecepatan
- Mengekspor ke seluler asli (SwiftUI/Compose) dan format web secara bersamaan
- Inspektur visual memungkinkan desainer merasakan fisika token secara real time
- Penggantian aksesibilitas otomatis untuk gerakan yang dikurangi
Traditional Design Tokens (Color/Type Only)
- Kebanyakan alat token hanya mendukung warna statis, tipografi, dan spasi
- Gerakan dikurangi menjadi string durasi kasar seperti "kemudahan masuk-keluar 300 ms"
- Tidak ada cara visual untuk menguji dinamika token sebelum dikirimkan ke kode
- Insinyur harus menafsirkan spesifikasi gerakan secara manual ke dalam kode kerangka kerja
Penyerahan Pengembang
Menggunakannya dalam Kode Anda
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
impor { ExodeUICanvas } dari 'exodeui';
// Pegas, status, dan pengaturan waktu ada di file .exode (dirancang di
// penyunting). Kode Anda meneruskan input dan mendengarkan kembali peristiwa.
fungsi ekspor SnappyButton() {
kembali (
<ExodeUIKanvas
src="/snappy_button.bexode"
onTrigger={(nama) => console.log('ExodeUI acara:', nama)}
/>
);
}Mengapa Sistem Desain Gagal Saat Bergerak
Sistem desain modern telah menyempurnakan palet warna, skala tipografi, bayangan ketinggian, dan kisi spasi. Namun gerakan tetap menjadi tanda desain yang terlupakan. Di sebagian besar organisasi, dokumentasi gerakan terdiri dari pedoman yang tidak jelas seperti "animasi harus cepat" atau variabel durasi statis 250 md.
- Nuansa Merek yang Tidak Konsisten: Seorang insinyur menggunakan kemudahan, yang lain menggunakan kemudahan masuk, dan perangkat seluler menggunakan default Apple.
- Kurva Durasi Rapuh: Animasi berwaktu terasa lambat pada elemen kecil dan tergesa-gesa pada lembar bawah yang besar.
- Pengabaian Aksesibilitas: Tim gagal menerapkan penggantian gerakan yang dikurangi secara kohesif di seluruh komponen.
Hierarki Token Gerak 3 Tingkat
ExodeUI memodelkan token gerak di tiga tingkatan terstruktur:
Tingkat 1: Token Primitif Global
Konstanta matematika mentah (misalnya kekakuan-400, redaman-25, massa-1).
Tingkat 2: Token Maksud Semantik
Nama fungsional yang terkait dengan maksud (misalnya, motion.interactive.snappy, motion.modal.enter).
Tingkat 3: Token Khusus Komponen
Menggantikan terikat pada komponen tertentu (misalnya, button.toggle.switch).
Topic Cluster Network
Jelajahi Konsep & Peralatan yang Terhubung
Alat Penghasil Token Gerak
Membuat dan mengekspor token gerak
Lingkungan Pengembangan Gerak
Visi platform MDE
Bagaimana file ExodeUI dibuat
Dari .exode ke aplikasi Anda
Glosarium: Token Gerak
Definisi formal dan skema standar
Punya pertanyaan?
Pertanyaan yang Sering Diajukan
Membangun komponen hidup dengan gerak nyata.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.