Skip to main content

Introduction

Welcome to Code in Figma!

In products like Figma Sites and Figma Make, we provide an interactive code editor and preview that can be used for building React-based apps (Figma Make) and code components and layers (Figma Sites). The code editor is similar in both products and includes:

  • A chat interface where you can converse with an AI model to generate code
  • A simple code editor where you can view and modify the code generated by the conversation. You can also make changes to the code, or bring your own.

There are some differences between the code generated by Figma Make and Figma Sites:

  • Figma Make manages code using Typecript files (.tsx) to construct a React app. By default, Figma Make files have an App.tsx file, and support multiple .tsx files. However, while the .tsx files can be modified in the editor, they cannot be created manually. You can add more files by asking for them to be created in the AI chat.
  • Figma Sites manages code using code layers and components as individual .tsx files. Code layers are individual objects that exist on the canvas in Figma Sites. Code components are reusable React components that can be added as instances to your pages. You can have multiple code layers and component instances per site, and the code layers and instances can be used on one or more pages of your site. Additionally, you can define multiple React components within one code component or layer.

When working with the AI chat, there are some best practices you can follow for both Figma Make and Figma Sites. In fact, the AI chat in Figma Sites is a focused version of Figma Make with some added functionality specific to Figma Sites.

The Code in Figma documentation provides guidance and reference information to get you developing in Figma Make and Figma Sites. To get started, check out: