Writers rejoice! Now you can sync strings from Airtable to your Figma designs.
- Setting up Airtable
- Installing the plugin
- How to use it
- Contributing to the project (Spoiler: You don't have to code!)
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 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. |
You can install the plugin directly in Figma.
If you're digging it, click the ♥ and give it some love. 🙂
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. |
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.
{{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.
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 keytwo sets{{a set of {{nested}} braces}}will sync with the keya set of {{nested
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.
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. |
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.
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.
I learned TypeScript for this project, so I'm sure you can find a way to improve the code.
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)
git clone https://github.com/imnotashrimp/copyThat-airtable-figma.git
code copyThat-airtable-figmaIn Visual Studio Code, open the terminal (in the menu, Terminal > New Terminal).
Run these commands:
sudo npm install -g TypeScript
npm installIn 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.
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.