Hướng dẫn chuyển xd sang html

Adobe XD là một công cụ thiết kế tuyệt vời cho phép bạn dễ dàng tạo các thiết kế trang web tuyệt vời mà không cần bất kỳ kinh nghiệm phát triển web nào trước đó. Bạn chỉ có thể nhập các tệp PSD thiết kế của mình từ Photoshop và tạo giao diện người dùng trang web bắt mắt.

Những thiết kế này giúp các nhà phát triển hiểu được cách bạn muốn trang web của mình trông như thế nào và giúp quá trình phát triển trở nên dễ dàng hơn một chút. Tuy nhiên, chỉ có một số cách hạn chế để bạn có thể xuất các thiết kế từ phần mềm.

Bạn có thể chọn lưu chúng dưới dạng tệp XD và hy vọng nhà phát triển đã cài đặt phần mềm trên hệ thống của mình hoặc xuất từng bản vẽ dưới dạng tệp PNG riêng lẻ, điều này có thể hơi bất tiện khi sử dụng.

Rất may, có một plugin bên thứ ba tiện dụng cho phép bạn xuất các bảng vẽ dưới dạng tệp HTML và đó là những gì tôi sẽ nói trong bài viết này. Nhưng trước khi chúng ta đi đến nó, có một số điều bạn cần biết.

Ghi chú: Tệp HTML được tạo bằng cách sử dụng phương pháp này không được coi là cơ sở cho một trang web hoàn chỉnh. Phương pháp này chỉ là một phương tiện để dễ dàng chia sẻ thiết kế của bạn với nhà phát triển chứ không phải là một quy trình phát triển trang web chức năng.

Xuất tệp Adobe XD sang HTML bằng plugin

Bây giờ chúng ta đã giải quyết được điều đó, chỉ cần làm theo các bước đơn giản sau để tải xuống plugin cần thiết và sau đó xuất tệp Adobe XD sang HTML:

Bước 1: Nhấp vào nút menu bánh hamburger ở góc trên cùng bên trái của phần mềm.

Bước 2: Cuộn xuống hết cỡ rồi nhấp vào tùy chọn Plugins. Điều đó sẽ mở ra bảng điều khiển Plugins mới ở bên phải của menu chính.

Bước 3: Chọn tùy chọn Khám phá Plugin từ bảng Plugin.

Bước 4: Trong trang tiếp theo, hãy tìm kiếm HTML và sau đó nhấp vào nút Cài đặt bên cạnh plugin Xuất Web.

Khi bạn đã cài đặt xong plugin cần thiết, hãy mở dự án bạn muốn xuất sang HTML và sau đó tiếp tục với các bước sau. Đối với bài viết này, tôi sẽ sử dụng artboard Adobe XD miễn phí mà tôi tìm thấy trên mạng.

Bước 5: Chọn artboard bạn muốn xuất bằng cách nhấp vào nó.

Bước 6: Bây giờ hãy nhấp vào nút menu, điều hướng đến bảng Plugin và sau đó chọn tùy chọn Export Artboard từ cài đặt plugin Web Export mới.

Từ cùng một cửa sổ, bạn cũng có thể chọn xuất nhiều bản vẽ hoặc bản vẽ cuối cùng mà bạn đã chỉnh sửa.

Bước 7: Trong cửa sổ bật lên Export Artboard, hãy thêm tên cho tệp và sau đó chọn thư mục mà bạn muốn lưu tệp bằng cách nhấp vào biểu tượng thư mục nhỏ bên cạnh tùy chọn Xuất Thư mục.

Bước 8: Bây giờ, nếu bạn muốn thêm tập lệnh bên ngoài, biểu định kiểu hoặc phông chữ thay thế vào tệp đã xuất, bạn có thể thêm chúng trong cùng một cửa sổ.

Bước 9: Sau đó, bạn có thể chọn kích thước của tệp HTML đầu ra bằng cách nhập các giá trị vào khoảng trống bên cạnh tùy chọn Kích thước.

Bước 10: Để đảm bảo rằng dự án chia tỷ lệ phù hợp, bạn cũng có thể chọn các cài đặt tỷ lệ khác nhau từ cùng một cửa sổ bằng cách chọn hộp bên cạnh mỗi tùy chọn.

Bước 11: Hơn nữa, bạn có thể chọn bất kỳ cài đặt bổ sung nào như Điều hướng bàn phím, Tự động làm mới, v.v. bằng cách chọn các hộp bên cạnh các tùy chọn.

Bước 12: Khi bạn đã hoàn thành tất cả các cài đặt, chỉ cần nhấp vào nút Xuất màu xanh lam và bạn đã hoàn tất. Artboard của bạn sẽ xuất hiện dưới dạng tệp HTML trong thư mục đích mà bạn đã chọn trước đó.

Từ cùng một cửa sổ, bạn cũng có thể sao chép CSS và đánh dấu bảng vẽ của mình nếu bạn cũng muốn chia sẻ thông tin đó với nhà phát triển của mình.

Một lần nữa, hãy lưu ý rằng HTML đã xuất hoàn toàn không thể được sử dụng để phát triển một trang web đầy đủ chức năng. Hiện tại, không có cách nào để bạn xuất bản trực tiếp dự án Adobe XD lên web và theo một số cuộc thảo luận trên các diễn đàn của Adobe, sẽ không sớm có dự án nào cả.

Adobe XD chỉ là một công cụ tạo mẫu cho phép bạn tạo một thiết kế ban đầu mà không cần mã. Khi bạn đã có một thiết kế sẵn sàng, bạn có thể sử dụng một nền tảng như Dreamweaver để chuyển thiết kế của bạn thành một trang web. Nhưng để làm được điều đó, bạn sẽ cần một số kinh nghiệm phát triển web trước đó hoặc bạn sẽ cần thuê một người có khả năng đó.

Cập nhật lần cuối vào ngày 5 tháng 7 năm 2019

Bài viết trên có thể chứa các liên kết liên kết giúp hỗ trợ smartreviewaz. Tuy nhiên, nó không ảnh hưởng đến tính toàn vẹn biên tập của chúng tôi. Nội dung vẫn không thiên vị và xác thực.