Crafting Components with Figma Variables for Data Charts

The possibilities for using Figma’s variables are limitless, and designers are increasingly discovering ways to enhance the efficiency of their prototyping process while maintaining top-notch quality.

In this article, I will guide you through the process of leveraging variables and modes to craft dynamic bar charts.

Setting up the variables

To get started, create two sets of variables: one for strings and one for numbers. For this example, we’ll use ‘Chart Width’ to define the chart’s length and ‘Text’ to specify the text representing the associated number for a given chart width.

1. Begin by setting up the first mode, which represents 25% of the chart width, with the actual chart width set to 50px, and the text indicating ‘25%’.
2. Create three additional modes for 50%, 75%, and 100%, each with the appropriate widths and corresponding text.

Mapping the variables to a chart component

Next, either create a new chart component if you don’t have one, or use an existing one from your UI Kit.

1. Select the chart layer within the component and go to the ‘width’ property.
2. Click on the dropdown next to ‘width,’ and you’ll find the option to apply a variable. Choose ‘Chart Width’ and link it to the chart layer of the component.
3. Then, select the text layer that displays the percentage on the chart.
4. In the right panel, navigate to the text properties, where you’ll see a variable icon. Click on it and select the text variable to link it to the text layer.

Finally, select the parent component, access the layer panel, and link the variable to the entire component.

Dynamically changing chart widths

Once the variables are mapped to both the parent and child layers, you can easily switch between different modes using the layers panel on the right.