Design Tokens and Variables Inventory
Design Tokens and Variables Inventory
Design Tokens and Variables Inventory

airtable

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

Romina Kavcic

Dec 15, 2022

Looking to automate your component, token, and variables? You're in the right place. Dive into the guide below.

Looking to automate your component, token, and variables? You're in the right place. Dive into the guide below.

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.

Published on:

Published on:

Published on:

Jul 14, 2023

Jul 14, 2023

Jul 14, 2023

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic