A quick guide to Automated Design Tokens/Variables Management in Airtable

Step 1: Create the Airtable database

Step 2: Create a list of values.

Step 3: Create a table for Variables/Tokens 

Step: 4: Create a table for Components

Step 5: Connecting components + variables/tokens

Step 6: Set up automations

Below, I'll explore each step.

Step 1: Open the Airtable database.

Go to airtable.com, register or sign in and create your database.

Step: 2: Create your first table

For example, a table with Light values.

• Add names

• Add values

️ If you have a JSON file with your design tokens, you can use online converters or Python to translate JSON to CSV, and then you don't have to add all the values manually.

️ You can also translate Figma Variables to .json with this plugin (click here), but it adds a lot of columns (for each mode, value), and it takes you a lot of time to modify the data. So it is better to add the values and then connect the tables manually. 

Create another table with Dark values 

• Add names

• Add values 

Step: 3: Create a table for Variables/Tokens 

This step is a bit more complex.

• Name of the variable

• Applied

  • I add this column, so I can quickly filter and see where is the token/variable applied. I suggest you color-code all of the options. 

  • Options for background, border, text, icon, space, size, radius, shadow

• Value

  • Click Edit field

  • Choose the Link to another record

  • Choose a table to link from (for example table with Light values) 

  • Keep "Allow linking to multiple records."

  • You can also add a description so everyone knows how to use it

  • After connecting the tables, you can click the plus button and type the variable's name.

  • You will see that chosen variable is automatically added to the table where you have your values.  

  • You can repeat the process for "Dark values."

• Component

  • Just like we connected the values + variables, we can do this for Components.

  • Let's add another table, "Components." 

Step: 4: Create a table for Components

• First column: Make a list of all the components

• Second column: Figma link

• Third column: Design status

• Fourth column: Web status

• Fifth column:: Mobile status (or divide iOS and Android)

• Sixth column: An assigned person

• Seventh column: Variables (this one will be added automatically)  

Step 5: Connecting components + variables/tokens

Now go back to the "Variables table" and add another column called "Component."

• Click Edit field.

• Choose the  Link to another record

• Choose a "Component" table to link from 

• Keep "Allow linking to multiple records."

• Click on the plus button inside of the field and choose the component (search or browse)

• Each variable is automatically added to the "Component" table when you choose a component. This allows you to have a comprehensive overview.

Step 6: Set up automations

You can automate Slack messages for each updated field/record.

• Go to the Automation tab.

• Choose trigger "When record updated"

• Choose table

• Second step -> choose action -> Send slack message

• Add or choose a Slack account

• Choose channel

• Customize the message

  • One quick tip -> add cc/@responsible person

• Choose bot name

• Click on "Generate preview" 

• Test the automation

Voila, you are done. 🙌

Congrats, your workflow is way more optimized now.

 _______

Additional Automation Ideas:

* Jira issue creation based on Airtable updates.

* Scheduled updates and reminders.

* Google Calendar integration for events based on specific triggers.

* Twilio for instant SMS notifications.

* GitHub repository connection.

* Deadline approaching emails.