Auto repeat and sync Figma layers from a spreadsheet using CopyDoc

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to automatically sync and repeat any Figma layer in your designs with rows from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here. If you search for CopyDoc and then click on the “Plugins” tab, you can then see the copy do result popup. Just go ahead and click on that, and then 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. That will let you run the Figma plugin from your Figma plugins list later. I’ve already clicked on the save icon so I’m going to go to my canvas, just right-click anywhere, go down to “Plugins,” and then go down to “Saved plugins” and click on the CopyDoc result. That’s just going to open the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, it has a bunch of different features, but today I’m just going to be focusing on the sync content feature down here. What you want to do to get started is just click on this little sync content button. So, I’m going to click on that now and that’s going to open up this little window here. It’s going to give us the option to sync content from either a CSV or Excel file or we can open that up and select a Google sheet URL or an air table URL. To keep things simple, I’m just going to show you a CSV file for now. You can see on the side here that we’ve got a little link to download some sample data. So, I’m just going to go ahead and click on that content sample data link and that’s going to allow me to save this to my desktop. I can save that to the computer and just replace the one I’ve already got there.

If we open that up, you can see that in the spreadsheet, we’ve got a few different columns. We’ve got a column called title genre minutes and poster. If you notice, I’ve got the layers set up in my Figma file to match those names. You can see here, I’ve got a couple of frames set up and you can see if I open up those layers you can see that the layer names correspond exactly to the header of the spreadsheet. So, you can see underneath title that’s where I’ve got my title layer, genre is there, and then poster is the name of this blank rectangle layer. So, that’s where our image is going to get synced. I’m going to show you a really quick example of what this looks like.

If we want to sync this up to some existing layers that we’ve already got selected, what we can do is drag and drop our CSV file directly from the computer into this little Drop Zone area in the Figma plugin here and just drop that in. That’s going to load up a preview of the data that we just saw in our spreadsheet file. So, in Figma, you can see that it’s loading in the header. It’s loading in the data for all those rows and you can see image previews as well. By default, this is going to allow you to select multiple frames or multiple layers and it’s going to automatically loop through those selected layers and sync the data.

When I click on this sync rows with layers button, that’s going to automatically sync up the content with my selected layers. It’s syncing those up now and you can see it’s automatically replaced those content layers. This is really handy if you’ve already got your layers duplicated but for today I’m also going to be showing you how to automatically duplicate these if you’ve only got one layer created. I’m just going to delete those layers and I’m going to come down here and I’m going to show you what this looks like to auto repeat these layers.

I’m going to keep my same data selected here and this time I’m going to enable this auto repeat toggle. So, in the Figma plugin just enable this auto repeat toggle and you can see that the messaging has changed here to ask us to select a single layer that contains our named layers. In this case, I can use this wide card design that I’ve got. It’s just a frame with the exact same layer structure that we saw before. So, we’ve got our title layer, genre, poster, etc. That means I can now select this single layer and what it’s going to do is automatically loop through all of the rows in my spreadsheet and copy this layer and update the content for each row.

I’ll show you what that looks like now. I’m just going to click on the sync and repeat selected layer button in the Figma plugin and that’s going to automatically copy that layer and duplicate it the number of times that it appears in the spreadsheet. So, we can see we’ve got four rows in the spreadsheet so it’s taken that single layer that we selected over here and it’s automatically created an auto layout frame and it’s duplicated it four times and swapped in the content each time. That’s automatically doing that for us.

What we can also do is we can add these to an auto layout element first. For example, if we wanted to add this wide card into our vertical auto layout container here. What I can do is create this Frame and apply some auto layout to the parent frame. In this case, I’m just going to add some auto layout over here. I’m going to make that vertical. So, what that’s going to allow us to do is automatically repeat this layer inside of an existing auto layout frame.

For example, if we now click on this white card layer inside of the vertical auto layout container, I’m just going to sync that up again. So, I’m going to click on the sync and repeat selected layer and that’s going to automatically duplicate the layer and you can see here that it’s kept it all within the existing auto layout parent container. So, it’s kept the original layer intact but it’s copied it four times inside of the exact same parent container that the original layer was already in. This is really handy if you’ve already got a design created and you’ve got a placeholder layer in there and all you want to do is sync up that data and repeat it the number of times that you’ve got it in a spreadsheet. That’s really handy.

I’ll show you what that looks like again just using a different layout. So, I’ve created this component here. You don’t have to use components you can just use a frame if you like but in this case I’ll just use a component example. So, what I’m going to do is I’m going to copy that component I’m just going to paste that into this Frame here so I’ve got this one called a horizontal auto layout container. I can actually make that auto layout container reel by clicking on this auto layout plus button over here. So, I’m just going to turn that into an auto layout container and I’m going to set this one from left to right. This is going to be a horizontal layout.

Now what I can do again is just click on the content layer that contains my content layers that are named. So, in this case, I’ve got my instance which contains the content layers. I’m going to click on that instance inside of the auto layout container and one more time I’m just going to click on the sync and repeat selected layer button and that’s going to automatically again copy that layer and duplicate it those four times based on the rows that we’ve got in our spreadsheet. That’s what that looks like there. Again, you can now either hide or remove that original layer if you want. You can take that out there. The cool thing about using this with components is you can then automatically change the master component and change the styles of that in one place and have those automatically update for all of your synced components or instances as well. That’s really handy if you want to use the instances or use the component as the original layer and then copy the instances based on your spreadsheet data that can be really helpful for styling it later.

As I mentioned you can do this with a Google sheet as well. If you wanted to use a Google sheet all you need to do is click on the go back button, come back to this tab over here again make sure the content tab is selected there are some other options that you can sync up but today I’m just going to be showing you the content one. You can change this from CSV and Excel to Google Sheets for example. So, what we can do is change that copy our spreadsheet data from our Excel file and if we go into Google Sheets I’m just going to close this off for a second and go to Google Sheets I’ve just got a new Google sheet set up. I’m just going to paste my data into the Google sheet and then what you want to do is just go up to the share button in Google Sheets click on that and you want to make sure that the General access setting is changed from restricted to anyone with the link. Once you select anyone with the link you can then go ahead and click on copy link copy it to your clipboard and then go back to the CopyDoc Figma plugin and under the sync from Google Sheets URL option you can then paste in that link into the input here.

I’m going to paste that now that publicly sharable link and you can see it’s loaded up our spreadsheet it’s saved it in there as an option and if you have multiple tabs you’ll see the multiple tabs pop up in here as options today I’ve only got the one sheet so I’ve got that selected so then you just have to click on the load content preview button and again this is going to load in the content exactly the same way as the Excel file but this is going to load it remotely from your Google sheet. If you want to keep it up to date somewhere in Google Sheets and then reuse that content over and over in the Figma plugin you can easily do that as well.

Again, we can see what that looks like just by clicking on any of these layers and this time I’m just going to duplicate the component itself. So, go ahead and click on the auto repeat toggle make sure that’s turned on and then click on sync and repeat selected layer and again that’s going to copy our component duplicate it four times and create those instances and again you’ll notice because I didn’t have the component inside of a container that already contains auto layout in that case it will always create a new frame which includes auto layout set on it vertically and then you can automatically add those copy layers in there. It’ll automatically create those you can do whatever you want with them it’s just a way to neatly organize them if you don’t already have the element inside of an auto layout frame. So, if you want to do that just make sure it’s in an auto layout frame first and that’ll always use your own auto layout frame.

That’s basically it; I just wanted to run through this new feature of being able to auto repeat layers again you’ve got the option to turn that off and manually select the layers you can see here when I select the number of layers it’s only going to sync with those selected layers it’s not going to automatically repeat anything it’ll just select the layers that you’ve already got in Figma and map those to the first number of rows in the spreadsheet. So, you can see here I’ve got two layers selected so it’s showing those two rows. Yeah, feel free to give this a try hopefully it saves you some time from having to manually copy paste a bunch of layers that you know you want to sync up and if you’ve just got one that you want to automatically repeat from however many rows in your spreadsheet you can now do that automatically just by checking the auto repeat toggle. Thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.