Xuất mã nguồn (HTML, React, Tailwind)
Xuất một màn hình đơn lẻ hoặc cả dự án thành mã front-end sẵn sàng cho môi trường thật.
Cập nhật lần cuối:
Bạn có thể xuất gì
- Một màn hình đơn lẻ dưới dạng HTML hoặc một thành phần React.
- Cả một dự án dưới dạng dự án React nhiều màn hình, đã ráp và tải về được dưới dạng tệp nén.
Phần kiểu dáng dùng Tailwind CSS, với chủ đề dự án của bạn được biểu diễn bằng design token, nên mã mang đúng hệ thống mà canvas đang dùng.
Xuất một màn hình
- Chọn màn hình.
- Xuất → Mã nguồn.
- Chọn HTML hoặc React.
- Sao chép, hoặc tải về.
Xuất cả một dự án
Việc xuất dự án chạy như một tác vụ nền — nó tạo từng màn hình, rồi ráp chúng thành một cấu trúc dự án. Dự án lớn hơn thì lâu hơn; bạn có thể theo dõi tiến độ và tải về khi xong.
Mã trông ra sao
Đây là mã front-end thật, dễ đọc: mã ngữ nghĩa, các lớp tiện ích của Tailwind, token chủ đề cho màu và chữ, và hình ảnh tham chiếu qua URL từ kho tài nguyên của dự án bạn.
Hai điều cần tính trước:
- Tài nguyên mặc định nằm ở xa. Hãy tải chúng về kho mã của bạn trước khi phát hành, để website thật của bạn không phụ thuộc vào URL tài nguyên của UXMagic.
- Đây là front-end. Không có tầng dữ liệu, định tuyến hay quản lý trạng thái — bạn tự nối nó vào ứng dụng của mình.
Responsive
Mã đã xuất phản ánh màn hình bạn xuất, ở đúng chiều rộng của màn hình đó. Nếu bạn đã tạo biến thể di động và máy tính riêng, hãy xuất cả hai và ghép chúng tại breakpoint của bạn. Xem Biến thể responsive và theo thiết bị.
Đưa thẳng vào một kho mã
Bạn có thể đẩy mã đã xuất thẳng lên GitHub thay vì tải về — xem Đồng bộ GitHub.
Bài viết này có hữu ích không?
Bài liên quan
Đồng bộ GitHub
Đẩy mã đã xuất thẳng vào một kho lưu trữ, và triển khai bằng GitHub Pages.
Xuất sang Figma
Gửi màn hình sang Figma dưới dạng frame auto-layout chỉnh sửa được, sẵn sàng cho lập trình.
Thư viện thành phần và hệ thống thiết kế
Dùng thư viện Figma và React tích hợp sẵn, hoặc mang thành phần của bạn vào một dự án.