{"id":21859194,"url":"https://github.com/imnotashrimp/copythat-airtable-figma","last_synced_at":"2025-04-14T19:08:41.180Z","repository":{"id":42962084,"uuid":"219216434","full_name":"imnotashrimp/copyThat-airtable-figma","owner":"imnotashrimp","description":"A Figma plugin that syncs copy from Airtable!","archived":false,"fork":false,"pushed_at":"2023-01-01T14:15:37.000Z","size":2038,"stargazers_count":24,"open_issues_count":24,"forks_count":4,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-14T19:08:18.389Z","etag":null,"topics":["airtable","figma-plugins"],"latest_commit_sha":null,"homepage":"https://www.figma.com/c/plugin/782185813336691466/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imnotashrimp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-02T21:30:41.000Z","updated_at":"2024-10-01T07:38:23.000Z","dependencies_parsed_at":"2023-01-31T23:00:24.479Z","dependency_job_id":null,"html_url":"https://github.com/imnotashrimp/copyThat-airtable-figma","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnotashrimp%2FcopyThat-airtable-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnotashrimp%2FcopyThat-airtable-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnotashrimp%2FcopyThat-airtable-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnotashrimp%2FcopyThat-airtable-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imnotashrimp","download_url":"https://codeload.github.com/imnotashrimp/copyThat-airtable-figma/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248943456,"owners_count":21186958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["airtable","figma-plugins"],"created_at":"2024-11-28T02:56:29.166Z","updated_at":"2025-04-14T19:08:41.150Z","avatar_url":"https://github.com/imnotashrimp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Jest tests](https://github.com/imnotashrimp/copyThat-airtable-figma/workflows/Jest%20tests/badge.svg)\n\n# {{copyThat.airtable}}, a Figma plugin\n\nWriters rejoice!\nNow you can sync strings from Airtable to your Figma designs.\n\n## Contents\n\n1. [Setting up Airtable](#setting-up-airtable)\n2. [Installing the plugin](#installing-the-plugin)\n3. [How to use it](#how-to-use-it)\n4. [Contributing to the project (Spoiler: You don't have to code!)](#contributing-to-the-project-spoiler-you-dont-have-to-code)\n\n### Noteworthy bits of information\n\n* [Node names and their effect on your sanity](#node-names-and-their-effect-on-your-sanity)\n* [Styling your copy](#styling-your-copy)\n\n## Setting up Airtable\n\nFirst things first. You'll need to have an Airtable base to grab the copy from.\n\nYour base needs these two fields:\n\n* key field (a unique ID)\n* copy field (the string to sync)\n\nYou can name the key and copy fields whatever you want. You'll provide the field names in the plugin configuration.\n\n### The key field\n\nThe key field needs to be unique for each record.\n\nSome easy ways you can make this happen:\n\n* **Recommended**: A formula that uses `RECORD_ID()` (automatically generated by Airtable).\n* Use the DeDupe block (if you're on Pro or higher). It's not automatic, but it'll flag duplicates.\n* Use the _Autonumber_ field type.\n\n\u003ctable\u003e\u003ctd\u003e\n\u003cstrong\u003eImportant\u003c/strong\u003e:\nIf 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.\n\u003c/td\u003e\u003c/table\u003e\n\n## Installing the plugin\n\nYou can install the plugin [directly in Figma](https://www.figma.com/c/plugin/782185813336691466/).\n\nIf you're digging it, click the ♥ and give it some love. 🙂\n\n## How to use it\n\n### 1. Configure\n\nIn the Figma menu, select **Plugins \u003e {{copyThat.airtable}} \u003e Configure...**.\n\n\u003ctable\u003e\u003ctd\u003e\n\u003cstrong\u003eRoadmap note\u003c/strong\u003e:\nFor 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.\n\u003c/td\u003e\u003c/table\u003e\n\n#### Security and your API key\n\nThe 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.\n\nObviously, this isn't good security.\n\nA secure workaround: **Make a dedicated read-only user for this plugin, and use that API key.**\n\n### 2. Make variables in your design\n\n{{copyThat.airtable}} will synchronize all text fields that contain a double set of curly braces — `{{like this}}`.\n\nWhen the plugin runs, it compares the `{{key}}` found in the node name to keys in your Airtable base.\n\nIf it can't find a matching key in your base, you'll see a message in the corresponding node so you can troubleshoot.\n\nThe key needs to be an exact match between the node title and your Airtable base.\n\n#### Node names and their effect on your sanity\n\nText nodes with these names will be synced:\n\n* `{{this will be synced}}`\n* `My own description {{and then variable name}}`\n\nCareful, though: Make sure the node name has one set of braces only.\n\nThese might give you results you didn't want:\n\n* `{{two sets}} {{of braces}}` will sync with the key `two sets`\n* `{{a set of {{nested}} braces}}` will sync with the key `a set of {{nested`\n\n#### Styling your copy\n\n\u003c!-- There a few things you need to keep in mind with this plugin. --\u003e\n\n\u003c!-- First: --\u003e\nYou'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.\n\n\u003c!-- Second: The plugin supports bold, italic, and bold-italic formatting with HTML tags. So if you surround text with `\u003cb\u003e\u003c/b\u003e`, `\u003ci\u003e\u003c/i\u003e`, or `\u003cb\u003e\u003ci\u003e\u003c/i\u003e\u003c/b\u003e` tags, they'll render appropriately. I plan to add markdown support in the future. --\u003e\n\n### 3. Sync\n\nIn the Figma menu, select **Plugins \u003e {{copyThat.airtable}} \u003e Sync all the copy!**.\n\n\u003ctable\u003e\u003ctd\u003e\n\u003cstrong\u003eImportant\u003c/strong\u003e:\n{{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.\n\u003c/td\u003e\u003c/table\u003e\n\n## Contributing to the project (Spoiler: You don't have to code!)\n\nThe plugin is largely my own use case, with some flexibility so that others can use it.\n\nIf you have feature requests or notes on your use case, feel free to [join the discussion on an issue](https://github.com/imnotashrimp/figma-plugin-airtable-cms/issues/) or open a new issue.\n\nPull requests are also welcome, whether they're new or improved features, better code, fixed bugs, or revised documentation.\n\n### Help steer the roadmap\n\nTake a look a the [open issues](https://github.com/imnotashrimp/copyThat.airtable-figma/issues) and [milestones](https://github.com/imnotashrimp/copyThat.airtable-figma/milestones).\n\nWeigh in and help drive the future of the plugin! If you're feeling comfortable enough to code, I'd love your contributions.\n\n### Contributing code\n\nI learned TypeScript for this project, so I'm _sure_ you can find a way to improve the code.\n\n#### To develop \u0026 run the plugin\n\nI'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.\n\n**Before you begin, you'll need**:\n[Visual Studio Code](https://code.visualstudio.com/download),\n[npm](https://www.npmjs.com/get-npm),\nFigma Desktop (this won't work in your browser)\n\n##### 1. Open this repo in Visual Studio Code\n\n```shell\ngit clone https://github.com/imnotashrimp/copyThat-airtable-figma.git\ncode copyThat-airtable-figma\n```\n\n##### 2. Install TypeScript \u0026 other dependencies\n\nIn Visual Studio Code, open the terminal (in the menu, **Terminal \u003e New Terminal**).\n\nRun these commands:\n\n```shell\nsudo npm install -g TypeScript\nnpm install\n```\n\n##### 3. Run the plugin\n\nIn the menu, run **Terminal \u003e Run Task...**, then select **webpack: run locally**.\n\nKeep the plugin running in the background so you can develop \u0026 test in Figma.\n\n##### 4. Load the plugin in Figma\n\nOpen Figma Desktop. In the menu, select **Plugins \u003e Development \u003e New Plugin...**. Click the button under **Link existing plugin**, and select `manifest.json` from this project.\n\nAfter that, you can use the plugin under the **Plugins \u003e Development** menu.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimnotashrimp%2Fcopythat-airtable-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimnotashrimp%2Fcopythat-airtable-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimnotashrimp%2Fcopythat-airtable-figma/lists"}