We should now have both our base ID and Airtable API key to use in our automation. Don’t share your Airtable API key as it’s sensitive.
3. Create our automation
Once we’ve got our Airtable base duplicated, and saved our base ID and Airtable API keys, we can get started on building our automation with Automator.
You’ll be able to run this automation in any Figma file, but I recommend creating a new blank Figma file to work in.
Click on the “Set variable” action to edit its properties. Name the variable base_id and set its value to your Airtable base ID.
Add a second “Set variable” action, and this time name it api_key and set its value to your Airtable API key.
Our automation with two “Set variable” actions defining base_id and api_key
Add the “Fetch URL” action to our automation. We’ll use this to make an API request to the Airtable API to fetch the products in our table.
Click on the “Fetch URL” action to edit its properties. Here, we’ll set the URL to the Airtable API URL using our {{base_id}} and {{api_key}} variables to this:
Note: “Furniture” in the Airtable API URL is referring to the Furniture table name in our Airtable template.
Our automation with the “Fetch URL” action set to the Airtable API URL
ℹ️ Checking in
Your automation should look like the above image so far, with two “Set variable” actions for our base ID and Airtable API key, as well as one “Fetch URL” action with the Airtable API URL set.
Let’s start iterating through the products in our Furniture table and create new Figma frames for each product.
The Airtable API response as JSON
Let’s take quick note of the Airtable API response above. There’s a records key that’s an array representing the rows in our table. Each record has a fields key with objects representing each column in our table.
In our automation, add a “For each” action and nest it directly inside of “Fetch URL” action by dragging it. Set its “Array” property to {{result.records}}.
The result variable contains the response from our Fetch URL action, and result.records is iterating through the each record in the Airtable API response. Learn more about using variables in Automator.
Our automation should look like this so far
Next, let’s add the “Create frame” action to start creating a frame for each product in our Airtable. Nest the “Create frame” action directly inside of “For each” by dragging it. Having our actions nested like this means that we’ll create a frame for each of the records from the Airtable API response.
Let’s set the Name property of our frame to {{item.fields.Name}}. The “For each” action exposes an item variable for everything that it iterates over, and in our case it refers to each product in our Furniture table. “Name” is coming from the Name column in our table.
▶️ Let’s run our automation
Press the play button at the bottom of our automation. You’ll notice that our automation outputs a bunch of frames stacked on top of one another with each frame as a name of our product in our Furniture table.
We’re pulling in real data from Airtable, but that’s not quite what we’re looking for
By default, new frames are placed at x: 0, y: 0 which is why our frames were stacked on top of one another. Let’s make use of the index variable representing the index of the current iteration in our “For each” loop to offset our frames. Let’s set the X property of our “Create frame” action to: {{index}} * 200
This does a bit of math and will offset our frames so they’re not stacked on top of one another. Later, you can play with the 200 number to adjust the offset.
Let’s start adding some content inside of our frames from our table. We’ll walk through adding the product image and the product name.
The completed automation
Add the “Set auto layout” action and nest it directly inside of “Create frame” by dragging.
This makes it so that we don't need to manually position things inside of our frames and they’ll automatically stack on top of one another.
Add the “Insert image” action and nest it inside of “Create frame” by dragging. Set the URL property to {{item.fields.Images.0.url}}
Where is this variable coming from? Referring to the Airtable API response JSON screenshot from step 4 above, you’ll notice that there’s an “Images” key that includes an array of image URLs. We’re grabbing the first image URL by using Images.0.url. to grab the image URL at index 0.
Add the “Create text” action and nest it inside of “Create frame” by dragging. Set the Content property to {{item.fields.Name}}
▶️ Let’s run our automation
A new auto layout frame is being created for each product, and we’re inserting the product image and product name inside.
🎉 Now you’ve got an automation that’s pulling from an Airtable base and inserting frames for each row in the table. Keep adjusting the automation with new actions to add more styling, change sizing, and make it work with your own table.
💾 Download the working automation
You can download the automation JSON and import it for you to run. Note: you’ll need to replace the base_id and api_key variables with your own using step 2 from above.
Hi, thanks for laying this out. Is there a good way using Automator to fetch the data from Airtable but update existing text? So, for instance, if I had already fetched the table, but someone had updated the text in the table afterwards - I don't want it to make new frames for each so much as update the existing frames. Any thoughts? Thanks!
Hi, thanks for laying this out. Is there a good way using Automator to fetch the data from Airtable but update existing text? So, for instance, if I had already fetched the table, but someone had updated the text in the table afterwards - I don't want it to make new frames for each so much as update the existing frames. Any thoughts? Thanks!
Hi, thanks for laying this out. Is there a good way using Automator to fetch the data from Airtable but update existing text? So, for instance, if I had already fetched the table, but someone had updated the text in the table afterwards - I don't want it to make new frames for each so much as update the existing frames. Any thoughts? Thanks!
Hi, thanks for laying this out. Is there a good way using Automator to fetch the data from Airtable but update existing text? So, for instance, if I had already fetched the table, but someone had updated the text in the table afterwards - I don't want it to make new frames for each so much as update the existing frames. Any thoughts? Thanks!