Xếp hạng của người biên tập: Xếp hạng của người dùng: [Tổng: 0 Trung bình: 0].ilfs_responsive_below_title_1 {width: 300px; } @media (min-width: 500px) {.ilfs_responsive_below_title_1 {width: 300px; }} @media (min-width: 800px) {.ilfs_responsive_below_title_1 {width: 336px; }}
Figma Nocode là một plugin miễn phí dành cho Figma để xuất thiết kế ở định dạng HTML . Bạn chỉ cần chọn lớp bạn muốn lưu và sau đó nó sẽ giúp bạn xuất nó dưới dạng tệp HTML. Nó chuyển đổi một cách thông minh tất cả các thành phần trong thiết kế của bạn thành các khối HTML và sẽ tự động cung cấp cho bạn HTML cuối cùng có CSS được nhúng trong đó. Vì vậy, ngoài HTML, nó cũng tạo ra mã CSS. Điều tuyệt vời nhất là chỉ cần 2 cú nhấp chuột để chuyển đổi bất kỳ phần nào của thiết kế Figma hoặc toàn bộ khung sang HTML.
Nếu bạn sử dụng Figma thường xuyên để tạo nguyên mẫu giao diện người dùng thì bạn sẽ thích plugin này ở đây. Với điều này, bạn sẽ có thể xuất thiết kế Figma sang trang web sẵn sàng HTML chỉ trong một vài cú nhấp chuột. Tuy nhiên, đối với một số yếu tố như công tắc và nút, nó có thể bị lỗi. Nhưng đối với các thành phần khác như bảng, đoạn văn, độ dốc văn bản, kiểu và các thành phần khác, nó hoạt động hoàn hảo. HTML được tạo cuối cùng cũng đáp ứng và vì vậy bạn sẽ phải chỉnh sửa tối thiểu để làm cho nó hoạt động.
Làm cách nào để Xuất Figma sang Trang web HTML một trang miễn phí?
Plugin này Figma Nocode hoàn toàn miễn phí để sử dụng. Một nhược điểm nhỏ là ngôn ngữ chính của công cụ này là tiếng Trung. Nhưng điều đó sẽ không thành vấn đề vì bạn chỉ cần nhấp vào các nút đơn giản mà tôi sẽ chỉ cho bạn bên dưới.
Mở Figma và mở thiết kế mà bạn muốn xuất sang HTML. Nếu chưa có tài khoản, bạn có thể đăng ký một tài khoản miễn phí tại đây. Sau khi thiết kế của bạn mở ra, chỉ cần chọn khung chính hoặc lớp mà bạn muốn xuất.
Bây giờ, sau đó, bạn chuyển đến phần plugin và chọn tùy chọn “Tìm thêm plugin”.
Tìm kiếm Figma Nocode và sau đó chỉ cần nhấn vào nút chạy. Plugin sẽ hiển thị ngay bây giờ. Và nó sẽ phát hiện lựa chọn của bạn.
Nhấp vào nút được đánh dấu và sau đó nó sẽ bắt đầu hiển thị thiết kế của bạn. Sau khi hoàn tất, nó sẽ hiển thị điều đó cho bạn bằng biểu ngữ màu xanh lá cây.
Bây giờ, chỉ cần tải xuống HTML. Nhấp vào tùy chọn 3dots và sau đó nhấp vào nút HTML. Tệp HTML bây giờ sẽ bắt đầu tải xuống. Lưu tệp này và sau đó mở nó trong trình duyệt. Bạn sẽ thấy rằng một tệp này có cả HTML và CSS.
Đây là khá nhiều. Bằng cách này, bạn có thể tiếp tục sử dụng plugin này để chuyển đổi thiết kế Figma của mình sang HTML và CSS thuần túy. Tất cả những gì nó cần là 2 cú nhấp chuột, bạn sẽ có tệp HTML mà bạn có thể lưu trên PC của mình. Khi bạn có mã cuối cùng, bạn có thể tự do làm bất cứ điều gì bạn muốn.
Suy nghĩ cuối cùng:
Figma Nocode là một plugin Figma tuyệt vời mà bạn có thể sử dụng. Tôi thích cách nó hoạt động và nếu bạn sử dụng Figma quá thường xuyên thì bạn có thể sử dụng nó bất cứ lúc nào. Bạn có thể mở bất kỳ thiết kế trang web nào mà bạn đã tạo và xuất nó ở dạng sẵn sàng để sử dụng HTML. Rất đơn giản để biến một thiết kế thành một trang web duy nhất và độ chính xác cũng rất cao. Vì vậy, hãy tự mình thử và xem nó có tạo ra một trang web chính xác cho bạn hay không.
