Creating tokens for your design system with ChatGPT assistance
Build and maintain design tokens faster and more accurately
Over the last few years, design tokens have become the most common way to align colors, fonts, widths, animations, and other design decisions with code.
Although this technique makes organizing and managing all the information easier, building and maintaining an extensive system with great token architecture can be challenging.
Recently, we have seen a boom in new AI tools that appear daily and show how we can use artificial intelligence in our design process. Midjourney, Dall E, and Stable Diffusion are amazing tools for creating images, while Wordtune makes working with text a pleasure.
ChatGPT has shown us the next generation of AI. It isn’t just about writing text, it is also about searching for information and doing some work for us, and many people are beginning to think that Google will be replaced by this tool.
For example, I used it to help a friend plan a trip to the south of Italy, and it worked well. I told the chat where I would land, how many days I would be there, and what I wanted to see, and it gave me a route.
I started playing around with the tool to see how I can use it to reduce the effort of creating design tokens, and I want to share the results of this test with you in this article.
ChatGPT can help you, but it doesn’t solve all the work
I want to point out that ChatGPT it’s not a magic tool. While the tool can save you a lot of time writing and organizing tokens, you must think about how you wish to build and organize them. The chat will not make any decisions, so you must take them.
Do you know design tokens basics well?
To create design tokens with ChatGPT, you first need to understand them well. ChatGPT is a tool that helps you organize and create them, but you should also understand what you should ask it.
To understand how design tokens work, You can read documents from the main design systems, read articles and watch YouTube videos. If you have a specific question about something you do not understand, you can ask the designers in the various design communities.
At the end of this article, I will leave some excellent links where you can find a lot of information.
Design a token naming system for a button
For this test, I wanted to build specific design tokens naming system for a button. First, I asked the Chat a simple question:
“For a button, what design token variants do I need?”
Here’s how ChatGPT answer:
Design tokens are a set of design-specific variables that can be used to maintain consistency in the design of a product. They can be used to define things like colors, typography, spacing, and other visual properties that are used throughout the product.
For a button, you may want to define design tokens for the following design variants:
Color: You may want to define design tokens for the different colors that the button can have, such as a primary color for the button background and a secondary color for the button text.
Shape: You may want to define design tokens for the different shapes that the button can have, such as rounded or square corners.
Size: You may want to define design tokens for the different sizes that the button can have, such as small, medium, and large.
Typography: You may want to define design tokens for the different typography styles that the button can have, such as font size, font family, and font weight.
Spacing: You may want to define design tokens for the different spacing values that the button can have, such as padding and margin.
By defining design tokens for these design variants, you can maintain consistency in the design of your button and make it easier to make design changes across the product.
Aside from the ChatGPT answer, I read more information to better understand the button design tokens structure.
It’s possible to divide the tokens by text and the button shape. The tokens for the text include the typography, state, button type, etc., and the tokens for the button shape include the background color, stroke, size, etc.
I’ll explain how I create the button shape tokens to keep things simple, but the same method can be applied to the text or any other UI element.
Using the chat answer and the knowledge I gained, I selected the following variants for the buttons:
- Color: Background, Stroke.
- Type: Primary, Secondary.
- Size: Small, Medium Large.
- States: Enable, Disable, Focus, Hover.
The Token structure
For creating tokens, it is necessary to have a clear structure; for example, imagine the system has two themes and one platform. The variables can be:
- Type
- Component
- State
- Theme
- Size
- Color
Now I asked the chat:
I want to build a token system for a button in my design system. I have these variants: Type, Component, State, Theme, Size, and Color.
What is the best way to organize them, and why?
This was it is answered:
Note: Be aware that the chat remembers your questions and builds answers based on previous questions and answers.
There are a few different ways you could organize these design tokens for a button, and the best approach will depend on your specific needs and the complexity of your design system. Here are a few options you might consider:
Hierarchical organization: You could organize your design tokens in a hierarchical structure, with the most general tokens at the top and the more specific tokens nested underneath. For example, you could have a “Type” token at the top level, with “Component” and “State” tokens nested underneath it. Within the “Component” token, you could have sub-tokens for specific button components, such as “Primary Button” and “Secondary Button.”
Grouped organization: You could group your design tokens based on their purpose or usage. For example, you could have a group for “Appearance” tokens (e.g. color, size, and shape) and a group for “Behavior” tokens (e.g. hover, active, and disabled states).
Alphabetical organization: You could organize your design tokens alphabetically, which can make it easier to find specific tokens and may be more intuitive for users of your design system.
Ultimately, the best way to organize your design tokens will depend on the needs of your design system and how you and your team prefer to work with them. It may be helpful to experiment with different approaches and see what works best for you.
Because I wanted to see it with the real structure, I asked:
“Can you show me the different options in this structure: xx.xx.xx.xx?”
This was it is answered:
Sure! Here are a few examples of how you could organize your
design tokens using a structure with four levels (xx.xx.xx.xx):
Option 1: Hierarchical organization
Level 1: Type (e.g. button, link, form element)
Level 2: Component (e.g. primary button, secondary button)
Level 3: State (e.g. hover, active, disabled)
Level 4: Theme (e.g. light, dark)
Option 2: Grouped organization
Level 1: Appearance (e.g. color, size, shape)
Level 2: Color (e.g. primary, secondary)
Level 3: Size (e.g. small, medium, large)
Level 4: Shape (e.g. rounded, square)
Level 1: Behavior (e.g. hover, active, disabled)
Level 2: Hover (e.g. hover color, hover size)
Level 3: Active (e.g. active color, active size)
Level 4: Disabled (e.g. disabled color, disabled size)
Option 3: Alphabetical organization
Level 1: Color (e.g. primary, secondary)
Level 2: Hover (e.g. hover color)
Level 3: Active (e.g. active color)
Level 4: Disabled (e.g. disabled color)
Level 1: Size (e.g. small, medium, large)
Level 2: Hover (e.g. hover size)
Level 3: Active (e.g. active size)
Level 4: Disabled (e.g. disabled size)
Level 1: Shape (e.g. rounded, square)
Level 2: Hover (e.g. hover shape)
Level 3: Active (e.g. active shape)
Level 4: Disabled (e.g. disabled shape)
Keep in mind that these are just a few examples, and there are many other
ways you could organize your design tokens using this structure.
The important thing is to choose an organization that makes sense for
your design system and is easy for your team to use.As you can see, there is no one naming convention, so the best can be to discuss with the developers what will work best. Maybe in the future, the chat will be able to analyze your code and give you a more specific answer.
Now let’s create a full token list
It’s time to give ChatGPT the job. Here’s what I wrote to get all the combinations:
Please write all the combinations I can have for this token structure:
Theme.Component.Type.Size.State.Color
The variants are:
- Theme: Dark, light
- Component: Button
- Size: Small, Medium, Large
- Type: Primary, Secondary
- State: Enable, Disable, Focus, Hover
- Color: Background, Stroke
For secondary color, use only the stroke variant.
For Primary color, use only the background variant.
Here is the list:
Note: If the chat didn’t complete the list, write “continue.”
Dark.Button.Primary.Small.Enable.Background
Dark.Button.Primary.Small.Disable.Background
Dark.Button.Primary.Small.Focus.Background
Dark.Button.Primary.Small.Hover.Background
Dark.Button.Primary.Medium.Enable.Background
Dark.Button.Primary.Medium.Disable.Background
Dark.Button.Primary.Medium.Focus.Background
Dark.Button.Primary.Medium.Hover.Background
Dark.Button.Primary.Large.Enable.Background
Dark.Button.Primary.Large.Disable.Background
Dark.Button.Primary.Large.Focus.Background
Dark.Button.Primary.Large.Hover.Background
Dark.Button.Secondary.Small.Enable.Stroke
Dark.Button.Secondary.Small.Disable.Stroke
Dark.Button.Secondary.Small.Focus.Stroke
Dark.Button.Secondary.Small.Hover.Stroke
Dark.Button.Secondary.Medium.Enable.Stroke
Dark.Button.Secondary.Medium.Disable.Stroke
Dark.Button.Secondary.Medium.Focus.Stroke
Dark.Button.Secondary.Medium.Hover.Stroke
Dark.Button.Secondary.Large.Enable.Stroke
Dark.Button.Secondary.Large.Disable.Stroke
Dark.Button.Secondary.Large.Focus.Stroke
Dark.Button.Secondary.Large.Hover.Stroke
Light.Button.Primary.Small.Enable.Background
Light.Button.Primary.Small.Disable.Background
Light.Button.Primary.Small.Focus.Background
Light.Button.Primary.Small.Hover.Background
Light.Button.Primary.Medium.Enable.Background
Light.Button.Primary.Medium.Disable.Background
Light.Button.Primary.Medium.Focus.Background
Light.Button.Primary.Medium.Hover.Background
Light.Button.Primary.Large.Enable.Background
Light.Button.Primary.Large.Disable.Background
Light.Button.Primary.Large.Focus.Background
Light.Button.Primary.Large.Hover.Background
Light.Button.Secondary.Small.Enable.Stroke
Light.Button.Secondary.Small.Disable.Stroke
Light.Button.Secondary.Small.Focus.Stroke
Light.Button.Secondary.Small.Hover.Stroke
Light.Button.Secondary.Medium.Enable.Stroke
Light.Button.Secondary.Medium.Disable.Stroke
Light.Button.Secondary.Medium.Focus.Stroke
Light.Button.Secondary.Medium.Hover.Stroke
Light.Button.Secondary.Large.Enable.Stroke
Light.Button.Secondary.Large.Disable.Stroke
Light.Button.Secondary.Large.Focus.Stroke
Light.Button.Secondary.Large.Hover.StrokeI was amazed at the results, it took so long to type all the combinations, and the chat did it so fast.
The process looks straightforward, but I made some mistakes, such as adding a ghost button that wasn’t needed since the ghost does not have a background or stroke. Therefore, iterations are necessary.
Make changes by continuing to ask the chat
Imagine now that you think you made a mistake and want to simplify the token and not use the size variable, no problem, ask it from the chat.
Can you eliminate the size variant from the tokens?
This is the result:
Before: Dark.Button.Primary.Small.Enable.Background
After: Dark.Button.Primary.Enable.Background
Do you want to change the Dot to Dash?
You can also ask the chat to change the Dot to Dash, for example:
Can you change the Dot to Dash?
This is the result:
Before: Dark.Button.Primary.Enable.Background
After: Dark-Button-Primary-Enable-Background
Do you want to change the letter case?
You can also play with it and ask for a change to lowercase, camel case, snake case, etc.
Can you change the words to lowercase?
This is the result:
Before: Dark-Button-Primary-Enable-Background
After: dark-button-primary-enable-background
What can you do more?
As you can see, in this test, I showed you how to create tokens, but I am sure that if you work with a developer, you will be able to create the JSON token files or maybe ask the chat to make the necessary changes to the code. Thus, I recommend you work with the developers to get the most out of the ChatGPT.
One more thing about design with AI
I am willing to take the risk and say that AI will play a more and more important role in our design work in the future.
For example, In the future, it won’t surprise me if we connect AI tools to our products, explain to the AI where the user is having trouble understanding the interface, and the AI will suggest to the product designer solutions.
Additionally, I believe this technology will help in the future to make some design tasks in Figma easier, like suggesting text styles and suggesting to change tokens values.
For example, the tool may analyze the designers’ confusion with some values, alert the designers from the design system team, and provide solutions. So be aware of it and take the time to study this new technology.
To summary
Throughout this article, I explained how you could create a token naming system for every design element in your design system.
Firstly, I explained that you should have a basic understanding of design tokens because ChatGPT can help you but not solve all your problems and for sure not make decisions for you.
Then I showed you how to talk to the chat to get information about the token structure. We also looked at how the chat can write a list of every design token you ask for.
In the end, I showed you how to change different elements in the token based on your needs, like changing the first letter of each value to lowercase.
Read more
Check out these great resources for more information about design tokens.
- A beginner’s guide to Design Tokens by Steve Dennis
- Design tokens — What are they & how will they help you? by Lukas Oppermann
- Naming design tokens by Lukas Oppermann
- Naming Tokens in Design Systems by Nathan Curtis
- How I name Design Tokens and Components by valentino baptista
- Design tokens by Adobe Spectrum
Thank you for reading the article. I hope the article helped you understand how you can use ChatGPT to build a design token naming system. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.
If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.
