Dễ dàng xuất tệp Adobe XD sang HTML và CSS chỉ với "1 click chuột"

Khi bạn đã hoàn thành các thiết kế UI trên Adobe XD, thông thường bạn có thể xuất ra các file ảnh để gửi đến khách hàng. Tuy nhiên, nhiều nhà thiết kế khác lại chọn cách xuất trực tiếp file XD sang dạng mã để có thể thử nghiệm trực tiếp trên các trình duyệt. Nghe đến các dòng mã chúng ta thường có cảm giác rất mơ hồ và hơi hướng về các nhà phát triển (developer). Thế nhưng với Plugin Anima việc xuất tệp từ Adobe XD sang các tệp mã hóa như HTML và CSS rất đơn giản, dường như chỉ với 1 click chột.


Plugin Anima cho Adobe XD giúp bạn tạo các nguyên mẫu có độ trung thực cao cho các trang web, ứng dụng và Landing page ngoài ra nó tự động chuyển đổi file của Adobe XD thành mã HTML và CSS hoạt động.

anima-adobe-xd-plugin.png

Anima cung cấp cho bạn các công cụ tạo mẫu mới trong XD, như thêm video, ảnh động GIF hoặc thư viện animation của Lottie trong thiết kế của bạn, thêm liên kết bên ngoài hoặc thêm trường nhập văn bản. Bạn cũng có thể xác định các điểm breakpoints trong thiết kế để tạo ra các thiết kế Reposive tự động điều chỉnh theo các kích thước màn hình khác nhau, như máy tính để bàn, thiết bị di động và máy tính bảng.

anima-adobe-xd-breakpoints.gif

Khi bạn đang hoàn tất việc tạo propertype trong XD và Anima, bạn có thể mở nó trong cửa sổ trình duyệt bằng cách nhấp vào nút Preview in Browser trong bảng điều khiển Anima. Anima tải các thiết kế của bạn lên Cloud của Anima và mở ra một cửa sổ nơi bạn có thể nhìn thấy và tương tác với thiết kế của mình như thể đó là một trang web trực tiếp. Bạn có thể chia sẻ liên kết này để truyền đạt ý tưởng thiết kế của bạn và cộng tác với nhóm của bạn.

anima-adobe-xd-browser-preview.gif

Khi bạn đã hoàn thành các thiết kế của mình và sẵn sàng để phát triển, Anima sẽ tự động chuyển đổi các propertype của bạn thành mã HTML và CSS chỉ bằng một cú nhấp chuột. Mở dự án của bạn ở Anima và nhấp vào nút “Export Code”. Để xuất thành mã, bạn sẽ cần một tài khoản Anima Pro, nhưng bạn có thể tận hưởng bản dùng thử miễn phí 14 ngày để tự mình kiểm tra chức năng xuất.

anima-adobe-xd-export-code.gif

Tham khảo: Adobe XD
 

Đính kèm

  • anima.jpg
    anima.jpg
    121.1 KB · Lượt xem: 0
Back
Bên trên