Most Design System Kit on the internet contains a lot of premade components. We don’t believe that’s what you need.
Pre-made components are often a pain to work with and rarely fit the exact requests of your client. Pre-made components don’t make sense. We propose the following.
We noticed every project starts with 80 hours of Design System Preparation work. This is: defining typography, whitespace, a color overview, the grid, setting up basic atoms such as buttons and forms, and so on.
Why? Because that will result in a more consistent design, a better-looking design, and happier developers & clients.
The interesting thing: these little details in your design system rarely change throughout different designs or even different projects. So why not start with a starter kit that contains this?
We took the time to create a starter kit, which you can use every time you start a project. It’s beautifully designed and creates an amazing starting point for any project. But most importantly, we noticed developers love to work with this file, it speeds up their workflow, and the stuff they build will look a lot more like what you designed.
After 10+ years of design experience and over 4+ years of working with design systems (yes, that’s since the very start of the design system concept), we combined everything we learned in this single file. Ready for you to pick up and start working with.
Hope you love working with this as much as I do.
Mark
Art Director
____________________________
Pages in the Figma file:
1. Design System Setup: What a design system is, and how the file is set up.
The Atoms
2. Typography: Fifteen well-designed artboards provide an overview of typography for desktop, tablet, and mobile screen sizes.
3. The Grid: Eight artboards explaining the grid for this design system. Defined for 6 different screen sizes.
4. Colors: An pretty overview of the colors used in this design system. Easy to change.
5. Whitespace: Thee slides explain the use of whitespace with an overview of allowed whitespace.
6. Icons: A set of 13 common icons.
7. Interactive: Buttons, Fields, and Dropdowns, set up according to the latest Figma features.
8. Photography: An example of how we prefer to set up a photography direction in Figma.
Molecules:
9. Molecules: An overview of the molecules used in this file.
Organisms:
10. Organisms: An overview of the organisms, combined with a clean and neat layout for organizing all your organisms, according to a smart naming system. This part if pretty unique and will be something you won’t find out there in other kits.
____
Update version 1.6 (2023)
1. Changes a few grammar mistakes.
2. Made some copy shorter and therefore easier to understand.
3. Updatet the “how to change the colors” section in an attempt to make that easier to follow.
4. Updated the grids, which contained a few minor mistakes.
5. Added breakpoints to the grid to provide more design flexibility.
6. Updatet the Grid Style names to make it clearer when to use which.
7. Named unnamed layers.
8. Fixed a bug with the form fields.
9. Used variants to combine mobile and desktop molecules/organisms.
