Anima cho phép các nhà thiết kế tạo ra các nguyên mẫu có cảm giác như thật bên trong Sketch, Adobe XD và Figma. Nhà phát triển có thể xuất thiết kế dưới dạng HTML & CSS hoặc mã React
Thiết kế theo mã, tự động. Tổng quan và yêu cầu
Trong bài viết này, chúng tôi sẽ giới thiệu mọi thứ bạn cần biết để xuất tài liệu Adobe XD sang gói mã HTML
Để chuyển đổi thiết kế Adobe XD thành mã, bạn sẽ cần
- Một thiết kế được tạo trong Adobe XD bằng Anima [Tải xuống tệp mẫu XD của chúng tôi]
- Tải xuống và cài đặt plugin Anima cho Adobe XD
- Tài khoản Anima với Gói Pro
Cách xuất mã
Mã có thể được xuất trực tiếp bên trong Adobe XD hoặc từ ứng dụng web của Anima
Thông qua Adobe XD
- Trong Adobe XD, mở thiết kế bạn đã tạo bằng Anima [Tệp mẫu]
- Nhấp vào Xuất mã ở cuối bảng plugin
- Chọn nơi lưu Gói mã và nhấp vào Lưu
Nhấp vào Xuất mã, sau đó lưu Gói mã cục bộ
Qua ứng dụng web của Anima
Đây là một tùy chọn tuyệt vời cho các nhà phát triển và những người khác không có quyền truy cập vào tài liệu Adobe XD
Trước khi các thành viên khác trong nhóm có thể xuất nó dưới dạng mã từ ứng dụng web, thiết kế phải được đồng bộ hóa với Dự án Anima
- Khi thiết kế được đồng bộ hóa với Dự án, hãy nhấp vào Tải xuống mã ở góc trên cùng bên phải
2. Chọn nơi lưu Gói mã và nhấp vào Lưu
Bên Trong Gói Mã
Bây giờ mã đã được xuất dưới dạng Gói mã trong tệp zip chứa tệp HTML, tệp CSS, hình ảnh và phông chữ
Bạn muốn xem nó trông như thế nào?
Gói mã
Khi các tệp được giải nén, chúng có thể được xem trước cục bộ trong trình duyệt với tất cả các Lớp thông minh và các tương tác giống như một trang web trực tiếp
Mở tệp HTML cục bộ trong trình duyệt của bạn
Nếu bạn mở tệp trong trình soạn thảo văn bản, bạn sẽ thấy HTML và CSS có cấu trúc tốt
Tệp HTML
Tệp CSS
• Mỗi thiết kế màn hình đều có tệp HTML và CSS riêng
• Các màn hình có Điểm dừng chia sẻ cùng một tệp HTML và CSS
Xuất mã F. A. Q
Định vị tuyệt đối và tương đối
Theo mặc định, Anima sử dụng position:absolute
để tạo các nguyên mẫu pixel hoàn hảo. Bật Auto-flexbox để có bố cục position:relative
Anima Auto-Flexbox là một quy trình tự động nhằm tái tạo quy trình suy nghĩ mà các nhà phát triển thực hiện
Chúng tôi đã sử dụng các thuật toán từ thế giới Thị giác Máy tính và xây dựng một giải pháp tự động lấy bất kỳ thiết kế nào và áp dụng bố cục Flexbox cho nó
Để bật Auto-Flexbox, hãy nhấp vào cài đặt Mã xuất và chọn Auto-Flexbox
Bây giờ, khi chúng tôi có một tiêu đề dài hơn, nó sẽ đẩy nội dung bên dưới thay vì chồng lên nó
Auto-Flexbox đang hoạt động
Mã có đáp ứng không?
Đúng. Nếu bạn đã áp dụng Responsive Resize của Adobe XD cho thiết kế của mình, thì mã đã xuất và bản xem trước trong trình duyệt sẽ phản hồi nhanh. Tìm hiểu cách thức hoạt động
Thiết kế với Responsive Resizing được xem trước trên Anima
Breakpoint hoạt động như thế nào?
Điểm ngắt cho phép bạn tạo một bảng vẽ cho mỗi chiều rộng màn hình — ví dụ: Di động, Máy tính bảng và Máy tính để bàn. Khi tạo mã, Anima tạo một tệp HTML và một tệp CSS tương ứng từ các bản vẽ này
Điểm dừng trên máy tính để bàn, máy tính bảng và thiết bị di động
Điểm dừng hiệu quả vì nó sử dụng các truy vấn phương tiện CSS gốc. Nó cho phép trình duyệt chỉ hiển thị thiết kế màn hình phù hợp với kích thước cửa sổ trình duyệt hiện tại
Một phần thưởng khác là hình ảnh chỉ được tải cho kích thước màn hình của người dùng, sắc nét và không quá khổ. Và, chúng tôi đang tải nó từ trên xuống dưới để làm cho nó bóng bẩy hơn nữa
Tất cả các Điểm dừng trong một tệp CSS
Lưu trữ một trang web với các biểu mẫu
Khi bạn lưu trữ trang web của mình trên Anima, chúng tôi cũng cung cấp cho bạn một máy chủ phụ trợ nhỏ để hỗ trợ các biểu mẫu của bạn. Nó cho phép gửi biểu mẫu đến máy chủ đó và được lưu trữ cho bạn
Mã phía máy chủ này không thể được xuất và đưa vào gói mã một cách đơn giản vì mã này cần chạy trên máy chủ chứ không phải trên trình duyệt [được gọi là mã phía máy khách]
Do đó, khi xuất mã với các biểu mẫu, bạn sẽ phải triển khai máy chủ của riêng mình để ghi lại các lần gửi biểu mẫu và lưu trữ dữ liệu của bạn
Sẵn sàng để bắt đầu?
- Tải xuống plugin Anima cho Sketch, Anima cho Adobe XD hoặc Anima cho Figma
- Truy cập trang tìm hiểu của chúng tôi để biết thêm tài nguyên
Thiết kế theo mã, tự động. Như mọi khi, chúng tôi rất vui khi được nghe phản hồi của bạn
Tham gia thảo luận hoặc khoe thiết kế của bạn trên Facebook, Twitter, Slack, Instagram. Hoặc, bỏ phiếu cho các tính năng mới tại UserVoice