Xuất html từ xd

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

1. 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]
2. Tải xuống và cài đặt plugin Anima cho Adobe XD
3. 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

1. Trong Adobe XD, mở thiết kế bạn đã tạo bằng Anima [Tệp mẫu]
2. Nhấp vào Xuất mã ở cuối bảng plugin
3. 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

Nhấp vào Xem trước trong Trình duyệt > Đồng bộ hóa với Dự án

1. 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

Adobe XD có thể nhập HTML không?