Video transcript
12-minute video ·
Today I’m going to be showing you a quick tutorial on how to sync your spreadsheet content from Airtable into your Figma layers 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, and if you search for CopyDoc under the “Plugins” tab, if you click on the CopyDoc result, you can run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this “Save” icon here. That’s going to save it to your Figma plugins list for easy access.
I’ve already clicked on the save icon, I’m just going to go to my canvas, right click anywhere, go down to Figma plugins, then go down to “Saved plugins”, and click on the CopyDoc item. That’s just going to run the Figma plugin that we saved a second ago.
If you’re new to the Figma plugin, it has a bunch of different features to help you update text in your Figma designs, but for today I’m just going to be focusing on this sync content feature that we can pull in spreadsheet data from the Airtable platform into your Figma designs and sync up those layers. What we’re going to do is just click on the sync content button in the Figma plugin here, and then what we’re going to do is make sure the content tab is selected underneath this little tab section here. We want to change the default sync option from CSV Excel file and click on that drop down and change that to sync from Airtable URL.
If you click on sync from Airtable URL, that’s going to change the data source to Airtable and it’s going to allow us to add a new Airtable into our Figma plugin. What we need to do for this is to get our Airtable URL. In this case, I’ve already created an Airtable in my browser. You can see here I’ve got my Airtable set up. All I’m going to do is copy that link. I’m just going to grab that link from the URL bar and paste it into the URL field here in the Figma plugin. I’m pasting that in. You can see it’s saying that it’s a valid Airtable URL. It’s picking up on the URL that we’ve just pasted.
The next thing we need is the token. If you click on the token link, that’s going to open up the browser to your developer Hub page. At the moment, I don’t have any personal access tokens created, I’m just going to go ahead and click on the create token button in the Airtable developers page. Click on create token and give this a name. I’m just going to call this CopyDoc Figma plugin integration. For Scopes, you can see in the Figma plugin it’s saying that we need to add the data.records.read scope. Make sure that you click on add a scope and select the data.records read scope. I’ve just selected that in there.
Importantly, you need to Grant the API token access to the base that your table is in in Airtable. Click on add a base. I’m just going to add the CopyDoc base that I’ve got set up here and just say all current and future bases in this workspace. That’ll be different for your end, but just select the place where you know you’re going to be reading the spreadsheet data from and add that in. Then you want to go ahead and click on the create token button in the bottom here. Click on create token and then you can copy this to your clipboard by clicking on this little copy icon here.
That’s copied the token to our clipboard and it will only show it to you once, if you want to save that somewhere secure, now is your chance to do that. But I’m just going to copy it to my clipboard and paste it into the Figma plugin here where it says personal access token. I’m pasting that in. We’ve added in our Airtable personal access token, and then now we just want to give this Airtable a label. I’m just going to call this one movies or movie posters. I’m just to say movie poster details and I’m just going to click on save new Airtable.
I’m going to click save new Airtable now and that’s going to load in the Airtable data for me. You can see here that it’s loaded up the data. Going back to our spreadsheet here, you can see in Airtable it’s currently set up with these four columns. We’ve got title, genre, minutes, and poster. If we go back to the Figma plugin here, you’ll see that that content has all been pulled in to this preview down here.
What this is relating to is the Figma layers in our designs. You can see here we’ve got a few layers already set up with those named layers. If we open up this panel here, you’ll see that the layers are named poster. #poster is this little rectangle layer. That’s where our image is going to go. We’ve got #title, #genre, and #minutes. These layer names in Figma all match up to the header names in the spreadsheet. You just have to make sure that the names that you give to each column in your Airtable at the very top are named exactly the same as your Figma layers inside of each frame that you want to sync up.
To show you what this looks like when we now sync those layers, I’m just going to select a few different layers. You can see I’m selecting. The number of layers is getting reflected here. Every layer that you select is going to get looped through and the matching layers inside of each one is going to map to the content for each row.
To give you an example, I’m just going to do these three and I’m just going to click on sync rows with layers. You can see that that’s downloaded the content from Airtable and synced it to our Figma layers here. It’s basically swapped out the content for the #title, #poster, #genre, and #minutes. That’s all been replaced with the real content that we pulled in from our Airtable here.
Now, if you’re wondering how to quickly get started with this, you can click on this go back button here. If you want to get a sample CSV, a sample spreadsheet of this data structure to give you a bit of a quick head start, you can actually just click on this content sample data CSV link here and that’s going to save it to your computer. You can just click on Save. I’m just going to replace the one I’ve already got there. If we open that up, you can see that we’ve got this content sample data CSV file. This is exactly the same data that I’ve got loaded into Airtable. This is just an example again of an easy way to get a quick overview of what that data structure looks like, the first row being your header.
You just want to give each column the name of the layer that you want to match in Figma. Make sure that’s matched up and then you can proceed to add each row with the content for each of those different items per column. You can add as many rows as you want. Importantly, you can also sync these automatically. If you don’t want to create all of the rows beforehand and copy paste those, I’m just going to delete those ones now, you can actually automatically sync those and repeat them as well.
Now that we’ve got our Airtable saved, we can easily go back to that just by selecting it from our list. If you’ve added more by clicking on this little plus icon, you can add more Airtables if you like, but for now we’ve just got this one. I’m just going to select that one again, click on the load content preview button here, and that’s going to load up our Airtable data again. You can see here we’ve got this little switch that says auto repeat.
If you want to automatically repeat a single row, you can do that by enabling the auto repeat toggle up here. You can see that the messaging has changed to say select a single Figma layer that contains your named layers. Before it was saying select multiple layers, the example we just did a minute ago, but in this case we’re just going to repeat one layer as many times as the rows appear inside of your spreadsheet.
In this case, it’s going to loop through 1, 2, 3, 4. We can click on this single card layer here and again, we’ve got our named layers inside of that layer. Now that we’ve got the frame selected, we can click on the sync and repeat selected layer button here. That’s going to pull in all of the content, but this time it’s going to automatically copy that original layer and duplicate it as many times as the content appears in your spreadsheet.
You can see it’s taken this original card here, it’s copied that layer automatically, pasted it four times, and it’s swapped out all of the data for each row from our Airtable. That’s a really quick way of automatically looping through your Airtable spreadsheet rows if you don’t want to manually copy paste, you know, 100 different layers.
I’ll also show you how to add this to an auto layout frame that already exists. For example, if we take this component here and I’m just going to copy that and paste it into this horizontal auto layout container down here. This is a frame that has auto layout applied over here in Figma. You can see the auto layout toggle. That’s got it applied and it’s going from left to right. It’s horizontal layout.
Because we’ve got this card inside of the layer, I’m just going to actually put in the instance instead of the component. I’ll pull out the component. You can see we’ve got an instance of this original component inside of our auto layout frame. We’ve got this auto layout frame with horizontal layout applied. What we can do is we can select the card inside of that auto layout frame. Because the parent layer has auto layout already applied, this time when we click on the sync and repeat selected layer, which I’ll do now, you’ll see that it automatically copy and pastes those layers inside of the existing auto layout frame.
This can be really handy if you’ve already got a design that has auto layout applied to the parent of the layer that you want to repeat. You can just select that layer as long as it’s inside of an existing auto layout frame and that way it will just automatically repeat those layers for you and leave the original one alone. You can either hide that or use it as you like.
These are instances as well. The cool thing about that is we can then edit the main component up here and that’s going to automatically edit all of the duplicated instances that we just added via the CopyDoc Figma plugin. That’s pretty cool as well. I definitely recommend using a component based original layer up here and then creating an instance of that component to use with the repeat feature. That’s going to make it really scalable for you to apply changes in one place.
You can see here I can change text sizes and all different things like that to make it really easy for me to adjust that component with all the synced layers. Yeah, that’s basically it. I just wanted to show you this in case you’re a fan of the Airtable platform and you want to use this as an alternative to the other options available which are the CSV and Excel file imports or the Google Sheets URL imports. Now we’ve also got the sync from Airtable URL inputs where you can add your own Airtable spreadsheet data to use with the sync content feature.
You can also use the other tabs. You can use the Airtable URL as a source for your other data. If we switch from content to table, clicking on this tab here, you can see we can now click on the load table preview button. If we load that up, this is going to allow us to import a table directly into our page. If I click on the generate table from rows button, I can also make this zebra striped. I’ll just do that for now and click on generate table from row. This is going to create a brand new table inside of your Figma file automatically with auto layout applied.
You can see here I can move that around, scale it up and down as needed. Again, because this is using components automatically, I can do things like scale the poster size. I can just increase that and that’s going to look really good when I do change that. Yeah, that’s basically it. As I said, feel free to play around with the other options. You can do charts, you can do styles, table, content, and the sample data for each of those is available here. Just click on that little link and click save.
If you need a bit more detail or help, you can click on the docs link for any of these options as well. Just go ahead and click on that docs link for any of these tabs and that’ll give you a bit more detail about how to use them. Hopefully this has been a good tutorial if you’re using Airtable and you can now use that as a data source for the CopyDoc sync feature. Thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle