Edit a Figma Make file

After you create your Figma Make file, there are a number of ways you can continue to iterate on your interactive app.

You can:

• 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 functional prototype or web app

Additionally, you can:

• Edit the code directly
• 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

  Note: Supabase backend integrations aren’t supported on the Government plan. Learn more about Figma Make for Government.

• Paste frames from Figma designs, images, and other files directly into the chat

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

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.

Edit tool and properties panel

The edit tool opens a Figma Design-style properties panel in Make and lets you point to elements in your functional prototype or web app. When you select an element, depending on the type of element and the way it was generated, you can modify properties such as colors, padding, margins, text styling, and more.

To use the Edit tool and properties panel:

1. Open the Browser tab, click Edit, then choose Select in the toolbelt.
2. In the preview, click the element that you want to modify. Drag your cursor or hold Shift while clicking to select multiple elements.
3. Make changes using the properties panel. As you make adjustments, the changes appear above the prompt box in the agent chat.
4. In the chat, click Apply. The agent applies the changes you made to your Make file.

Draw to edit

Draw directly on the preview to direct the agent to specific areas of your interactive app. When you add to your prompt, the drawings you make are captured as images and included in your prompt.

To use the Draw tool:

1. Open the Browser tab, click Edit, then choose Draw in the toolbelt.
2. In the preview, mark up the UI of your interactive app by drawing directly on it.
3. When you're finished, click Add note.
4. Enter instructions for the drawing, then click Add annotation. The drawing and instructions are added to the pending changes above the prompt box.
5. In the chat, click Apply. The agent uses the drawing and instructions to update your Make file.

Annotate your Make preview

Drop annotations directly on the rendered UI to describe what you want changed. Stack several annotations across the screen and submit them together as a single prompt.

When you annotate elements in the preview of your functional element or web app, you can give the agent specific guidance about what changes you want made. Then, you instruct the agent to apply the changes. The agent works through your annotations and makes the appropriate changes.

To add annotations:

1. Open the Browser tab, click Edit, then choose Annotate for agent in the toolbelt.
2. In the preview of your functional prototype or web app, click where you want to make a change.
3. Enter the changes you want to make. You can also attach an image to give more guidance.
4. In the annotation, click Add annotation. Repeat these steps to add additional annotations. As you add annotations, the changes appear above the prompt box in the agent chat.
5. In that chat, click Apply. The agent applies the changes you made to your Make file.

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.

At the top of the chat panel, click Version history to open the version list.

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.
• 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.