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, at the top of your Figma Make file, click Code.

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. You can also format the changes you make or paste into the editor.
• 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. You can’t create your own files in the file explorer, but you can 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. App.tsx, the main file for your functional prototype or web app, is selected in the file explorer by default.

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

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 click Format code in the upper-right corner of the code editor. 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, in the upper-right corner of the code editor, click Download code.

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.

You can’t create or delete files in the file explorer. If you want to add new files to the file explorer, prompt Figma Make in the AI chat. For example, "Add a Toolbar.tsx file with some template code."