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

• Use the edit tool to point to specific parts of the preview in Make and make adjustments with a Figma Design-style properties panel
• 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
• 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 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. In the upper-right corner of Figma Make, click Edit.
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.

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. In the upper-right corner of Figma Make, click Annotate for agent.
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 Send to agent. 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.

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.