LanguageTiếng Việt
Trụ cột 06 · Hệ thống thiết kế
Mã thông báo chuyển động: Kiến trúc hoàn chỉnh cho hệ thống thiết kế
Chuẩn hóa chuyển động trên toàn bộ hệ sinh thái sản phẩm của bạn. Dừng mã hóa cứng các khối khối 300ms tùy ý trên hàng chục kho lưu trữ của nhà phát triển.
What is Mã thông in ExodeUI?
Mã thông báo chuyển động là mã thông báo thiết kế được tiêu chuẩn hóa nhằm xác định các tham số hoạt ảnh—chẳng hạn như độ cứng của lò xo, tỷ lệ giảm chấn, khối lượng, đường cong nới lỏng và thời lượng—ở định dạng mà máy có thể đọc được. Trình tạo mã thông báo chuyển động miễn phí của chúng tôi tạo bộ khởi đầu mà bạn có thể xuất cho CSS và JSON, đồng thời các công cụ tạo mã thông báo biến chúng thành mã cho từng nền tảng.
Kiến trúc cốt lõi
Vì sao kỹ sư và nhà thiết kế chọn ExodeUI
Design, logic and motion in one file that runs inside your app.
Mã thông báo vật lý mùa xuân
Xác định chuyển động bằng các mã thông báo vật lý (độ cứng, độ giảm chấn, khối lượng) thay vì các con số thời gian tùy ý.
Tạo mã tự động
Biến mã thông báo thành các biến CSS và mã nền tảng bằng quy trình xây dựng mã thông báo hiện có của bạn.
Hệ thống phân cấp ngữ nghĩa
Sắp xếp mã thông báo chuyển động thành các cấp độ toàn cầu, ngữ nghĩa và thành phần (ví dụ: motion.spring.snappy, motion.feedback.success).
Đồng bộ hóa công cụ thiết kế
Đồng bộ hóa mã thông báo chuyển động liền mạch giữa các biến Figma và cơ sở mã Git sản xuất.
Đánh giá khách quan
ExodeUI so với Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Hỗ trợ đầy đủ hạng nhất cho mã thông báo lò xo vật lý và đường cong vận tốc
- Xuất đồng thời sang định dạng web và thiết bị di động gốc (SwiftUI/Compose)
- Trình kiểm tra trực quan cho phép các nhà thiết kế cảm nhận vật lý mã thông báo trong thời gian thực
- Dự phòng khả năng truy cập tự động cho chuyển động ưu tiên giảm
Traditional Design Tokens (Color/Type Only)
- Hầu hết các công cụ mã thông báo chỉ hỗ trợ màu tĩnh, kiểu chữ và khoảng cách
- Chuyển động được giảm xuống thành các chuỗi thời lượng thô như "dễ dàng ra vào 300ms"
- Không có cách trực quan để kiểm tra tính năng động của mã thông báo trước khi chuyển sang mã
- Các kỹ sư phải diễn giải thủ công các thông số chuyển động thành mã khung
Bàn giao cho đội phát triển
Dùng trong mã của bạn
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
nhập {ExodeUICanvas } từ 'exodeui';
// Lò xo, trạng thái và thời gian tồn tại trong tệp .exode (được thiết kế trong
// trình soạn thảo). Mã của bạn chuyển đầu vào vào và nghe lại các sự kiện.
hàm xuất SnappyButton() {
trở lại (
<ExodeUIVải
src="/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI sự kiện:', name)}
/>
);
}Tại sao hệ thống thiết kế thất bại khi chuyển động
Các hệ thống thiết kế hiện đại có bảng màu hoàn hảo, tỷ lệ kiểu chữ, bóng độ cao và lưới khoảng cách. Nhưng chuyển động vẫn là dấu hiệu thiết kế bị lãng quên. Trong hầu hết các tổ chức, tài liệu chuyển động bao gồm các hướng dẫn mơ hồ như "hoạt ảnh phải hấp dẫn" hoặc biến thời lượng tĩnh 250 mili giây.
- Cảm nhận thương hiệu không nhất quán: Một kỹ sư sử dụng easy-out, một kỹ sư khác sử dụng easy-in-out và thiết bị di động sử dụng các mặc định của Apple.
- Đường cong thời lượng giòn: Hoạt ảnh được tính thời gian có cảm giác chậm trên các phần tử nhỏ và vội vã trên các trang tính lớn phía dưới.
- Bỏ qua khả năng truy cập: Các nhóm không triển khai các phần ghi đè giảm chuyển động gắn kết trên tất cả các thành phần.
Hệ thống phân cấp mã thông báo chuyển động 3 tầng
ExodeUI mô hình mã thông báo chuyển động qua ba tầng có cấu trúc:
Cấp 1: Token nguyên thủy toàn cầu
Các hằng số toán học thô (ví dụ: độ cứng-400, độ giảm chấn-25, khối lượng-1).
Cấp 2: Mã thông báo ý định ngữ nghĩa
Tên chức năng gắn liền với mục đích (ví dụ: motion.interactive.snappy, motion.modal.enter).
Cấp 3: Mã thông báo theo thành phần cụ thể
Ghi đè được liên kết với các thành phần cụ thể (ví dụ: nút.toggle.switch).
Topic Cluster Network
Khám phá khái niệm và công cụ liên quan
Công cụ tạo mã thông báo chuyển động
Tạo và xuất mã thông báo chuyển động
Môi trường phát triển chuyển động
Tầm nhìn nền tảng MDE
Cách tạo tệp ExodeUI
Từ .exode đến ứng dụng của bạn
Thuật ngữ: Mã thông báo chuyển động
Định nghĩa chính thức và lược đồ chuẩn
Bạn có câu hỏi?
Câu hỏi thường gặp
Tạo component sống động với chuyển động thật.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.