Share data between layers

Commonly, you may want your code layers and components to be able to communicate information to each other, such as sharing a state or triggering an action based on an event in another layer.

There are a couple ways you can share data across code layers and components in Figma Sites:

Use props and variables
Use a third-party library

Note: In both cases, you'll only be able to see the effect of sharing data when you preview the whole site (not in the code layer or component preview) or publish your site.

Use props and variables

When you’re working with code layers and components, you can define custom properties that corresponds to props in your React components. At least one of the property definitions should include a setter. Then, you can apply variables to those custom properties. When you have multiple code layers or components that need access to the same value, you apply the same variable (for example, a boolean variable named darkMode) to each layer or component.

To use variables across code layers, first you define the properties that represent the data you want to share. The following example is a button that controls whether your site is in dark mode or light mode.

import { defineProperties } from "figma:react";

export default function ExampleDarkModeButton({ mode, setMode }) {
  const toggleValue = () => setMode(!mode); // true = dark, false = light

  return (
    <div className="flex flex-col items-center space-y-4">
      <button
        type="button"
        onClick={toggleValue}
        className="w-16 h-16 bg-transparent border-2 border-black text-black rounded-full flex items-center justify-center text-sm text-center hover:shadow-inner transition-shadow"
      >
        {mode ? 'Dark' : 'Light'}
      </button>
    </div>
  );
}

defineProperties(ExampleDarkModeButton, {
  mode: {
    type: "boolean",
    defaultValue: false,
    setter: "setMode",
  },
});

Then, in your layers where you want to read the data in the variable, you define the same props. The following example excludes setter, but you can include it if you want more than one layer to be able to set the value of a variable.

import { defineProperties } from "figma:react";

export default function Layer({ mode, setMode }) {
  const toggleValue = () => setMode(!mode);
  const isDarkMode = mode; // true  = dark,  false = light

  return (
    <div className="w-full h-full">
      <div
        onClick={toggleValue}
        className={`w-full h-full ${isDarkMode ? 'bg-gray-800 text-white border-white' : 'bg-white text-black border-black'} border-2 cursor-pointer flex items-center justify-center text-sm text-center hover:shadow-inner transition-shadow`}
      >
        {isDarkMode ? 'Dark' : 'Light'}
      </div>
    </div>
  );
}

defineProperties(Layer, {
  mode: {
    type: "boolean",
    defaultValue: false,
  },
});

Finally, you apply the same variable to the properties in the layers that you want to share data. In the previous examples, you'd apply the same boolean variable.

To apply a variable to a property:

On the canvas of the Figma Sites interface, select the code layer you want to apply variables to.
At the top of the right sidebar, hover over a property. The Apply variable/property button appears.
Click the Apply variable/property button and select the variable that you want to apply to the property. You can also click + to create a new variable and apply it to the property.

For example, for the dark mode/light mode button, you could create a boolean variable called mode and apply it to the mode property. Then, you'd apply the same mode variable to the other layers that you want to react to whether your site is in dark mode or light mode.

Use a third-party library

To share state between layers, you can use a third-party library like Jotai. If you're using this method, it's important you're aware of the code layer or component name in the Figma Sites interface. When you use an import statement, you'll need to reference the name of the layer or component that has the value you want to import.

For example, suppose you have a button that you want to toggle between dark and light mode in your site. In the Figma Sites interface, the following code layer is named DarkModeLayer. In this example, you use Jotai to share the data between your layers.

// DarkModeLayer
import React from 'react';
import { atom, useAtom } from 'jotai';

// Define and export the atom
export const darkModeAtom = atom(false);

export default function DarkModeLayer() {
  const [mode, setMode] = useAtom(darkModeAtom);

  const toggleValue = () => setMode(!mode);

  return (
    <div className="flex flex-col items-center space-y-4">
      <button
        type="button"
        onClick={toggleValue}
        className="w-16 h-16 bg-transparent border-2 border-black text-black rounded-full flex items-center justify-center text-sm text-center hover:shadow-inner transition-shadow"
      >
        {mode ? 'Dark' : 'Light'}
      </button>
    </div>
  );
}

Then, in subsequent layers where you want to reference the state of DarkModeLayer, you import the atom and react to the value.

import React from 'react';
import { useAtom } from 'jotai';
import { darkModeAtom } from './DarkModeLayer'; // Import the atom

export default function Layer() {
  const [mode, setMode] = useAtom(darkModeAtom);

  const toggleValue = () => setMode(!mode);
  const isDarkMode = mode;

  return (
    <div className="w-full h-full">
      <div
        onClick={toggleValue}
        className={`w-full h-full ${isDarkMode ? 'bg-gray-800 text-white border-white' : 'bg-white text-black border-black'} border-2 cursor-pointer flex items-center justify-center text-sm text-center hover:shadow-inner transition-shadow`}
      >
        {isDarkMode ? 'Dark' : 'Light'}
      </div>
    </div>
  );
}

Use props and variables​

Use a third-party library​

Use props and variables

Use a third-party library