What is headless design system (HDS)

A design system is a commonly adopted approach for ensuring design consistency and facilitating communication between designers and developers.

What is HDS?

However, traditional design systems have their limitations, often requiring considerable time for adjustment when reused

Headless design systems is design systems that separate the logic required to create a component from its visual representation or store visual design attributes.

Essentially, you're creating blocks in your system that can be changed with "one simple click." By separating every blok that does not have a UI, you create an extremely flexible design system.

How to set up

Design tokens are all the possible values that a design system can have like colors, spacing, typography, styles, ….

Tokens have two of the most important advantages:

• They are easy to reuse and make sure you’re able to quickly create/change a design because of their flexibility
• It’s easier for developers to create the code based on the design because the tokens can be extracted into a JSON file

HDS is the system that we’ll define other token by a base value and increasing value

‍

Figma token studio is the plugging that I use to set up those token, but this is outside of Figma, it have it own limit about speed when we apply new change

‍

‍

Figma variable is the concept that base on token, with the variable value that are #number, #color and string and boolean, there are available to manage variable (token) within figma, but font attribute is not available, this I hope will be a new feature that figma will launch later (as announcement at congif 2023)

‍

Alias naming

Although it stores a design decision but the name of token doesn’t tell you where the token should be used, just like the hex code.

If one of the components that blue.default is attached to requires a color change, the developers would have to manually find all the instances of the components across the product to make the update.

Alias Tokens are context-specific, instead of referring to colors by what they are, you now ‘also’ refer to them by what they do.

When should we use tokens

Although Headless design system have many advantage, it also require to takes careful planning and some time to implement them in design and code

When to and when not to create an Alias Token?

• Create Alias Tokens only if it applies to a text, background, border, or icon,... across multiple pages.
• Do not create a token for a color that will be used only once throughout the product.
• As a simple rule of thumb, if you use a color in more than three areas across the product, you can consider making a token.

What to keep in mind when creating an Alias Token?

Set a naming convention

A naming convention that you can start with can be category.usage.component.variant

Provide as much context as possible

Give it as much context as possible

Use the Figma Tokens plugin and variable to maintain your tokens

Figma variable to take advantage of in app feature ,when it come to type face anh other style you think about brilliant plugin by Jan Six called Figma Tokens that allowing for these multi-level referencing

Maintain the same structure for styles in Figma

Use the same token structure and define your color styles on Figma. For example, an Alias Token named $colors.text.button.primary.active will be text/button/primary/active on Figma.