Gamechanger: Automatically sync design tokens from GitHub to Airtable 🤯

Step-by-step guide with the video

👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / Podcast / My Linkedin

---

Stop manually copying token values from your repo to documentation. Here's how to automate the whole thing.

This automated design token system will save you hours and hours of manual work.

What you'll get ✅

• Automated sync from GitHub token files to Airtable (you can also use Tokens Studio and upload tokens from Figma)

• Light/Dark theme values that resolve to actual hex codes

• Component categorization that makes sense (Button, Input, Text, etc.)

• Team collaboration - everyone gets updated tokens instantly

Prepare your

• GitHub account and repository where you store design tokens (free works fine)

• Airtable account (free works fine)

• Cursor IDE (PRO version, highly recommended)

PS. I’m not affiliated with any of the mentioned tools.

Don't worry if you're new to GitHub or coding - this guide explains everything step by step.

🔗 Get the package here →

Step 1: Install and set up Cursor 💻

1. Go to cursor.com

2. Download and install like any other app

3. Open it.

Connect Cursor to GitHub

1. Press Ctrl/Cmd + Shift + P to open command palette

2. Type: "GitHub: Sign in" and press Enter

3. Click "Allow" when GitHub opens in browser

4. Authorize Cursor to access your GitHub account

5. Return to Cursor - you should see "Signed in to GitHub" confirmation

✅ Cursor is now connected to your GitHub account!

Step 2: Your GitHub repository 📁

Probably, you already have your GH repository with your design tokens. If not, follow the video, and let’s create it together.

Once you are done, clone it to Cursor.

Clone repository to Cursor

1. In your GitHub repo, click the green "Code" button

2. Copy the HTTPS URL (example: https://github.com/yourusername/design-tokens-sync.git)

3. Go back to Cursor

4. Press Ctrl/Cmd + Shift + P → type "Git: Clone" → press Enter

5. Paste your repository URL and choose a folder on your computer

6. Click "Open" when cloning is complete

✅ Your repository is now connected to Cursor!

Step 3: Set up Airtable 🗂️

1. Go to airtable.com and log in (create an account if needed)

2. Click "Create a base"

3. Choose "Start from scratch"

4. Name it: "Airtable Sync" (or whatever you want)

5. Click "Create base"

Set up your table structure

1. Rename the default table to Semantic design tokens

2. Delete default fields and create these exactly:

• Token name (Single line text)

• Component (Single line text)

• Light value name

• Light value

• Dark value name

• Dark value

• Usage

You can change the names (or even add more columns), but then you will need to instruct Cursor or manually modify the scripts so that the script knows how the values from JSON should map in Airtable.

Get your Airtable credentials

Get your Base ID:

1. Look at the URL in your browser while in your base

2. Copy the part starting with "app" (example: appXXXXXXXXXXXXX)

3. Save this - you'll need it later

Get your API token:

1. Go to airtable.com/create/tokens

2. Click "Create new token"

3. Name it: "Design Tokens Sync"

4. Add these permissions:

   • data.records:read

   • data.records:write

   • schema.bases:read

5. Add access to your base (select your "Design Tokens Hub")

6. Click "Create token"

7. Copy the token (starts with pat) - Save this safely!

🔒 Keep your API token secret - it's like a password!

Step 4: Get or create automation scripts in Cursor

Copy the package from my GitHub repo or instruct Cursor to check your environment variables from GitHub and sync your design tokens from GitHub to Airtable.

Be careful about your column names in Airtable (they have to fit if you are using my scripts).

Step 4: Add Airtable credentials to GitHub

This is where your Airtable credentials go - as GitHub Secrets for automation:

Access GitHub secrets

1. Go to your GitHub repository on github.com

2. Click "Settings" tab (far right in tab bar)

3. In left sidebar, click "Secrets and variables"

4. Click "Actions"

Add your credentials

1. Click "New repository secret"

2. Add first secret:

   • Name: AIRTABLE_API_KEY

   • Secret: Paste your API token (starts with pat)

   • Click "Add secret"

3. Click "New repository secret" again

4. Add second secret:

   • Name: AIRTABLE_BASE_ID

   • Secret: Paste your Base ID (starts with app)

   • Click "Add secret"

Step 5: Test

Watch it work and check the results in your Airtable base. If the values are not correct, instruct Cursor to check your structure again. You can also test the workflow with a sample design token.

Step 6: Configure component categories on Airtable

The system automatically categorizes tokens:

• button.primary → Button

• text.heading → Text

• input.border → Input

After the first sync, you can change the column type to "Single select". Airtable will automatically create a colored dropdown for all your components. Now you can also change the view and group design tokens by component.

🎊 Wohoo, you've built something amazing!

Next week we will create GitHub actions to automatically check for changes in Figma and GitHub.

Enjoy the weekend. ✌️

---

---

💎 Community Gems

Quantum - FREE Design System v.0.3

Quantum provides a comprehensive, tokenized UI library designed to bridge the gap between designers and developers.

🔗 Link

Apple introduces a delightful and elegant new software design

Ohh, a lot of debates around accessibility, futuristic design decisions this week. I love the style and the direction, but we definitely need updates, so we will be able to read 🙃
🔗 Link

OpenAI added Connectors to ChatGPT — real-time access to Google Drive, GitHub, and SharePoint inside the chat.

🔗 Link

Another take on naming design tokens

by David Aerne

🔗 Link