Các nhà thiết kế thường tạo nguyên mẫu chuyển đổi trong Figma với Smart Animate và tính năng nới lỏng lò xo hoặc bezier. Sau đó, các nhà phát triển cần tái tạo chuyển động đó trong React. Figma không xuất các chuyển đổi này dưới dạng mã hoạt ảnh đang hoạt động, vì vậy công việc là dịch thuật.
Bắt đầu bằng cách ghi lại những gì nguyên mẫu thực hiện: điều gì kích hoạt thay đổi (chạm, di chuột, sau khi trì hoãn), lớp nào di chuyển và thuộc tính nào thay đổi cũng như thời gian (khoảng thời gian với đường cong nới lỏng hoặc lò xo). Chế độ kiểm tra và bảng nguyên mẫu hiển thị các giá trị này.
Đối với những trường hợp đơn giản như mờ dần hay thay đổi màu sắc, hiệu ứng chuyển tiếp CSS là đủ. Đối với các lò xo, cử chỉ, chuyển đổi bố cục được chia sẻ và hoạt ảnh vào hoặc thoát, một thư viện như Chuyển động (trước đây là Framer Motion) là lựa chọn phổ biến trong React. Sử dụng cùng các giá trị lò xo mà nhà thiết kế đã chọn.
Lưu các giá trị đó dưới dạng mã thông báo chuyển động để lần chuyển tiếp tiếp theo sử dụng cùng thời gian. Figma Animation to Spring Converter miễn phí của chúng tôi biến Figma trở nên dễ dàng hơn trong cài đặt mùa xuân. Các công cụ mã hóa AI có thể tăng tốc độ này, đặc biệt khi được kết nối với máy chủ MCP của Figma để chúng có thể đọc ngữ cảnh thiết kế.
Đối với các thành phần có nhiều trạng thái, chẳng hạn như nút đang tải, thành công và lỗi hoặc luồng tích hợp hoạt ảnh, việc xây dựng lại bằng tay sẽ rất tốn kém. ExodeUI do chúng tôi tạo ra cho phép bạn thiết kế thành phần đó một lần và phát nó trong React với gói exodeui npm, điều khiển nó bằng các đầu vào và sự kiện từ mã của bạn.