How to automatically create Charts in Figma from CSV file data using Pitchdeck

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to automatically make charts in Figma from CSV files using the Pitchdeck Figma plugin. To get started, all we need to do is go to our Figma file, click on the little “Resources” icon up here. If you search for Pitchdeck and click on the “Plugins” tab, then on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button here. Alternatively, I’d recommend clicking on this little save icon here, which will let you run the Figma plugin from your Figma plugins list.

I’ve already clicked on the save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins,” then go down to “Saved plugins,” and click on Pitchdeck. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, it allows you to take any top-level frames on your Figma page and automatically load those into the Figma plugin to create presentations as slides. Today, I’m not going to be going through all of the features of the Figma plugin. If you’re interested in all of the other features that I’m not going to be covering, you can check out the Pitchdeck playlist on the YouTube channel. Today, I’m just going to be focusing on how to add charts from your CSV files.

To get started, all we need to do is go down to our little button down here that says “Add Slides/Charts.” If you click on that button, that’s going to bring up this window here. By default, it’s going to default to the slide layouts panel. We just need to go over and click on the chart Builder tab. If you click on chart Builder up there, you’ll get presented with this view here.

You can see that there are basically three steps to automatically making a chart in Figma. First, select the chart type you want. We’ve got a few different options here. The default is bar chart; the other one is a column chart. We’ve also got a line chart, an area chart, a combo chart (which lets you do multiple line charts in one), a donut chart, a pie chart, a scatter chart, and a stepped area chart.

So depending on what kind of data you want to present, you can select whichever one of these suits you best. Once you’ve selected your chart type (for the moment, I’m just going to leave it as the default bar chart), then step two is we need to add some chart data. The way we do this is by loading in a CSV file with your own data. For an example of what the CSV file should look like, all of these different charts come included with a sample data CSV file. Whenever you change the chart type, you’ll see that the link here changes as well. If you want a really easy way of knowing how to structure your data, just go ahead and click on that little link.

So if we click on that link now, we can then save that to our desktop. I’m just going to click on Save, and we can see if we open up this file. I’m just going to open that up now in Excel, open up the sample file we just saved, zoom in a little bit so you can see it, and here we go. It basically allows you to quickly download a sample CSV file containing the data structure for the different types of charts.

For example, we can see here we’ve got the header (values or labels), and then in each column, we’ve got our side labels and the values for each of those labels. These correlate to the items in here, so you can see that we’ve got a value label and then all of the side labels and the numbers that we’ve got added in here. What we want to do is instead of using this sample data, we want to update this to our own data.

I’ve prepared one earlier, so I’m just going to open that up here so you can see that one as well. You can see here I’m using the exact same format, and I’ve just changed the labels and some of the labels down here and the values here to reflect some stats for some of these Figma plugins and how many likes they’ve received. All I’ve done is just taken that sample data, updated it, and then re-saved that CSV file.

Now that I’ve got that saved, I’m just going to drag and drop that file into my Figma plugin in this little Drop Zone area here. I’ve just dragged that from my desktop; I’m going to let go in the drop zone area, and it will instantly load in all of that data from the CSV file. You can see here that the chart has changed; it’s updated the chart with all of the labels. It’s got the likes label that we added to the header, all of the values are down here, and you can see that the different chart bars have different values and lengths as well.

We can get an overview of what that looks like here, and we are actually able to customize these if you want to make small tweaks in the Figma plugin. For example, we can edit this to be larger or smaller, and that will reflect in the preview over here. You can also change things like the label; if we want to change this to something else, you can add that there, and you’ll see it reflect over here in the preview.

But for today, I’m just going to leave that as likes. Once you’re happy with the data, you’ve imported your CSV data, all you need to do is go to the third step, which is to add the chart slide to Figma. Go ahead and click on the add chart slide to Figma button, and that will instantly render your chart that we just designed in the Figma plugin in your Figma file.

You can see here if I drill down into these layers, this is all vector data. For example, we could actually edit this in Figma; we can arrange that line to be smaller or longer, we can edit these text layers (these are all real text layers in Figma), so we can change that to be whatever we want. And of course, the values are also editable as well. If you want to edit that manually in Figma, you can definitely do that.

You can also obviously change things like colors. If you wanted to change the colors, you could just click on that layer, go to your selection colors down here, and you can just change that instantly to any other color that you want. That’s a really quick way of styling the graph once you’ve already added the chart into your Figma page. Of course, you can also do things like change the font sizes and things like that as well. These are just regular Figma text layers; you can bump those up to be really whatever you want, and those will automatically get changed.

It also adds a title onto your slide as well. We could call this Figma like stats, and that would update that there. You can, of course, get rid of that as well if you don’t want a title; you can just hide that or delete the layer. And you can obviously move this around or scale it, really do whatever you want with it. So that’s what that looks like there, and of course, you can apply this to any other chart type as well.

If we wanted to add a donut chart, you could just drag and drop your CSV file back into the Figma plugin, and that would automatically populate the donut chart as well. So we can again add slide to Figma, and that will add our donut chart as well. Again, these are all totally editable. If you wanted to change any of these colors, you can easily do that just by changing the colors in your Figma selection, and you can really just customize the look and feel to suit your own brand or your own presentation design. So that’s what that looks like there.

That’s a really quick overview of how you can use this chart Builder feature inside of the Pitchdeck Figma plugin to easily spin up charts in Figma. You can make these totally custom; the data is again all based on whatever you load into it from your CSV file. Just download the sample file, customize the CSV data using Excel or Google Sheets or even a code editor if you wanted to; it’s just a plain text CSV file. You’ll be able to generate these charts really quickly based on whatever chart type you prefer.

I hope that’s helpful for making different types of charts in Figma automatically from your CSV data. Feel free to give it a go for yourself or with your team, and hopefully, it improves your workflow and speed of creating interesting graphs and charts in your Figma presentations. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.