Video transcript
8-minute video ·
Today I’m going to be showing you how to sync content from a Google Sheet directly into your Figma designs using the CopyDoc Figma plugin.
The first thing we need to do just to get started is jump into the Figma Community and search for the term “CopyDoc” and under the “Plugins” tab you’ll see the result “CopyDoc” pop up; all you need to do is click on the “Install” button on the right hand side and then you’ll be ready to go.
I’m just going to be using a really simple example of a movie app, and I’m going to be syncing up some content from a Google Sheet that I’ve prepared, so I’m going to show you how this works and how to structure the file for your own content. The first thing to note is that in your Google Sheets, if you’ve got a new Google Sheet set up, a new spreadsheet, the first row of that spreadsheet is basically your header row. The header row contains all of the labels for each of your columns, and each of the rows and the columns are going to be used to populate our Figma layers in just a minute.
The reason these are important because they basically link up the content of your spreadsheet with the content of your Figma file; what I mean by that is you can see here we’ve got one column called “#Title”, we’ve got “#Title” and if we look in our Figma file and look at our little movie poster here you can see that this layer name is also named “#Title”. Same thing here, we’ve got “#Min” for the minutes, and we’ve also got an image layer of a poster and that’s been named “#Poster”. If we jump back into our spreadsheet in Google Sheets you can see here we’ve got a poster column, and each of those rows in the poster column are linking to an image online; what this means is it’s going to basically map those layers together once we sync up the content in just a minute.
If you do want to know how I got those images in there as well, you’ll basically need to get your own images online or you can do something like a simple Google search; for example, if I wanted to add a new record or new row for the “Suicide Squad” movie, I would just Google that poster, right click on the image, go down to “Copy image address” in my right click menu, click on that, and back in your spreadsheet you basically want to paste that in there, and that’s going to paste the image URL. As long as it’s a image URL, and as long as the layer in Figma is also an image layer, or a frame layer, or anything that can have an image fill, the Figma plugin in a minute will automatically sync that together, which we’ll go through shortly.
Then you can just fill out the rest of your row as you as you normally would. We can just populate these other ones really quickly as well; we can do a review layer, just put the genre in there, and then we’ll do a rating as well, okay; this spreadsheet is perfect now, it’s ready to go. This is the exact same structure you’ll need to use for yours.
Now what we need to do is basically get this data into Figma, and the way we do that is just by clicking on the “Share” button in Google Sheets, and at the moment it’s set to “Restricted”, but for this to work we basically need to change this permission under the “Get link” heading; just click on that, and that’s going to bring up this little drop down here. You want to change the “Restricted” option to “Anyone with the link”, so click on “Anyone with the link”; that’s just going to update the permissions, and now you can go ahead and click on the “Copy link” button. I’m going to click on that now, it’s copied this share link for me, so I can close that off, and now we can go back into Figma plugin and finally run the Figma plugin.
If we just right click anywhere on the Figma canvas, go down to “Plugins”, click on “CopyDoc”, that’s going to run the Figma plugin that we just installed a minute ago. In this tutorial I’m not going to be covering any of the other features of the Figma plugin, I’m just going to be looking at this new “Sync Spreadsheet Content” feature; we can open that up by clicking on the “Sync Content” button here. I’m going to do that now, and we’re not going to be looking at the CSV or XLSX file upload today, we’re just going to be looking at the “Sync Public Google Sheet” feature. Down here we’ve just copied our Google Sheets link; in our Figma plugin I’m just going to click on this input, paste the Google Sheet URL that I just shared or copied, and you can see here it’s loaded in our spreadsheet columns from the Google Sheet. That’s pasted it in, it’s saying that it’s a valid Google Sheet URL; that’s all good to go, and we can see a preview right here.
The next thing we need to do is just make sure that we’ve created enough of these posters that we want to actually populate. I’ve got my component here, again, you don’t have to use a component, you can use a Figma frame or a Figma group or any any kind of layer like that; in my case, I’m just going to create three instances of the component, and I’m going to copy and paste those on my canvas and just move them around. Because they’re instances, the layer names in those instances are also matching the headers from the Google Sheet as well. That’s perfect, that’s exactly what we want it to do. Now all we need to do is click on those four layers; I’ve got the component selected, and the three instances, and now that I’ve got those selected I can go back to my Figma plugin and I can click on this button called “Sync Spreadsheet Rows with Figma Layers”, and it’s telling me I’ve got four layers selected, so I’m going to click on that now.
This is basically going to start mapping our content together; it’s downloading the images that we specified in our Google Sheet, it’s going through and downloading each of those in high resolution, and now it’s going to sync up the content text-wise and image-wise with those Figma layers. You can see it’s finished, it’s updated 24 layers automatically, and that’s pulled in all of the content from our Google Sheet directly into our Figma layers. We didn’t have to do any manual copy pasting, we didn’t have to do any manual dragging and dropping of images, it automatically populated that for us based on whatever we had put in our Google Sheet.
Just to double check that, we can go back into our Google Sheet and you can see here it’s gone row by row; we’ve got two, three, four, five and basically for each of the layers that we had selected, it’ll loop through those selected layers and and just swap out any layers that it finds with those matching Figma layer names. That’s exactly what it’s done, you can see it swapped out the tags, it swapped out the titles, it swapped out the reviews and we’ve got all of our posters downloaded looking extremely sharp and swapped out without us having to do anything.
That’s how it works; that’s the basic concept, so you could use this to populate lists to populate grids, you can use it for small screens, large screens, or you could run it on a whole file if you felt like it. It’s a really powerful tool for automatically populating Figma content directly from a Google Sheet, or Google spreadsheet; and you can just basically use this format to populate any kind of content that you want, depending on what your use case is, for many rows as you want to put in, and as many rows as you want to copy and paste in your Figma file. It’s really up to you to decide how you go about using it, so that’s pretty much it for today. This is a brand new feature, something that we’ve been wanting to ship for a little while; very happy to get it out there and available for you to use in your own projects.
That’s pretty much it, if you’ve been wondering how to sync up content from a Google Sheet, this is this is a really easy way to go about it. Feel free to give it a go with your own team or in your own projects, and thank you as always for watching; we’ll be back soon with more Figma tutorials just like this one very shortly.
Pro Bundle