Sync chart data to Figma from a spreadsheet using CopyDoc

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to automatically import charts into your Figma files using your own spreadsheet data with the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little “Resources” icon at the top here, and then if you search for “CopyDoc” and under the “Plugins” tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this little “Save” icon here, and that’ll 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,” and then go down to “Saved plugins” and click on the CopyDoc item, and that’s just going to run the Figma plugin we saved a second ago. If you’re new to the Figma plugin, it’s got a bunch of different features in it, but today I’m just going to be focusing on this sync content feature which is what’s going to help us import our chart data from a spreadsheet into our Figma design.

To get started, just go ahead and click on the sync content button down here, and that’s going to bring up this little window here. What you want to do first is change the default “Content” tab and go over here to the “Chart” tab and just click on chart. Once you click on chart, you’ll see that tab gets selected, and then we’ve got the option of selecting what kind of chart we want to import into our Figma file. So, by default, it’s just a bar chart, but you can do a column chart, you can do an area chart, you can do donut charts, py graphs, all those sorts of things. So, I’m just going to keep it simple for the time being.

What you can do is select the chart that you want. So, in this case, just a bar chart, and then you can download a sample file with sample data for that chart. So, depending on what chart you’ve got selected, this will change. So, for example, if we click on bar chart and then click on that link, that’s going to let us download a sample CSV file to our computer that we can then open up and edit with our own data.

You can see here I’ve got the bar chart sample data CSV. And if we open that up, it’s a very simple CSV. You’ve got a header with the category and value which you can obviously rename, and then you’ve got the values for each of those columns next to each other. So, I’ve already edited a bar chart over here. So, if we go to our Excel file, you can see here I’ve got a bar chart that I’ve updated, and I’ve called it company and employees. So, the header is companies and employees, so these are going to be the labels for those sets of data. And then every other row underneath each of those columns is what we’re going to be using for the data to get imported.

Now that we’ve got this set up, we’ve got our CSV file saved with this updated data, we can go back to our Figma plugin, and we can drag and drop that CSV file that we updated a second ago with the employee data into the Figma plugin. So, you can drag and drop that CSV file into this Drop Zone here with the bar chart option selected. And then once you let that go, you’ll see a little preview load up in the Figma plugin. So, it’s going to be a bit hard to see it at full scale in the Figma plugin because the window’s quite small, but it just gives you an overall sense of what kind of data is going to be loaded in here.

Once you’re happy with your preview, just go ahead and click on the insert chart to Figma button. And once you click that, it’s going to instantly insert a chart based on the data that we just loaded in from our CSV file. So, you can see here that we’ve got an editable chart. These are all layers that we can open and interact with. You can see if I click on this rectangle vector layer, I can actually change the width and size of that. You can, of course, change things like colors. So, if we go to our Color Picker over here, we can change the color of that graph. We can do things like change the font sizes. So, if you wanted to call out this particular company, so if we wanted to change the Amazon font to bold, you can do that. You can increase the size of that and position it however you like.

You can change that around there. And yeah, this is basically an editable graph that we’ve imported from our CSV data. Let’s try another one. So, if you click on the go-back button, the other one that we saved was this stock price one. So, if I open up that, you can see I’ve got a similar looking graph. So, I basically used the column chart sample. So, I downloaded the column chart sample data to the computer, and you can see what that looks like here. It’s just got the category, another heading, the values, so value one and value two. So, this is going to let us have two sets of values per category. And you can see that I’ve edited that in my Excel file. So, instead of those default values from the column data, you can see here I’ve updated it. Instead of category, it’s company. So, I’ve got a list of companies, and then I’m comparing two sets of values.

This is going to add these two sets of values as a column chart. So, I’ll show you what that looks like when we import it. So, all you need to do is go back to your Figma file, click on the little chart tab, click on the column chart just to select the kind of chart that you want to create. And again, we’ve got that updated stock price data in a column chart format that we downloaded before and edited. So, I’m just going to drag and drop that into the Figma plugin with the chart tab selected and drop that in. And again, you can see we’ve got a nice little preview here of roughly what’s going to be imported. So, you can see the company names at the bottom. We’ve got the stock price Legend up here. So, that’s the color-coded legend and the different sets of data.

I’m going to again click on the insert chart to Figma button, and again, that’s going to import this chart automatically into my page. So, I’m just going to move that up so we can see it a bit clearer. And if we zoom in again, you can see these are completely editable. We can jump in here and edit those. So, we can make these shorter or taller. And again, you can see all the data is being reflected based on the data that we had in our spreadsheet here. So, that’s looking really good.

And as I said, you can use many different types of charts. So, all you need to do is select the chart that you want. You can hover over it for a second if you want to see what kind of chart it is. You’ll get a little tooltip popup so you can do that if you’re unsure what kind of chart it is. You can see this one’s a donut chart. This one’s a combo chart. This one is an area chart. And again, just click on that, click on the download sample data CSV link, save that to your computer, edit it in whatever software you prefer, and then drag and drop that back in, and it’ll load it up.

The other thing I should mention is using CSVs and Excel files is just one option for data sources. If you want to load it from something like a Google sheet, you can just click on this little select box here and switch that out to Google Sheets. And that will let you paste in a Google Sheets URL. So, you can go in there and paste in your own Google sheet.

I’ve just opened up a blank Google sheet page in the browser. So, I’m just going to call this one data example, and I’m just going to hit enter on that. And what we can do is save some of this data or copy some of this data into our Google sheet. So, for example, if we were to open up this spreadsheet that we’ve got here, you can see that we’ve got the data that we can copy. So, I’m just going to highlight all of that data, bring it into my Google sheet here, and just paste that in. And we can edit this obviously as we like.

If we want to change Amazon to Nvidia or something like that, we’ll change another one just to make it clear what’s going on. So, we’ll make that one Tesla. And then we can now share this spreadsheet URL by clicking on the share link up here. And you’ll need to make sure that the general access setting is changed from restricted to anyone with the link. So, once it says anyone with the link, you can then copy that link by clicking the copy link button, going back to your Figma plugin, and making sure that you’ve got the sync from Google Sheets URL selected. And then you can paste in that URL that we just copied into here. So, paste that in. That’s going to load up the tabs in your spreadsheet. So, you can see it’s loaded up the name of the spreadsheet which is data example, and we’ve only got one tab in our spreadsheet, so we’re just going to keep that selected at sheet one.

And because we’re loading in a column chart in this case based on the original data that we edited, we can just go and click on the column chart tab up here. So, we’ve got that one selected. So, it knows which chart we want to import. And now that we’ve got the data example selected with our data for that chart, we can now go ahead and just click on the load chart preview button down here. And that’s going to load the data directly from Google Sheets, give you a nice little preview here. So, that is dynamic data. So, for example, if we were to change this value down here, so we’ll make this one much lower, we’ll just make it basically non-existent and save that. And that’s the stock price for the Nvidia one. So, you can see here it’s very high at the moment.

If we go back and then we refresh that data, we can then go ahead and click on the load chart preview button again. That’s going to get the data fresh. And you can see here that the Nvidia stock price has gone down from that massive line a second ago, as you can see here, down to this smaller line that we just edited.

Using a Google sheet is a very convenient way if you have data that changes a lot and you’re going to be reusing the data in your Figma designs, and you want to keep resyncing data using Google Sheets as an interesting example for doing that. Again, same process, just click on insert chart to Figma. That’s going to automatically insert the chart from the Figma plugin. And again, you can do with that whatever you like. You can change the colors, you can change the fonts, change the values even if you want to do that, and basically you can edit this as if you’ve created the layers yourself.

So, a quick way of editing the colors, just a quick tip, if you click on the chart frame itself and just go down to the selection colors section on the right-hand side here, that’ll give you easy access to all of those colors that you can then just change in one go. So, for example, you can theme this really easily just by clicking on those selection colors and changing those in the sidebar here. And the same goes for text and backgrounds and all that sort of stuff.

That’s pretty much it for today. I just wanted to give you a quick rundown of the fundamentals of using the chart sync feature in the CopyDoc Figma plugin to automatically import your data from a spreadsheet or Google sheet into the Figma plugin and then adding that into your Figma designs as editable layers. Hopefully that helps with your workflow if you’re working with charts and spreadsheet data a lot. Hopefully, the CopyDoc Figma plugin can help your workflow and automate this a little bit more. So, thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.