Figma sang website: ra mắt trang landing page
Chuyển một khung tiếp thị từ Figma sang HTML, CSS và JavaScript, sau đó xuất bản trang web hoàn chỉnh.
Biến thiết kế Figma thành ứng dụng web hoạt động được
Dán một liên kết khung Figma, mô tả trang nên làm gì, và để Manus xây dựng frontend và backend mà bạn có thể xuất bản.
Từ khung thiết kế đến trang hoạt động được
Manus đọc bố cục, các thành phần, phông chữ và màu sắc trong khung Figma để xây dựng một ứng dụng web có chức năng hoàn chỉnh.
Khung thiết kếTrang hoạt động
Ví dụ minh họa.
Chuyển thiết kế thành mã cho các trang bạn cần
Bắt đầu với một trang đích, một bảng điều khiển hoặc nhiều khung kết nối với nhau. Mỗi yêu cầu có thể mô tả hành vi phía sau thiết kế.
Figma sang code: xây dựng bảng điều khiển hoạt động
Chia sẻ một thiết kế bảng điều khiển quản trị và mô tả dữ liệu, hành động bạn cần. Manus sẽ xây dựng một ứng dụng web với các thành phần frontend và backend.
Figma đến ứng dụng: kết nối toàn bộ luồng
Đưa nhiều khung vào một yêu cầu chuyển thiết kế thành mã. Mô tả cách các trang liên kết, điều gì xảy ra khi nhấp và những trạng thái thành phần nào quan trọng.
Chuyển Figma thành code bằng một liên kết, không cần plugin
Không cần plugin chuyển Figma sang mã riêng cho quy trình làm việc được ghi lại. Kết nối tài khoản Figma của bạn, dán liên kết frame và nói rõ những gì cần hoạt động trên trang.
Xuất bản trang web của bạn, rồi tiếp tục hoàn thiện nó
Thiết kế bằng AI chuyển sang code không chỉ dừng lại ở bản xem trước. Hãy xuất bản trang web, kết nối với domain riêng của bạn, và mô tả những thay đổi bạn muốn trong một cuộc trò chuyện.
Một liên kết, một yêu cầu rõ ràng, một trang web bạn có thể xuất bản
Giải thích cách các khung hình của bạn kết nối với nhau. Sau đó xem lại kết quả và tiếp tục thay đổi trong cuộc trò chuyện.
Tiếp tục xây dựng với Manus
Câu hỏi thường gặp
Làm thế nào để chuyển Figma thành mã bằng Manus?
Kết nối tài khoản Figma của bạn với Manus, sau đó chia sẻ liên kết đến một khung Figma và mô tả ứng dụng web bạn muốn xây dựng. Manus sẽ đọc bố cục, thành phần, phông chữ và màu sắc của nó, sau đó xây dựng frontend và các thành phần backend cần thiết.
Manus có thể chuyển Figma thành HTML và CSS không?
Có. Việc nhập Figma theo tài liệu sẽ tạo ra HTML, CSS và JavaScript cho frontend, cùng các thành phần backend cần thiết cho ứng dụng web được yêu cầu. Theo mặc định, Manus xây dựng nó như một dự án React và Tailwind CSS, chạy dưới dạng HTML, CSS và JavaScript trong trình duyệt. Hãy mô tả các trang và hành vi bạn cần cùng với liên kết frame.
Manus có hỗ trợ Figma sang React và Figma sang Tailwind không?
Có. Manus mặc định xây dựng website bằng React và Tailwind CSS, vì vậy một thiết kế nhập từ Figma sẽ trở thành frontend React được tạo kiểu bằng Tailwind, cùng với mã backend mà yêu cầu của bạn cần. Bạn có thể xuất mã nguồn dự án sang một repository GitHub riêng tư.
Tôi có cần plugin chuyển Figma thành mã không?
Không cần plugin riêng nào trong quy trình được ghi lại. Kết nối tài khoản Figma của bạn, chia sẻ liên kết frame với Manus và giải thích những gì cần xây dựng; bạn có thể thêm nhiều frame khi thiết kế của bạn có nhiều trang hoặc trạng thái.
Tôi có cần cài đặt máy chủ Figma MCP không?
Không. Manus kết nối trực tiếp với tài khoản Figma của bạn qua đăng nhập Figma. Sau khi kết nối, hãy nhập một liên kết frame và mô tả ứng dụng; không cần cài đặt hay chạy riêng một máy chủ Figma MCP nào.
Tôi có cần Figma Dev Mode hoặc một ghế Figma trả phí không?
Không. Manus nhập frame thông qua tài khoản Figma đã kết nối của bạn chứ không phải qua Dev Mode, và một tài khoản Figma miễn phí vẫn có thể kết nối. Figma giới hạn tần suất các ứng dụng đọc file: gói miễn phí và các seat không có Dev Mode được cấp một hạn mức hàng tháng nhỏ, trong khi các seat trả phí có Dev Mode được cấp hạn mức cao hơn nhiều. Nếu bạn đạt đến giới hạn, Manus sẽ thông báo cho bạn.
Một quy trình AI chuyển Figma sang code có thể xây dựng một ứng dụng hoạt động được không?
Có. Chia sẻ liên kết một frame Figma và mô tả ứng dụng. Manus sẽ phân tích thiết kế và xây dựng frontend cũng như các thành phần backend cần thiết để có một ứng dụng web hoạt động được.
Manus có thể xử lý các thiết kế và tương tác nhiều trang không?
Có. Chia sẻ nhiều frame Figma và giải thích luồng trang, tương tác hoặc trạng thái component của chúng, chẳng hạn hover. Điều này giúp Manus xây dựng một trải nghiệm web đa trang, có tính tương tác.
Tôi có thể xuất bản trang web sau khi chuyển đổi không?
Có. Xem trước ứng dụng web, nhấn Publish, ứng dụng sẽ có thể truy cập trực tuyến. Bạn có thể kết nối miền tùy chỉnh và tiếp tục chỉnh sửa bằng cách mô tả thay đổi với Manus.
Điều này khác gì so với Figma Make?
Figma Make là sản phẩm của Figma. Với Manus, quy trình được ghi lại bắt đầu bằng một liên kết khung Figma và một yêu cầu cho ứng dụng web: nó có thể bao gồm các thành phần backend, sau đó bạn có thể xuất bản trang web và tiếp tục chỉnh sửa trong cuộc trò chuyện.
Tôi có thể sử dụng đầu ra từ Figma sang Flutter hoặc Figma sang React Native không?
Trang này đề cập đến việc chuyển đổi từ Figma sang ứng dụng web. Hướng dẫn nhập liệu nêu rõ HTML, CSS và JavaScript cho phần frontend; không xác nhận đầu ra cho Flutter hoặc React Native.