Video transcript
13-minute video ·
Today I’m going to be showing you a quick Figma tutorial on how to export your Figma designs’ text content to an Airtable spreadsheet, which you can then update in Airtable and then reimport the text updates back into your Figma designs automatically. And we’re going to do that using the CopyDoc Figma plugin.
To get started, all we need to do is go to our Figma file, go down to the little actions icon down here at the bottom. If you click on that and 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 little run button down here, or I’d recommend clicking on the save icon next to that. And that’ll let you run the Figma plugin from your plugins list.
I’ve already clicked on this save button here, I’m just going to close off that panel and go to my canvas. Then just right click anywhere, go down to Plugins, 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.
You’ll notice that the Figma plugin has a bunch of different features, but today we’re just going to be focusing on the export Figma text layers feature and then the reimport text updates to Figma feature. We’re basically going to be touching on these two buttons: the export text layers button and then the import text layers button. I’m going to go through these step by step with you now.
To get started, all you need to do is click on the export text layers button. If you do that, you’ll notice that it brings up a panel showing all of the frames on your current Figma page, and it allows you to select which frames you want to export. By default, it just exports it to a local Excel spreadsheet file, directly to your computer.
If you click on that dropdown, you’ll notice that we have a few other different options as well. We can do Excel, CSV, JSON, Word docs, all sorts of things like that. But for today, we’re going to be focusing on this external API option, which is going to be the Airtable option.
If you go ahead and click on the Airtable option in the dropdown list, you’ll notice that the content over here changes. It’s now asking us for a few different fields. I’m going to show you exactly how to get all of these fields.
The first thing we need to do is actually paste in our Airtable URL. To do that, we just go to our web browser and log into your Airtable account. That’s just at airtable.com. If you go to your workspace, you can create a workspace, and underneath the workspace you can create a new Airtable by either clicking on this create button here or you can click on the blue create button on the left-hand side here.
I’m just going to go ahead and do that, and today I’m going to be using my CopyDoc workspace. That’s where I’m going to store my CopyDoc-related spreadsheet in this case. What you want to do next is click on the “build an app on your own” button, this option on the right here. Just go ahead and click on that. That’s going to start a fresh Airtable with no content in it.
You can see here it’s just called “untitled” at the moment. We can go ahead and rename that. We can call it something like “movie app content.” You can customize that to be whatever you want. Now that I’ve changed the name of that here, that’s ready to go.
You’ll notice that there’s no content in the table at all. I’m just going to close off this sidebar here to see that a bit better. We’re in the grid view, which is basically the default table view. This is perfect. This is just a blank new Airtable that we’re going to upload our Figma content into.
What we need to do, as asked for in the plugin, is paste in our Airtable URL. In this case, we’re going to paste in the Airtable URL that we just created. I’m going to copy that to my clipboard from the URL bar in the browser, and I’m going to paste that into the URL field here. That’s good to go. It’s telling us that it’s a valid Airtable URL, which means we’ve done it correctly.
The next thing we need to do is paste in our token. The token is what allows you to authenticate Airtable with the Figma plugin. In this case, I’m going to click on the token link here, which is going to take me to the Airtable tokens page. Because I’m already logged in, it’s brought us to the personal access tokens page.
All you need to do is click on the create token button. That’s going to allow us to create a brand new token. I would go ahead and name this something that’s relevant. In this case, we’re going to call it “CopyDoc Figma plugin token,” just so you can go back to it later and understand what the token was being used for.
Importantly, you’ll notice that in brackets here, it’s telling us that we need to add the schema bases and the schema record scopes. What that means is under this scopes option here, you have to click on the add a scope button, and then we want to add those scopes.
We want to do the data records read, data records write, and then the other one was schema and bases. We’re going to scroll down that list and find the schema option. You can see we’ve got schema bases read and also schema bases write. What this allows us to do is grant the token permission for the Figma plugin to both read and write to your Airtable.
That’s going to allow us to upload the text from Figma into Airtable and then read the updated content back into our Figma plugin. It’s quite important to make sure those are all selected.
The last thing you need to do is choose what tables or what workspaces you want to give this token access to in your Airtable. In this case, I’m just going to make sure it works across all workspaces. If you only want it to be authenticated with a specific table, you can customize that further as well. To keep it simple, I’m going to do that for now.
Then I’m going to click create token. Once that happens, you’ll only be shown the token once, make sure you copy it to your clipboard by clicking that button there. We can go ahead and paste that into our Figma plugin here. It might also be worth saving that somewhere else securely, like a password manager or something like that, but it’s totally up to you.
As long as you’ve copied it to your clipboard and pasted it into the plugin, that’s pretty much good to go. The last thing we need to do is give this a label. This label is what’s going to show up later, because we can add multiple Airtable links in our Figma plugin here. This is what’s going to make the dropdown option label.
In this case, I’m going to mirror that to what I’ve called my content over here. I’m just going to copy that title and use that for the same option here. I’m going to go ahead and click on save Airtable. That’s going to authenticate it and make sure it’s loaded. It looks like it’s just saved it.
Now we’ve got the movie app content as a saved table, which means it’s all working as expected. All we need to do now is click on the export Airtable button. I’m going to go ahead and do that now.
What that’s going to do is take all the text content from the frame we selected here and upload all of that to our Airtable that we just pasted into the plugin. This will just take a moment while it uploads all those rows.
It’s telling us that it’s synced 27 rows into Airtable, which means that if we now go back to our browser, you can see it’s looking good. We’ve got all of the content that we just exported from our Figma file.
I’ll run through this with you now, and then I’ll show you how to update this and reimport it back into the Figma file. You’ll notice here that we’ve got a few different fields. The ID is the layer ID of all of your text layers in Figma. These are very special values in the sense that they’re all unique and they all map to a very specific Figma layer.
This is the way that the Figma plugin can tell which text layers to update and what content is going to be updated for those text layers. Whatever you do, don’t change any of these ID values. Those need to stay the same.
Then we’ve got some information showing what frame it was under, what group it was under, the layer name, and the Figma text. What we can do is update things like the layer name. If we wanted to change this particular layer name, we could change that in here. For today, I’m just going to be focusing on making actual text content updates, and all of those are done under the Figma text column.
For example, if we wanted to change “No Time to Die” title, which is just showing up over here, we would edit this field over here and instead do something like “Casino Royale” and change that title. That would be one example.
We can also change any of these minutes. We could change this to something like four minutes, just to make it a bit obvious. You can go through and change whatever you want. We could call this one “The Avengers” and update a few of those different ones. If we called this one “Batman” or something like that, we can change all of these text contents.
Once you’re happy with these text edits in Airtable, we can go back into our Figma file, close off the export panel here, and as I mentioned before, click on the other option, which is the import text layers button.
Once that loads up, you’ll see that because we already selected the export format to be Airtable, it’s already syncing that option up in our import option. You can see that we’ve got the option of importing from a file. If we exported it from Excel to an Excel file locally, we could drag and drop those in. Today, we’re focusing on importing from an Airtable URL.
Because we’ve already added our option over here, we can make sure that’s selected. That’s going to be the Airtable that we’re going to load the content from. We’ve already got our key saved in there, you don’t need to paste that in again.
Now all we need to do is click on the load Airtable preview button here in the plugin. That’s going to fetch all of the content from Airtable and show us any content that has changed from the Figma file itself. It’s doing a summary of all the content that’s been updated since it was exported to Airtable and giving us a summary of those changes here.
We can go through those by clicking on this little text icon here. That’s automatically going to jump to all of the places where the text layers have been updated in the Airtable content. That allows you to go through each one and see exactly what content has been changed in Airtable, and then it’s up to you to pick which changes you want to accept.
In this case, I’m just going to change all four of these layers to show you how it works. I’m going to click on the update Figma text layers button over here. Once I click on that, you can see it’s saying it’s updated four Figma text layers.
We can verify that by going through those text layers. You can see that Black Widow has been changed to The Avengers over here. We’ve got No Time to Die updated to Casino Royale, Batman Returns here, and then this four-minute version of the movie runtime.
That’s basically it. I just wanted to show you that concept. If you’re an Airtable user and you’ve been wondering how to more easily sync your content between Figma and an Airtable spreadsheet or table, this is an easy way to automate that between your Figma file and your Airtable account.
This is a new integration in the CopyDoc plugin. If you’re using the Figma plugin and you’re using Airtable, feel free to give it a try. Hopefully it’s easy enough to follow. There are just a few initial steps that we went through, but once you’ve got it all hooked up, it’s quite easy. You’re basically just going back in, clicking the export button, and that will re-update the content.
For example, if I changed this to be something like June 3, and then changed the genre over here, if I called this adventure or something like that, and then exported to Airtable again, that’s gone ahead and reinserted those rows.
If we go back to Airtable, you’ll notice that the content is automatically updated. We’ve now got June 3 reflected in Airtable, and we’ve also got the adventure label added up here as well. It’s quite real time. It updates your Airtable content on the fly.
Again, we could repeat that process, change the content again, and then reimport that back into Figma over and over again. This is a really easy way of managing your content with external stakeholders, for things like legal reviews or anyone who prefers to edit their content outside of the Figma file.
We’ll leave it there for today. Hopefully that was simple and an easy way to set up your Airtable with Figma. Thank you, as always, for watching. We’ll be back with more Figma tutorials like this one very soon.
Pro Bundle