Working with React

React is a common JavaScript framework used when working with code in Figma’s products. React is used for:

Web apps and functional prototypes you create in Figma Make
Code layers and components in Figma Sites

This page covers the parts of React that you’ll need to know to use Figma Make and Figma Sites. For a more comprehensive overview, we recommend these great resources:

React.dev, the official documentation for React, provides a comprehensive set of learning resources
MDN’s web docs include a collection of resources to get started with React
Codecademy has a free, interactive course for learning the React framework

Components, props, and JSX

When working with React in the context of the code editor in Figma Make and Figma Sites, the most important concepts you'll need to understand are:

Components and instances
Props
JSX
Import and export

A component in React is an individual collection of code that defines a UI element and its functionality. Components are created using functions or classes. In Figma Sites, for example, code components consist of one or more React components that are rendered on your site.

// Example of a component named Button
function Button() {
  const [clicked, setClicked] = useState(false);

  return (
    <button onClick={() => setClicked(!clicked)}>
      {clicked ? 'Clicked!' : 'Click Me'}
    </button>
  );
}

When a component is used in a UI, it creates an instance of that component. Each instance maintains its own state and props while following the architecture defined by the component. Multiple instances of the same component can exist simultaneously on a page, each functioning independently with its own unique data and behavior. For example, a Button component might have several instances throughout an interface, each with different text, colors, or click handlers, while sharing the same underlying structure and functionality.

// Example of an app with an instance of Button
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <Button />
    </div>
  );
}

Props are the arguments that are passed to a component instance. A simple example is a component that renders a button. Props for that component could include the string of text for the button label and the background color of the button. These props allow each instance of the component to be customized.

// Example of a Button that has "text", "backgroundColor" props
function Button({ text = "Click me", backgroundColor = "#3b82f6" }) {
  const [clicked, setClicked] = useState(false);

  return (
    <button
      onClick={() => setClicked(!clicked)}
      style={{ backgroundColor }}
    >
      {clicked ? 'Clicked!' : text}
    </button>
  );
}

JSX is the markup syntax you use to define the structure of elements in your components. It resembles a stricter version of HTML but allows you to integrate JavaScript expressions within curly braces . When creating component instances, you use JSX to render them, passing props as attributes. For example, <Button text="Click Me" backgroundColor="#3b82f6" /> creates an instance of the Button component with “Click Me” as the label and a light blue background.

// Example of the JSX used to create an instance of Button
// and a string of text for the 'text' prop
<div>
  <h1>Welcome to my app</h1>
  <Button text="Click Me" backgroundColor="#3b82f6" />
</div>

Import and export statements allow you to share components between files. You can create a component in one file and export it using export default or export, then import it in another file using import. This modular approach helps organize your code into manageable pieces. For example, you might create a Button component in a file called Button.jsx, export it, and then import it into your main App.jsx file to use it.

// Example import statements
import * as React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Button from './components/Button';

You can think of the concepts this way:

A component is a discrete piece of UI, including how it works and the way it's structured
An instance is a specific usage of a component in your UI, with its own unique props and state
Props help you define what you want the UI to contain and look like each time you reuse the component
JSX is the markup syntax that combines HTML-like structure with JavaScript to define components and render their instances
Import and export allow you to organize components across multiple files and reuse them throughout your application

To learn more, see the official React documentation about components, props, JSX, and importing and exporting. For implementing props in Figma Sites, see How to write great prompts and defineProperties.

Examples

Here are some examples of how to use React in the context of Figma.

Figma Make

In Figma Make, React code is most commonly written in the App.tsx file, which Figma Make uses to render the whole of your web app or functional prototype. When chatting with the model, it may also create or reference additional files, such as individual components, which get imported and used in App.tsx.

In this example, App.tsx contains the following:

export default function App() {
  return (
    <>
      <MyButton text="Click me" />
      <MyButton text="Save" color="green" />
      <MyButton text="Delete" color="red" />
    </>
  );
}

function MyButton({ text, color = "blue" }) {
  return (
    <button className={`text-white bg-${color}-500`}>
      {text}
    </button>
  );
}

In the React code of this example:

A component called MyButton is created that has two props: text and color, which defaults to blue.
The structure of the button is defined using JSX in the return statement, which creates a button element. The button has two classes for styling, one that sets the text color, and the other that sets the background color. The second class, bg-${color}-500, is where the color prop is used. The label of the button is set with the text prop.
The main App component renders three instances of MyButton, each with a different set of values for the props.

Figma Sites

In Figma Sites, React code can be written in code components or code layers. The editor experience is the same in both cases. For information about the functional differences, see Code Layers, Components, and Instances.

import { useState, useEffect } from "react";

export default function Typewriter({
  text = "Typewriter animation",
  speed = 100,
}) {
  const [displayedText, setDisplayedText] = useState("");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    setDisplayedText("");
    setIndex(0);
  }, [text]);

  useEffect(() => {
    if (index < text.length) {
      const timer = setTimeout(() => {
        setDisplayedText(
          (current) => current + text.charAt(index),
        );
        setIndex((current) => current + 1);
      }, speed);
      return () => clearTimeout(timer);
    }
  }, [index, text, speed]);

  return (
    <span className="font-mono">
      {displayedText}
      <span className="animate-pulse">|</span>
    </span>
  );
}

In the React code of this example:

A component called Typewriter is created that has two props: text and speed.
The component imports React hooks (useState and useEffect) to manage state and side effects.
Two state variables are created: displayedText (the text shown on screen) and index (tracking which character to add next).
The first useEffect hook resets the animation whenever the text prop changes.
The second useEffect hook creates the typewriter animation by adding one character at a time based on the speed prop.
The component returns JSX that renders the current text with a blinking cursor animation.
The component is exported as the default export, making it available for import in other files.

Figma Sites provides some additional, Sites-specific functions that can be imported and used in your code components and layers:

defineProperties allows your component to define customizable properties that control its behavior and appearance. These properties appear in the Figma properties panel, so instances of a component can be adjusted on the canvas, no code editing needed.
useActiveBreakpoint helps you build components that work well in responsive sets. You can different functionality and layouts for your component based on the current size of the viewport.

For more information, check out the reference documentation for defineProperties and useActiveBreakpoint.

Components, props, and JSX​

Examples​

Figma Make​

Figma Sites​

Components, props, and JSX

Examples

Figma Make

Figma Sites