Before we get into talking about Supernova Cloud, let’s discuss what actually are design tokens. If you’re looking to build a design system especially for an organization, then you would need to maintain consistency in your designs which are in line with your organizational goals. All organizations now a days look to have a consistent design while promoting their products and services.
A consistent design can range from common color themes, fonts to UI/UX. Design systems therefore are critical to your branding. The most critical part of any design systems are design tokens which can be pacing, color, typography, object styles, animation, etc. — represented as data.
Getting Started With Supernova Cloud
Supernova helps you build, mature, and scale your design system with ease. From powerful documentation to efficient design data management, it’s the ideal end-to-end platform that grows with your design system. So, here’s a look at how the system works.
Supernova has both free and premium plans. If you’re looking to just try it out, go with a free plan. The free plan will obviously come with limited features, but it’s a good starter plan.
Once you have signed up, you can start exploring Supernova right way. If you use Figma, you can add it as a datasource and you’re good to go.
I personally don’t use Figma since I don’t do lot of design stuff. However, if you’re a Figma lover, then Supernova can be a really good Design Token Management System for you.
Exploring Supernova
1. Tokens –
You can quickly get started with creating tokens. You have the option of selecting colors for both your base theme as well as your dark theme. Selecting colors is as easy as clicking a button. Depending on it’s usage you can select the type of Token Set – Core, Semantic or Component.
2. Components –
Similar to tokens, you can create designs for your components. You create components and connect them to your Figma component. You can also add references to your documentation and repository.
Documentation
Documentation is as critical as creating the tokens themselves. Both designers and developers should be aware of the use of each tokens. Documentation is a pretty simple process in Supernova. You go over to the Documentation section and just start writing. Some pre-made templates are already provided for your convenience.
You can add documentation for components as well as resources.
In case of components, you can add Design, Usage & Code. The Code section can be especially helpful for developers who are looking to integrate the design tokens in their code. Supernova provides a React Render Code block to display a live demo like the one you see below.
For resources, you have the option of embedding a Figma file or a generic external content.
Why You Need Design Tokens
The need for Design Tokens stems from the fact that the digital user base is growing at an exponential rate that too across multiple platforms. Gone are the days when people used to visit your website only through their PC. You therefore need to have design tokens in place which will cater to your customers across multiple platforms – PC (Windows, MacOS, Linux), Smartphones (iOS, Android) and Web applications.
With so many platforms, you will have different product teams for each of the platforms. Design tokens allow product teams to better collaborate and ensure brand consistency across any platform. I found a great article online which explains the need for design tokens in a very simple manner. Check it out here.
Here’s how an ideal design tool which makes use of design tokens can look like as per the linked article.
So to sum it up, design tokens are important if you’re looking to maintain brand consistency across multiple platforms. It serves as an important collaboration tool between designers, developers and the marketing team.
So, make sure to check out Supernova Cloud.
