Create and edit a functional prototype or web app

Before you start

Who can use this feature

Figma Make is in open beta.

While in beta, Figma Make is available on all paid plans.

Requires a Full seat.

With Figma Make, you can use the chat interface to create functional prototypes, web apps, interactive UI, and more. Figma Make is AI-driven, which makes creating your own interactive prototypes as simple as sharing some examples or having a short conversation. You can edit or improve your functional prototypes and web apps by continuing the conversation, as well as edit the preview and code directly.

Create a functional prototype or web app

To create a functional prototype, web app or interactive UI with Figma Make:

1. Create a Figma Make file.
2. In the AI chat, tell the model what you’d like to build. You can do one or more of the following to guide the AI:
   • Attach Figma designs.
   • Paste frames from Figma designs and images directly into the chat.
   • Enter your ideas and instructions in the prompt box.
3. Click Send.

After you send your prompt, Figma Make starts generating the code for your functional prototype or web app. Depending on how complex the end result is, it may take a few minutes for Figma Make to finish generating the code.

When the process is complete, Figma Make will respond with a summary of the changes, and an interactive preview appears.

If you encounter any issues while trying to get the initial result, see our recommendations for troubleshooting in Figma Make.

Edit a functional prototype or web app

To edit an existing functional prototype or web app, you follow the same steps in Create a functional prototype or web app. You continue the existing conversation in order to iterate and improve the original result. You can also point to specific parts of the original result that you want the AI to modify.

Use the following methods to edit your functional prototype or web app:

• Use Edit to point to specific parts of your functional prototype or web app that you want Figma Make to focus on.
• Use the version history to edit earlier versions of your functional prototype or web app
• Attach Figma designs.
• Paste frames from Figma designs and images directly into the chat.
• Enter your ideas and instructions in the prompt box.

The preview is updated each time you send another prompt and changes are made by the AI.

If you encounter any issues while updating, see our recommendations for troubleshooting in Figma Make.

Edit tool

The edit tool lets you point to elements in your functional prototype or web app. Depending on the type of element and the way it was generated, you can modify different properties, such as colors, padding, margins, text styling, and more. You can also prompt the model to make changes directly to that element.

To use the edit tool:

1. At the top of the preview, click Edit.
2. Click the element that you want to modify.
3. Make changes using the toolbar.
4. Optionally, click and prompt the model to make changes to the element you selected.

The exact set of properties you can edit depends on the type of element you’ve selected. Some elements may have a mix of the properties described below.

Edit images

When you edit an image, you can:

• Upload a new image to replace the existing one
• Change the border radius
• Change the spacing around the image (the margins and padding)
• Go to the source code

Edit text

When you edit an element that contains text, such as a paragraph or heading, you can:

• Switch between open source Google fonts
• Change the text color
• Adjust the size of the text
• Make the text bold
• Italicize the text
• Underline the text
• Adjust the alignment of the text
• Change the spacing around the text (the margins and padding)
• Go to the source code

Edit containers

When you edit a container element, such as a div or section, you can:

• Change the background color
• Change the border radius
• Change the spacing of the container (the margins and padding)
• Go to the source code

Prompt to edit

When you select an element with the edit tool, you can prompt the model to make changes directly to that element. If an element doesn’t have any editable properties, then the prompt box appears in the toolbar by default. Otherwise, click to display the prompt box.

Version history

As you converse in the AI chat, a checkpoint for each version of your functional prototype or web app is created. You can scroll through the AI chat and restore previous versions of your functional prototype or web app. Use the version history if you want to work off of earlier versions of your functional prototype or web app, or if you run into issues during a step of the conversation.

To restore a previous version, click Restore this version.

When you restore a version, you don’t lose any steps of the conversation or versions that came after the one you restored. You can switch back to those versions at any time.

What’s next?

When Figma Make is finished generating the code of your functional prototype, web app, or interactive UI, you can:

• Share the preview with others
• Publish your functional prototype or web app

Best practices

To deliver high-quality visual and code output, Figma Make uses the Claude Sonnet 3.7 model with Extended Thinking created by Anthropic. Because Figma uses Claude, many of the same best practices that apply to Anthropic’s models also apply to Figma Make when using the chat composer.

General best practices

Here are several best practices that are helpful to follow when working with the chat composer in Figma Make:

• Be clear and direct. When you’re prompting in the AI chat, it’s best to be specific about the kind of end result that you’re looking for. When you’re specific about what you want, it gives the model fewer opportunities to make assumptions, and makes it less likely that the model will try to proactively add features you don’t intend.

  ✅ Prompt:

  Build a note-taking app. I want to be able to:

  1. Name a file.
  2. Add and edit text.
  3. Format the text, such as bold, italics, and strikethrough.
  4. Add links to text.
  5. Save the file in markdown format.

  ⛔ Prompt:

  Create an app I can take notes in.

• Use examples. When you prompt in the AI chat, you should provide examples of what you want the end result to be. The examples can be written, and Figma designs also be used to give more guidance. Images can be used to help the model get closer to what you want, but there are some limitations. The model isn’t capable of processing exact colors out of an image, for example.

  ✅ These methods can be used individually or together in a single prompt.

  Written

  Add a login screen. Include common elements for login screens. For example, you should include a username field labeled “Email”, and a link to create accounts labeled “Need an account? Sign up here”.

  Designs

  Use the attached design as an example of the shopping cart.

• Don’t provide sensitive information. While Figma Make is great for creating apps and interactive UI, you shouldn’t provide things like API keys, email and street addresses, personal data, ID numbers, and similarly sensitive data in the chat composer itself. Instead, if you want an app that can do something like make API requests for you, instruct the model to include a UI element that lets you input that data.

  ✅ Prompt:

  I want to send requests to a private API. Add an input box where I can paste the key.

  ⛔ Prompt:

  Use this key for the API requests: 11qYAYKxCrfVS_7TyWQHOg

Working with attachments

When you’re working with attaching images and designs to your prompt, here are some best practices to follow.

• In designs, use auto layout where possible. When you attach a design or component, the system is good at understanding the flow of content using auto layout.
• Focus on layout first and functionality after. Prompt the system towards the layout that you want, then use subsequent prompts to add functionality to that layout.
• Work in steps. Rather than trying to give the system a full, end-to-end description of the result that you want, start with a high level description of what you want. Then, as you work, continue to add more granular detail and functionality. When you’re attaching components and images of more complex designs, attach frame by frame, rather than all at once.
• Iterate on the result. For complex functional prototypes or web apps, it will likely take a few steps in the conversation to get to a result that satisfies all of the requirements you’re looking for. Don’t hesitate to tell the system where it’s gotten functionality wrong. When you do, give examples of what the preferred outcomes are.
• Common design elements and layouts yield the best one-shot results. For example, simple galleries and web apps that use a single primary frame work well, among similar design approaches. More complex or novel layouts may require additional prompting.
• Focus on desktop and full-screen friendly outcomes. We’re working to improve mobile output, but right now content that fits full-screen displays works best.

Single Attachments

When you’re working with individual attachments, here are some best practices to follow.

• Specify exact 1:1 build or reference as style. In your prompt, tell the system if you want an exact 1:1 build of the attached, or to use the attached as style inspiration/reference
• Add details for each section of the build. For the closest 1:1 build you can specify with more exactness what you want. Try doing this section by section in your design. You can also ask the model to help write a prompt that’s more detailed.

Multiple Attachments

When you’re working with multiple attachments, here are some best practices to follow.

• Build screen by screen. You can attach multiple designs or images, but for best 1:1 results try building by attaching only one or two designs at a time. Remember: the system will remember what you attached, so if it didn’t get it first time, remind it of what you attached and try again
• Style references in multiple screens. You can attach multiple designs or images to help build in the style you’d like, just remember to specify to the system you want the images used as inspiration, not 1:1 re-built

Resolving issues

When you’re trying to fix or work around issues you encounter, here are some best practices to follow.

• Try smaller designs. If you’re design isn’t being faithfully re-created, try with a smaller attachment for a more accurate build
• Try fewer images and less content-rich designs. If you are attaching designs that many images, svgs, or vector illustrations, sometimes the system can struggle. Try scaling back the fidelity or size of images, or use a less content-rich attachment.