Get started with Headless Design Systems

• What is a headless design system
• How to make a headless design system
• Advantages
• Conclusion

What is a headless design system

A headless design system may appear complicated or overwhelming at first, but once understood, it all becomes peanuts.

Headless design systems are design systems that separate the logic required to create a component from its visual representation (for more information on a "normal" design system, see this article). You could say it's a system that will generate a user interface without having its own.

So, 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 do you create a headless design system and what tools are most useful

The best or easiest way to start is to list all of the components you believe you'll ever need (which will be many) and categorize them according to the atomic design system principles.

Colors, for example, will be in the smalles group. They serve as the foundation for your design system.

If you're working in Figma, a great tip I can give you is to use "Auto layout." Because you don't have to manually adapt everything, it makes designing a design system at least ten times easier.

A little more on "Auto layout" and its benefits. Working with "Auto layout" allows you to create a quick design while never having to worry about spacing or working pixel perfect without pinching your eyes, sounds like a dream, doesn't it? To work with "Auto layout," you must first group certain of your components; once this is done, you only need to set the measurement once and it will be pixel perfect forever (unless someone messes with the settings).

Now I hear you wonder, “not all design systems need the same measurements”. That is correct, which is why we used a plugin to help us centralize all of our design elements.

This is another very useful tip I want to share with you, the plugin I’m talking about is called “Figma tokens”. It centralizes all your design possibilities and allows you to completely change a design with a few clicks. After you set the whole plugin, all you have to do is select your component and put the style on it.

With this plugin you’ll be able to customise everything. Once you've created a blank template, you can duplicate it keep on using is (you don't need to use this app and can achieve the same result in Figma as well, it's just easier and faster).

Advantages

Like I’ve stated before, by providing your design system with no UI, you create a very flexible system that allows you to copy-paste it for every single one of your clients, systems,... that requires a design system. Because you've already built the backbone, you'll have a completely customized design system in minutes.

Another significant advantage is that it is very easy to work with; if anything needs to be adapted, added, or deleted, it is very simple to do so without compromising other components.

Conclusion

A headless design system is a step in the right direction for any kind of web designer. It broadens your horizon and gives you room to grow if you work within a larger company, or have a growing need for expanding your skills as time goes on. There are also numerous other reasons (as mentioned above) for utilizing the functionality of a headless design system, so the real question is: why not?