How to Build Smart, Resizable Charts in Figma using Auto Layout
There are endless ways to make charts (and lots and lots of them), but after weeks of tinkering, this is the most dynamic and flexible way I’ve managed to engineer them in Figma.
Before you start, go download this free Figma file:
Here’s what we’re designing:
Here are other versions of this same component. No, really.
Don’t worry, they scale:
The Chart Module
I like to call this a chart module because it’s a single component made up of many individual components.
Here are those components:
- Y-Axis: These are the labels on the left (or right) side of the chart. They’re generally numeric integers, decimals, percents, or currency, but may represent time in certain types of charts.
- X-Axis: These are the labels along the bottom of the chart. They generally represent time, but may represent numeric values in certain types of charts.
- Grid Base: This is the underlying grid that helps the user read the chart. We can have a single grid component with many different variants to allow for different styles (solid lines, dashed lines, dotted lines, squares, etc).
Then on top of this base, we can swap our choice of visualization:
Or even:
The magic is in the resizing settings we apply to the various auto layout stacks and frames.
Let’s start building.
Building the Y-Axis Component
The y-axis is a vertical stack of text layers, assembled together using auto layout.
- Stack your text layers, highlight them all, then press Shift+A on your keyboard. This puts them into a vertical auto layout stack. If they’re going horizontally instead of vertically, just click the ↓ in the Auto Layout settings on the right to make a vertical stack.
- Select all of the text layers in the stack and make sure they’re 48px wide. I also like to right-align my text layers so there’s a nice clean edge on the right. This is up to you, though.
- Set your spacing to Space Between. This allows our y-axis to scale vertically when we resize our chart to be taller or shorter.
Make as many versions of this as you like. Here are some ideas:
Once you’re finished, make each one a component by selecting the auto layout group and pressing Command+Option+K (or right click and select Create Component).
After you’ve made each one a component, highlight all of them and choose Combine as Variants from the right hand side:
When you’re finished, it should look like this. Give each one a name on the right so that you know what each one is called later:
Pro Tip: Did you know that you can apply auto layout to your component variants? Just select the component container and press Shift+A to align everything into an auto layout stack. Now whenever you want to add a new variant, just press Command+D to duplicate a variant, change your values, and everything stays nice and aligned.
Building the X-Axis Component
The x-axis is a horizontal stack of text layers, assembled together using auto layout.
- Line up your text layers horizontally, highlight them all, then press Shift+A on your keyboard. This puts them into a horizontal auto layout stack. If they’re going vertically instead of horizontally, just click the → in the Auto Layout settings on the right to make a horizontal stack.
- Select all of the text layers in the stack and make sure they’re 40px wide (or any fixed value that is wide enough for all of your labels). Depending on the x-axis labels in each variant, you may want these left-aligned (for horizontal charts like bar charts) or center-aligned (for vertical charts like histograms and column charts)
- Set your spacing to Space Between. This allows our x-axis to scale horizontally when we resize our chart to be wider or skinner.
Just like we did with out y-axis component, we can create multiple versions with different labels, make each of them a component, then combine them as variants. Here are some I made:
Building the Grid Component
The grid component is a stack of lines or shapes used to form the visual axes of our chart.
- Create some lines with the Line tool, highlight them all, then press Shift+A on your keyboard. Choose the right direction depending on whether you’re making horizontal lines or vertical ones.
- Select all of the text layers in the stack and make sure they’re 48px wide. I also like to right-align my text layers so there’s a nice clean edge on the right. This is up to you, though.
- Set your spacing to Space Between. This allows our grid to scale vertically or horizontally when we resize our chart to be taller or shorter.
Assembling the Base
When you’re finished with the components above, you should be able to roughly align them like so:
Select the y-axis (the vertical one) and the grid lines, then press Shift+A to make an auto layout stack. Set the spacing to 16px horizontal:
Select the y-axis and set the horizontal resizing to Hug Contents and the vertical resizing to Fill Container:
Select the grid lines and set the horizontal resizing to Fill Container and the vertical resizing to Fill Container:
Name this auto layout stack Top:
Now select Top and the x-axis and press Shift+A to create another auto layout stack. This will stack the top section we just created with the x-axis below it. Set your distance to 16px vertically, and your alignment to the right.
But what if your chart doesn’t have a blank space on the bottom left like mine does above? Here’s how to fix that:
If you use the same sizing as I do, you can apply 64px of padding to only the left side. This will create a gap like you see in the image above.
Creating the Visualizations
Oddly enough, this is kind of the easy part. We just need to draw a chart. Since you already downloaded the sample file, you won’t have to do this:
These can be any size and shape because we’re going to resize them later:
The Magic Part
Now comes the tricky (albeit magic) part.
- Select the Grid layer from the Top auto layout stack.
- Press Command+Option+G to make a frame around the grid component.
3. Select the new frame layer (I named mine “Grid”) and set the horizontal resizing to Left and right and the vertical resizing to Scale.
4. Now select the actual Grid component layer we created earlier and set the horizontal resizing to Left and right and the vertical resizing to Scale.
5. Finally, add an instance of your chart component into the “Grid” frame and set the horizontal resizing to Left and right and the vertical resizing to Top and bottom.
Since our chart is pinned on each edge, when we swap it with another chart, it will always be edge to edge. This allows us to create multiple visualization variants and easily change them out to change the display of the chart:
Summary
Charts are tricky components to design because there’s really no wrong way to do them. But there is a way to make them more dynamic and scalable.
Don’t forget to download the sample Figma file below:
Or grab the entire chart library here:
When I’m not writing about design, I’m principal of product design at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.
Some other stuff:
