Explore Figma Make

Before you start

Who can use this feature

Figma Make is available for Full seats on paid plans.

You can try Figma Make on other seats and plans.

What is Figma Make?

Figma Make is an AI-driven, prompt-to-app tool that lets you bring ideas and existing Figma designs to life as interactive apps. Through conversation, you can ideate, iterate, and improve your apps.

Use Figma Make to:

  • Preview the look and feel of your designs in a functional form
  • Turn proposals and ideas into prototypes to help hone your product approach
  • Explore a variety of solutions for a problem you're trying to solve

Figma Make provides several features that make it easy to transform your Figma designs into interactive apps:

To get started, check out Create a Figma Make file. You can create Figma Make files the same way you create other new files in Figma. In the file browser, navigate to your drafts. Then, in the upper-right corner, click Make.

Note: Figma Make may incorporate third-party content from the internet—such as fonts, code packages, or images—into your app. You are responsible for ensuring you have appropriate rights to all content before publishing.

Find your way around

Figma Make offers a straightforward interface to help you start generating prototypes from your designs as quickly as possible. Figma Make has two primary areas: the AI chat, where you can prompt the model, and the preview, where you can interact with and modify a working version of your app and edit the code.

Chat with agent

The chat in Figma Make is where you'll share Figma designs and images, converse with the agent to generate your interactive app, and iterate by prompting.

Bring your design, images, and other files to Figma Make

To use your existing designs to generate an app, click +, then Add context. Paste the URL to the design you want to use. You can attach more than one design to help give the model more guidance. In the same interface, you can drag or paste images, text files, and more.

You can also paste frames and components from your designs directly into the chat.

Guide the agent with conversation

Have inspired ideas or instructions you want the model to follow? Just chat with the agent and work iteratively with Figma Make to bring those ideas to life.

Run multiple prompts at once

You can run more than one chat at the same time in a single Make file, so you can start a new change while another chat is still working. You don't have to wait for one response to finish before moving on to the next thing you want to do.

Iterate with Figma Make's editing tools

Improving your interactive app is as simple as continuing to converse with the agent. You can also:

  • Use the edit tool to point to specific parts of the preview in Make and make adjustments with a Figma Design-style properties panel
  • Use the draw tool to mark up the preview and add those areas to your prompts
  • Add annotations to your Make preview to give the agent instructions for specific elements
  • Use the version history to edit earlier versions of your app
  • Attaching designs, images, and other files to your prompts

Create an interactive app

Ready to get started? Check out Create a Figma Make file, where you'll find all the details to help get you started generating with the AI chat.

Once you have your interactive app, you can also view it in a dedicated, fullscreen preview, similar to Figma Design prototypes.

You can also add a backend to your app to securely store and manage data. For example, you’ll need a backend when you want to maintain the state of an app across different browsers, provide login screens, save and load content like text and images, and store secrets and API keys.

Collaborate on and share your apps

After you've created an interactive app, you can share it in different ways with your teammates or anyone on the web.

Copy a Figma Make preview as design layers

In Figma Make, you can can copy a snapshot of a preview as layers and then paste those layers into Figma Design. Bringing in Figma Make previews as layers is a great way to iterate on designs with other teammates. For example, you could copy the different interfaces in your web app one at a time, and then use a Figma Design file as a place to collaborate with others, try out different design ideas, and further edit the designs.

Create and use templates

Templates in Figma Make are a great way to create a high quality foundation for users in a team or organization to get started faster with Figma Make.

Templates enable you to:

  • Build a polished Figma Make file that's consistent with brand and product guidelines
  • Share that file with others to use while setting guidelines for how the styles and functionality can be changed
  • Let members of your team and organization get making in a way that respects the guidelines you’ve set

When you create a template in Figma Make, your teammates can start using the template right away to riff on and experiment with the work you've been doing.

Create and publish a Make kit

In a Make kit, you can add npm packages to provide context on which assets—like components, styles, and tokens—to use, import variables and styles from your design library, and write guidelines to provide context on how the assets should use style context and behave.

Share and publish

You can share a preview of your interactive app with anyone you want, using the granular permissions to control access and keep your concepts safe.

Then, when you're ready, publish your interactive app for your organization or to public web with its own dedicated URL courtesy of Figma. You can also assign a custom domain that you own.

What's next?

To get started using Figma Make, check out the following articles:

Questions about Figma Make?

If you have questions about Figma Make or how to use the product, check out the Figma Make FAQs.

Was this article helpful?

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Thank you for helping us improve Figma’s Help Center!