Edit the code of a functional prototype or web app

When you want to edit the code of your functional prototype or web app directly, Figma Make provides a lightweight editor in the context of your file.

To access the code editor, open the Files tab in the workspace. If the tab is closed, click Add tab and select Files.

Figma Make provides several features for working with code:

• A code editor, where you can make changes to the code generated by Figma Make, or write or bring your own code.
• A way to download your code, including all of the files in the file explorer for your functional prototype or web app.
• A file explorer that you use to move through the files created by Figma Make. The File actions menu includes options to create a file or folder and upload a file. You can also instruct Figma Make to create files for you.
• A place to add guidelines that Figma Make will follow when generating code for your functional prototype or web app. To learn more, see Add guidelines to Figma Make.

Edit code

In the code editor, you can make changes directly to files that exist in the file explorer. Select the file you want to edit in the file explorer.

You can edit the existing code, write your own code, or paste code directly into the editor.

Review changes to code

To inspect the code changed by an agent response, click Review on that response. The Review tab opens with Last turn selected and lists the changed files. Select a file to inspect its additions and deletions.

Revert changes to code

As you make changes to the code, Figma Make creates checkpoints for those changes. You can revert your code changes to return to the file version from the latest step of the conversation.

To revert your changes to a file, in the AI chat, click next to the file you want to revert.

Format your code

To format the code, press CMD + S (Mac) or CTRL + S (Windows), or right-click on a selection and click Format code. When you format, Figma Make prettifies the code, such as fixing lineation and indentation.

Download your code

To download a .zip file that contains all of the files in your Figma Make file, open File actions in the Files tab, then choose Download code. Viewing and downloading code is available to people with a Full or Dev seat.

Explore files

In the file explorer on the left side of the code editor, you can click to expand folders and select files. When you select a file, the content of the file appears in the code editor.

To add a file or folder, open File actions and choose Create file or Create folder. You can also prompt Figma Make in the AI chat to add files. For example, "Add a Toolbar.tsx file with some template code."