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

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

Bởi DesignerPlus vào 19/6/20 lúc 15:35
  1. DesignerPlus

    DesignerPlus QT

    Đã được thích:
    50
    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.

    [​IMG]

    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.

    [​IMG]

    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.


    [​IMG]

    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.

    [​IMG]
    Tham khảo: Adobe XD
     
    Có thể bạn thích

Bình luận

Thảo luận trong 'Kiến thức thiết kế' bắt đầu bởi DesignerPlus, 19/6/20.

Chia sẻ trang này