Jest tests

{{copyThat.airtable}}, a Figma plugin

Writers rejoice! Now you can sync strings from Airtable to your Figma designs.

Contents

  1. Setting up Airtable
  2. Installing the plugin
  3. How to use it
  4. Contributing to the project (Spoiler: You don't have to code!)

Noteworthy bits of information

Setting up Airtable

First things first. You'll need to have an Airtable base to grab the copy from.

Your base needs these two fields:

  • key field (a unique ID)
  • copy field (the string to sync)

You can name the key and copy fields whatever you want. You'll provide the field names in the plugin configuration.

The key field

The key field needs to be unique for each record.

Some easy ways you can make this happen:

  • Recommended: A formula that uses RECORD_ID() (automatically generated by Airtable).
  • Use the DeDupe block (if you're on Pro or higher). It's not automatic, but it'll flag duplicates.
  • Use the Autonumber field type.
Important: If there are duplicates in the key field, all matching results will be returned, and the plugin will use whichever it comes across first. As of v1, the plugin won't catch this as an error.

Installing the plugin

You can install the plugin directly in Figma.

If you're digging it, click the ♥ and give it some love. 🙂

How to use it

1. Configure

In the Figma menu, select Plugins > {{copyThat.airtable}} > Configure....

Roadmap note: For now, this configuration is stored with each design — which means you'll need to copy-paste to each design. I plan to have a way to sync this information between designs in a future release.

Security and your API key

The Airtable API key has the same permissions as the user who created it. Airtable doesn't have a way to scope API key permissions. If you're a Base owner, your API key can add, remove, and delete records and fields.

Obviously, this isn't good security.

A secure workaround: Make a dedicated read-only user for this plugin, and use that API key.

2. Make variables in your design

{{copyThat.airtable}} will synchronize all text fields that contain a double set of curly braces — {{like this}}.

When the plugin runs, it compares the {{key}} found in the node name to keys in your Airtable base.

If it can't find a matching key in your base, you'll see a message in the corresponding node so you can troubleshoot.

The key needs to be an exact match between the node title and your Airtable base.

Node names and their effect on your sanity

Text nodes with these names will be synced:

  • {{this will be synced}}
  • My own description {{and then variable name}}

Careful, though: Make sure the node name has one set of braces only.

These might give you results you didn't want:

  • {{two sets}} {{of braces}} will sync with the key two sets
  • {{a set of {{nested}} braces}} will sync with the key a set of {{nested

Styling your copy

You're replacing entire contents of a text node, including styles. {{copyThat.airtable}} applies the first character's style to the entire node. In most cases, this will probably be regular text. But if you want an entire node to be italicized? Just italicize (at least) the first character, and the entire node will adopt that style.

3. Sync

In the Figma menu, select Plugins > {{copyThat.airtable}} > Sync all the copy!.

Important: {{copyThat.airtable}} updates all text nodes with variable names, everywhere in the design. Always double-check the results. You can undo the sync if something went wrong.

Contributing to the project (Spoiler: You don't have to code!)

The plugin is largely my own use case, with some flexibility so that others can use it.

If you have feature requests or notes on your use case, feel free to join the discussion on an issue or open a new issue.

Pull requests are also welcome, whether they're new or improved features, better code, fixed bugs, or revised documentation.

Help steer the roadmap

Take a look a the open issues and milestones.

Weigh in and help drive the future of the plugin! If you're feeling comfortable enough to code, I'd love your contributions.

Contributing code

I learned TypeScript for this project, so I'm sure you can find a way to improve the code.

To develop & run the plugin

I'm on macOS. These instructions should also work for Linux (but I haven't tested yet). If you're on Windows, please feel free to add separate instructions.

Before you begin, you'll need: Visual Studio Code, npm, Figma Desktop (this won't work in your browser)

1. Open this repo in Visual Studio Code
git clone https://github.com/imnotashrimp/copyThat-airtable-figma.git
code copyThat-airtable-figma
2. Install TypeScript & other dependencies

In Visual Studio Code, open the terminal (in the menu, Terminal > New Terminal).

Run these commands:

sudo npm install -g TypeScript
npm install
3. Run the plugin

In the menu, run Terminal > Run Task..., then select webpack: run locally.

Keep the plugin running in the background so you can develop & test in Figma.

4. Load the plugin in Figma

Open Figma Desktop. In the menu, select Plugins > Development > New Plugin.... Click the button under Link existing plugin, and select manifest.json from this project.

After that, you can use the plugin under the Plugins > Development menu.

Copythat Airtable Figma

A Figma plugin that syncs copy from Airtable!

Copythat Airtable Figma Info

⭐ Stars 13
🔗 Homepage www.figma.com
🔗 Source Code github.com
🕒 Last Update 10 months ago
🕒 Created 2 years ago
🐞 Open Issues 8
➗ Star-Issue Ratio 2
😎 Author imnotashrimp