Skip to main content

Props and variables

When using code layers and instances of code components, you can implement customizable properties (equivalent to props in React), and apply variables as the values for those props.

When props are implemented, you can set the values of the props in the context of the Figma Sites interface, which is useful for making changes to your site without needing to edit the code or use the composer window.

When variables are applied to props, your code layers and components can also set the value of a variable itself. This is useful for sharing data and state between code layers and instances of components.

Props​

In React, props are the arguments that are passed to a component instance. A simple example is a component that renders animated text in the style of a typewriter. Props for that component could include the string of text that you want rendered, the speed of the animation, and the size of the text, among other possibilities.

You can enable editable fields in the Figma Sites interface for your props by implementing the defineProperties function in your layer or component. You can do this manually, or by prompting in the AI chat.

For example, defineProperties is used in this code to have editable fields to set button text, clicked state text, toggle the active state, set animation duration, and apply a border radius. Each of the properties defined below correspond to a prop in the React component (Button).

defineProperties(Button, {
  text: {
    label: "Button text",
    type: "string",
    defaultValue: "Click Me"
  },
  clickedText: {
    label: "Clicked state text",
    type: "string",
    defaultValue: "Clicked!"
  },
  primary: {
    label: "Active/Inactive state",
    type: "boolean",
    defaultValue: true
  },
  animationDuration: {
    label: "Animation duration",
    type: "number",
    control: "slider",
    min: 0.1,
    max: 1.0,
    step: 0.1,
    defaultValue: 0.3
  },
  borderRadius: {
    label: "Border radius",
    type: "number",
    defaultValue: 6
  }
})

In the context of the canvas in Figma Sites, as well as the Make view and the composer window (places where you chat with AI and edit your code), editable values for the props appear in different places in the interface.

Canvas​

On the canvas, props for your code layers and instances of components appear at the top of the right sidebar when you have a layer or instance selected.

The editable fields are at the top of the right sidebar of the Figma Sites interface.

Composer window​

In the composer window, properties appear in the lower-right corner. If the properties are defined but not visible, click Open console and properties in the upper-right corner.

In the composer window, the editable fields appear in the properties panel.

Make view​

In the Make view, properties appear in the lower-right corner. If the properties are defined but not visible, click Open console and properties in the upper-right corner.

In the Make view, the editable fields appear in the properties panel.

Variables​

In Figma, variables are used to store reusable values that can be applied to many kinds of layer properties. You can think of variables in Figma as similar to variables in React: variables have a name and a value. The value of a variable can be one of several types, such as a string, number, or even another variable, among others.

In the context of code layers and components, variables can be mapped to properties that are defined in the code of your layer or component. For code layers, the following types of Figma variables are supported:

  • String
  • Number
  • Boolean

Once you’ve applied variables to props, you can make it so your code layer or component is able to update the values of the applied variables using defineProperties.

Using variables with props​

To apply a variable to a prop, hover over a prop in Figma Sites, and then click Apply variable/property. You can select a variable that’s already defined in the Figma Sites file, from one of your libraries, or create a variable.

You can hover over props in the right sidebar or properties panel to view the Apply variable/property button.

The same variable can be applied to props in multiple code layers and components. This can be useful if you want to do something like maintain a specific state for your code layers or update a value across code layers at the same time.