Turn Figma designs into working web apps

Paste a Figma frame link, describe what the page should do, and let Manus build the frontend and backend you can publish.

From design frame to working page

Manus reads the layout, components, fonts and colors in the Figma frame to build a functional web app.

Design frameWorking page
Sample studio / Home
North Studio
NEWRoom to createExplore
Site preview
North Studio
NEWRoom to createExplore

Illustrative example.

Design to code for the pages you need

Start with a landing page, a dashboard or several connected frames. Each request can describe the behavior behind the design.

Figma to website: launch a landing page

Take a marketing frame from Figma to HTML, CSS and JavaScript, then publish the finished site.

Figma to code: build a working dashboard

Share an admin dashboard design and describe the data and actions you need. Manus builds a web app with frontend and backend components.

Figma to app: connect the whole flow

Bring multiple frames into one design-to-code request. Describe how pages link, what happens on click and which component states matter.

Convert Figma to code with a link, not a plugin

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.

Publish your site, then keep refining it

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.

One link, a clear request, a site you can publish

Explain how your frames connect. Then review the result and continue making changes in conversation.

01

Connect and share your frame

Connect your Figma account once, then import the frame link you want to build.

02

Describe what should work

Tell Manus about the pages, interactions and states you need.

03

Preview and publish

Review the web app, ask for edits and publish when ready.

Keep building with Manus

Frequently asked questions

How do I convert Figma to code with Manus?

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.

Can Manus turn Figma into HTML and CSS?

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.

Does Manus support Figma to React and Figma to Tailwind?

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.

Do I need a Figma to code plugin?

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.

Do I need to install a Figma MCP server?

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.

Do I need Figma Dev Mode or a paid Figma seat?

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.

Can a Figma to code AI workflow build a working app?

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.

Can Manus handle multi-page designs and interactions?

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.

Can I publish the site after converting it?

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.

How is this different from Figma Make?

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.

Can I use Figma to Flutter or Figma to React Native output?

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.

Give your Figma design a working home

Start with a Figma frame