Figma to website: launch a landing page
Take a marketing frame from Figma to HTML, CSS and JavaScript, then publish the finished site.
Paste a Figma frame link, describe what the page should do, and let Manus build the frontend and backend you can publish.
Manus reads the layout, components, fonts and colors in the Figma frame to build a functional web app.
Illustrative example.
Start with a landing page, a dashboard or several connected frames. Each request can describe the behavior behind the design.
Take a marketing frame from Figma to HTML, CSS and JavaScript, then publish the finished site.
Share an admin dashboard design and describe the data and actions you need. Manus builds a web app with frontend and backend components.
Bring multiple frames into one design-to-code request. Describe how pages link, what happens on click and which component states matter.
No separate Figma to code plugin is needed for the documented workflow. Connect your Figma account, paste a frame link and say what should work on the page.
AI design to code does not end with a preview. Publish the website, connect your own domain, and describe the changes you want in a conversation.
Explain how your frames connect. Then review the result and continue making changes in conversation.
Connect your Figma account to Manus, then share a link to a Figma frame and describe the web app you want to build. Manus reads its layout, components, fonts and colors, then builds the frontend and necessary backend components.
Yes. The documented Figma import generates HTML, CSS and JavaScript for the frontend, plus the backend components needed for the requested web app. By default, Manus builds it as a React and Tailwind CSS project that runs as HTML, CSS and JavaScript in the browser. Describe the pages and behavior you need along with the frame link.
Yes. Manus builds websites with React and Tailwind CSS by default, so a design imported from Figma becomes a React frontend styled with Tailwind, plus the backend code your request needs. You can export the project code to a private GitHub repository.
No separate plugin is part of the documented flow. Connect your Figma account, share a frame link with Manus and explain what to build; you can add more frames when your design has several pages or states.
No. Manus connects to your Figma account directly through Figma sign-in. After you connect it, import a frame link and describe the app; there is no separate Figma MCP server to install or run.
No. Manus imports frames through your connected Figma account rather than Dev Mode, and a free Figma account can connect. Figma limits how often apps can read files: free plans and seats without Dev Mode get a small monthly allowance, while paid seats with Dev Mode get much higher limits. If you reach the limit, Manus tells you.
Yes. Share a Figma frame link and describe the app. Manus analyzes the design and builds the frontend as well as necessary backend components for a working web app.
Yes. Share multiple Figma frames and explain their page flow, interactions or component states, such as hover. This helps Manus build an interactive, multi-page web experience.
Yes. Preview the web app, click Publish, and it becomes accessible online. You can connect a custom domain and keep making changes by describing them to Manus.
Figma Make is a product from Figma. With Manus, the documented path starts with a Figma frame link and a request for a web app: it can include backend components, then you can publish the site and continue editing it in conversation.
This page covers Figma to web app conversion. The import guide names HTML, CSS and JavaScript for the frontend; it does not confirm Flutter or React Native output.