How to use Airtable as a Figma text content library using CopyDoc

Video Transcript

Today, I’m going to be showing you how to use an Airtable spreadsheet as a custom content library in Figma with the CopyDoc Figma plugin.

So, to get started, all we need to do is go to your Figma file, click on the little “Resources” icon up here, and if you search for “CopyDoc” under the “Plugins” tab, you’ll see CopyDoc pop-up. You can run the Figma plugin by either just clicking on the “Run” button or you can click on this little “Save” icon to save it to your Figma plugins list for easy access later.

I’ve already gone ahead and saved mine, so I’m going to go to my canvas. I’m just going to right-click anywhere, go down to “Plugins”, then find the “CopyDoc” item, and click on that. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it has a few different features to help you update text content. Today, I’m just going to be focusing on the Content Library feature, which is going to allow us to sync up an Airtable spreadsheet and use the content from that spreadsheet in our Figma designs and apply those Snippets automatically.

To get started, all you need to do is go to your Content Library feature. Click on the Content Library button in CopyDoc, and you’ll see here by default it’s going to go to the “Collections” tab. There’s another tutorial on the YouTube channel if you want to go through doing that, but for today, we’re just going to be focusing on the “Integrations” tab.

I’m going to go ahead and click on Integrations, and by default, it’s going to select the Google Sheets integration. Instead of using Google Sheets, I’m going to click on that option and change that to “Airtable”. So, I’m going to click on Airtable, and you’ll notice that we haven’t set up any Airtable libraries yet or spreadsheets yet. All you need to do is fill out these details below.

You can see underneath “Add new Airtable”, there’s a prompt asking us to add our Airtable URL and also our personal access token from Airtable. You can click on this little Airtable details link to get some links where to find those, and I’ll show you what that looks like in Airtable now as well.

If we go to our browser, first thing I’m going to do is just create a new personal access token in Airtable. If you go to Airtable.com/create/tokens, you’ll get sent to this page here, and what you want to do is go ahead and click on “Create token”. I’m going to click “Create token”, and I’m just going to call this “CopyDoc Figma plugin” just so I know what the token is being used for.

The other important thing you want to do is add a scope. Scopes are going to tell the token what it has access to in your Airtable account. So, I’m going to click on “Add a scope”, and I’m just going to select one scope, which is this “data records read” scope. This is going to allow us to read the content from our spreadsheet. You don’t need to add any other ones, just that “data records read” scope.

Then, you also have to make sure to add your base. So, if you click on “Add a base”, that’s basically going to tell the token what kind of areas in your Airtable account this token will have access to. So, I’ve already created a separate Base called “CopyDoc” where I’m just going to keep my copy content libraries. You can choose another one, or you can choose all workspaces. I’m just going to scope it to this one, and then I’m going to hit go ahead and click on “Create token”.

Once you’ve created the token, it’s going to give you the token that you can copy to your clipboard. You want to make sure to keep this somewhere to reuse it later if you want to because they’re only going to show it to you once. I’m just going to copy that to my clipboard, go back to Figma, and paste that into the personal access token input down here. So, I’ve pasted that in, and then the next thing we need to do is just grab our Airtable URL.

What that means is if we go to our Airtable account (this is just the home page once you log into Airtable), what you want to do is have a base created. So, go ahead and click on “Create a base”, and you can save this to your workspace. I’m just going to use the “CopyDoc” workspace that I already set up. Click on “Create”.

I’ve actually already created a spreadsheet in Excel, but I want to use this in Airtable. So what I’ve done is I’ve saved this spreadsheet here, and I’ve saved it as a CSV file that I’m now going to import into Airtable.

I’m going to click on this CSV “Other” button over here, and then that’s going to allow me to basically import a CSV file. So, I’m just going to drag and drop that into here and click on “Upload”, and that’s just going to import the CSV.

Again, you can basically do this manually. You don’t need to import a CSV; you can totally just enter this in directly to Airtable, and that will work as well. But in this case, it’s just easier for me to do it that way.

I’ve got my spreadsheet set up now, and you can see here I’ve basically got my “Projects” and “Headings” columns. So, the projects tag and the headings tag is what’s going to be used as our label for these content Snippets, and then each row of these columns is going to be used as a variant that we can use for Content.

If that’s not making sense right now, I’ll show you exactly what that looks like in a second. So again, I’m just going to copy the URL, so I’m going to paste that into my URL down here, and then I’m just going to click on “ADD”. That’s basically going to load up our Airtable sheet.

You can see here it’s found the sheet, it’s loaded that up, and now we’ve got our content loaded directly into Figma. So, you can see here I’ve got my projects and I’ve got my headings as we just saw in the Airtable data over here. These are basically being used as separate Snippets that we can now apply to our text layers.

For example, if I were to click on this text layer here, and I wanted to give it a project name, I can either click on the “Apply” button here, and that’s going to randomly select one of the text Snippets from our content that we just loaded from Airtable, or I can open up this panel, and I can manually select a snippet as well.

I can pick exactly which text variant I want to use, and that will automatically apply it to our text layers here. The other cool thing you can do is apply multiple variants at once. So, for example, if I’ve got these project names, and I know that I want to basically populate them with some real content or content from my Airtable spreadsheet, what I can do is I can go in here and select all of these text layers at once. So if I just select all six of these, so I’ll just do that now, I’ll go through and select all the project name layers.

With those six layers selected, now I can basically go through and apply these variants in either alphabetical order like that, or I can do it randomly. So, this is going to randomize the order, as you can see here when I click on that, or we can do it in the original order as well.

The original order will take whatever order that we’ve added in our original Airtable spreadsheet. So, Adidas, Apple, Uber, Airbnb, Disney. If we want to apply those in order, we just have to click on this “Order” button, and that’s automatically going to apply those in the original order that we had in our Airtable data.

The other thing we can do is we’ve got a headings item. So if you click on this headings item, you can see here that we can apply that in the exact same way. We can just use the “Apply” button to randomly do one, or we can select one individually instead.

And because this is now synced up to Airtable, we can also update this on the fly and refresh new content as it’s available in the spreadsheet. So, for example, if we wanted to add a new field name called “subheading”, so if we added a subheading field, I’m just going to add that in, and basically, we’re just going to populate this with some test content.

I’m just going to do this as “testing subheading” and “another subheading”, and that’s just going to be a quick test to show you what I mean when we need to sync it back in.

If we go back to Airtable, you can load that back up by just clicking on this little refresh icon down here. So with the saved spreadsheet already selected from Airtable, just click on the refresh icon, and it’ll load that right in. So, you can see we’ve got our new subheading trigger, and if we click on our subheading down here, we can apply this subheading snippet directly to that text area.

Same thing with here, so if you selected both of these layers, that would allow us to apply those in order. So, we could do it in order or alphabetical reversed just as we saw with the other options as well.

I just wanted to keep this really simple for today, just to show you how to link up your Airtable as a custom content library in Figma through the CopyDoc Figma plugin. And also to show you how to apply the variants, how to create those variants, and also how to resync the content from your Airtable spreadsheet once you’ve already got it loaded in.

We’ll leave it there for today, and I hope that’s been helpful. If you’re an Airtable user or you want to collaborate with your copywriters who are using Airtable or your team and always have an up-to-date Content Library that’s available to everyone in Figma, this is going to be a really easy way of keeping those updates in sync and also a really easy way to automatically apply those to any text layers in your Figma designs.

Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.