Airtable to Figma

Airtable & Figma, kinda sounds like an unusual marriage, right? Sure, until you need to design an entire data table, or a dozen different cards of the same variety, at which point you’ll be wishing for an easier way to go about it. Luckily, now there is! This plugin allows you to effortlessly pull text and images from an Airtable database and inject them straight into your Figma components. Using the plugin is child’s play. First, you build your component in Figma, business as usual. Then, you load up the Airtable 2 Figma plugin, and map the Airtable data fields to the right layers in Figma. Finally, choose the layout you want your component to be laid out as and voilà, you just saved yourself a couple hundred clicks! You now have a nice set of data directly inserted into your designs.

Looking for maintainer! This plugin is not under active maintenance or support, but you can discuss things on the Github repo.

Take a gander at the data types we can import directly from Airtable into Figma:

1. Single line text
2. Long text
3. Phone number
4. Email
5. Numeric
6. Image

Here’s a sample database (about cats) for you to experiment with: https://airtable.com/shr0hyEnBae0AKKfQ

Next, follow these steps:

1. Go to https://airtable.com and build or select your own table
2. In your Airtable of choice, click ‘Share’
3. Scroll down and click ‘Create a shared view’
4. Click ‘Share the current view’
5. Next, click ‘Create a shareable grid view’.
6. Then, copy the link and paste it in the plugin window.
7. Assign Airtable columns to text nodes or images.
8. Select the view you want to use and configure the rest
9. Done! For every row in your table, an instance will be created.

Sounds pretty cool, right?

Missing a particular feature? Hit us up at https://github.com/thgh/Airtable-to-Figma/issues