Airtable for Adobe XD
  • 11 Nov 2022
  • 2 Minutes to read
  • Dark
    Light

Airtable for Adobe XD

  • Dark
    Light

4402518115351Airtable-AdobeXD.svg

Note
While these articles are meant to serve as helpful guides for our customers, one on one support for integrations with 3rd party tools is limited in support interactions.

The Airtable for Adobe XD plugin allows you to iterate on your designs using real content from your Airtable bases. If you've got an Airtable base containing UI copy, translations, product images, or other relevant text and images, you can connect Adobe XD with Airtable to download your information from Airtable directly into your wireframes and mockups.


Setting up the plugin

To get started, first find and install the Airtable for Adobe XD plugin.

36001470287400install.png

Next, open the Adobe XD file into which you'd like to download text and/or images from Airtable.

36001470319401sampleproject.png

Next, select the Plugins menu from the menu bar, then select the Airtable submenu and use the Download records from Airtable option.

36001548315302selectplugin.png

After that, you'll need to paste in your Airtable API key (which you can get from your Airtable account page), then click the Save API key button.

36001470601403apikeyscreenedit.png


Using the plugin

After setting up the plugin, select one or more text or graphic objects in an artboard to fill with content from your Airtable base. If you want to download text, you should select only text objects, and if you want to download images, you should select only circular/rectangular graphic objects. (The plugin won't work if you select both text and graphic objects.)

While the desired text or graphic objects are selected, go to the Plugins menu from the menu bar, then select the Airtable submenu and use the Download records from Airtable option.

36001470717404emptydatachoosingscreenedit.png

You'll then need to choose the desired base, table, view, and field from which to download records. If you've selected text objects, the available fields in the Field dropdown menu will be limited to fields with text. (For best results, we recommend picking single line text fields or long text fields.) If you've selected graphic objects, you will only be able to select attachment fields from the Field dropdown menu. When you're ready, select the Download records button.

36001548719305filleddatachoosingscreenedit.png

36001548727306textnodesfilled.png

Repeat this process as many times as desired, until your XD file has all the Airtable content you need.

36001470793409alldone.png

Note that if the Airtable view from which you're choosing to download content has more records than the number of text or graphic objects you've selected in the XD file, the plugin will fill in as many objects as it can, starting from the first record in the view. If the Airtable view from which you're choosing to download content has fewer records than the number of text or graphic objects you've selected in the XD file, the plugin will fill in as many objects as it can, starting from the first record in the view, then repeat until all the text or graphic objects have been filled.


Was this article helpful?