A set of elements for building design systems. It is designed to speed up
and simplify all routine work when creating a design system.
Figma version coming soon.
Design System Starter Kit is made for Sketch. When you
download the kit file and open it, here are your steps:
Copy artboards from
Starter Kit to your file
Fill in your data and
add the ones you need
Create symbols and design tokens based on your system
The Starter Kit just show you how it might look. Because you will still have to change them in your design system — it's harder to do than creating styles from scratch in your system.
You will copy artboards with buttons and inputs to your system, change their styles, and only then create symbols. It's more effective than changing existing symbols made by someone.
The Starter Kit is a manual, checklist and a set of prepared elements
that exist in almost any system, so you just need to fill in your data.
Generally, yes. One of the principles of the Starter kit is that all sizes and scales are based on css unit 1rem, which is equal to the line spacing of the body font size. All sizes and dependencies are based on this unit. This approach makes the system systematic. If the system you are designing uses a different approach, you can customize the Starter Kit to suit your needs, because it is a complete system approach.
The changing is harder than creating. Each project is unique, as well as each design system for it. Only the approach, principles and sets of base elements for system building can be unified. This is exactly what the Starter Kit is. That's why the Starter Kit does not contain ready-made tokens and symbols.
You can apply values, scales, sizes by creating your own CSS & HTML framework, or by using some already existing one. The best solution is to look at the Superkube Framework made by us. It was designed and created so that you can quickly write HTML and CSS code based on the design system.