Create and edit a functional prototype or web app (original) (raw)

Before you start

Who can use this feature

Figma Make is available for Full seats on paid plans.

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.

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

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. In the file browser, navigate to your drafts. Then, in the upper-right corner, click Make.
2. In the AI chat, tell the model what you’d like to build by typing in the text field or pressing to dictate your prompt. You can do one or more of the following to guide the AI:
   • Attach Figma designs.
   • Bring style context from one of your Figma Design libraries. (Paid plans only)
   • Add a backend to securely store and manage data and secrets.
   • Paste frames from Figma designs and images directly into the chat.
   • Get context from external tools using MCP connectors.
   • Enter your ideas and instructions in the prompt box or press to dictate your prompt.
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 the Point and edit tool to point to specific parts of your functional prototype or web app that you want Figma Make to focus on.
• Edit the code directly.
• Use the version history to edit earlier versions of your functional prototype or web app
• Attach Figma designs.
• Bring style context from one of your Figma Design libraries. (Paid plans only)
• Add a backend to securely store and manage data and secrets.
• 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.

Tip: Use the navigation bar at the top of the screen to jump to a specific page in your app and start editing.

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

Point and edit tool

The Point and 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 Point and edit tool:

1. At the bottom of the prompt box, click Point and edit.
2. In the preview, 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
• Delete the selected image

Edit text

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

• Edit the text by double-clicking it
• 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
• Delete the selected text element

Note: Custom fonts aren't supported in Figma Make.

Note: Only hardcoded text can be edited using the point and edit tool. Text rendered from data—like object properties—can’t be edited directly.

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
• Delete the selected container

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.

A note about deleting objects using the point and edit tool

When you delete a hardcoded object using the point-and-edit tool—such as a static text paragraph or a manually placed image—only that individual object is removed.

Some objects selected with the point-and-edit tool—such as text, images, or containers—are rendered by a component using data and aren’t hardcoded elements. For example, a set of button labels generated from a component property or an image gallery rendered from a data source.

When you delete one of these component-backed objects, all instances of that object rendered by the same component are removed.

Interact with the file's version history

Figma automatically creates a new version when either you or Figma AI edits the file. Each version has a number and auto-generated name.

Click More options next to any version to:

• Preview version: Interact with that version of the file. Previewing doesn't create a new version and doesn't affect your current work.
• Favorite: Pin the version to the top of the version history list, which you can access by clicking the current version number at the top of the screen.
• Name this version: Give the version a custom name to make it easier to find later.
• Restore this version: Return your file to a previous version. Restoring a version doesn't delete any work—all versions, including those that came after the one you restored, remain available and you can switch between them at any time.

Tip: You can also click the current version number at the top of the screen to see—and take action on—each version in your file.

What’s next?

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

• Copy a Figma Make preview as design layers
• Create and update a template in Figma Make
• Share the preview with others
• Publish a functional prototype or web app to the Figma Community
• Publish your functional prototype or web app

Best practices

Here are best practices for working with Figma Make, including optimizing your usage and writing great prompts, as well as best practices for working with attachments and resolving issues.

Optimizing usage

Here are best practices for getting the most out of your Figma Make usage.

• Use the right model for the task. Figma Make's Auto model selection will generally choose an appropriate model, but you can also select manually. For example, Opus works best for complex or first-time prompts. Gemini Fast is better suited to small, targeted changes like minor styling adjustments or high-volume MCP requests.
• Save and reuse your work with templates. Once you've built a hero screen or major flow, save it as an Org or Team template so teammates don't have to recreate it from scratch.
• Duplicate files instead of starting over. When you want to build on an existing Make file or explore a variation of it, duplicate the file rather than starting a new one.
• Choose one source for design context. npm packages provide component-level design context, while Figma libraries provide styling information. You only need one, not both. Use your guidelines file to instruct Make on how to use whichever source you choose.
• Keep your guidelines file focused. Rather than using a single large guidelines file, break it into smaller, task-specific sections and use a parent file to point Make to the right section for a given task. Remove any information that's already covered by your npm package, Figma library, or other context sources. See:
  • Add guidelines to Figma Make
  • Guidelines for library styles
  • Guidelines for design system (npm) packages
• Be specific when using MCP connectors. Pointing Make at broad connector endpoints without specifying tools or deep links can bloat the context window. Reference the specific connector tools and areas you need, or paste the exact content directly into the chat if that's more efficient.

Prompting

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. Attach Figma frames rather than images when you can. Frames contain structured design data, so the model doesn’t have to interpret visual information the way it does with a screenshot. Images work for general direction, but the model can’t reliably extract specific values like exact colors from them.
  ✅ 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.
• Structure your prompts with task, context, and constraints. When building a new app or feature, tell the model what you’re building and who it’s for before describing the details. Including constraints upfront, such as platform requirements or accessibility needs, helps avoid unwanted assumptions later.
• Use the Point and edit tool to focus your follow-up prompts. Before writing a revision prompt, use the Point and edit tool to select the exact element you want to change. This reduces unnecessary regeneration and keeps the model focused on the right part of your app.
• Don’t repeat context you’ve already provided. If you’ve attached a Make kit, added a guidelines file, or connected an MCP connector, you don’t need to restate that information in your prompt. The model already has access to it.
• 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 about the kind of secure or sensitive features you want to build. Figma Make will help you add a backend to handle 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 have 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.