Design Starter Kit Guide
The set is built on the principles of the atomic system. Thanks to pre-prepared guides and symbol structure, it helps you to create projects as quickly as possible. And with the help of well-designed styles, you can easily customize the pack for your project
This guide will explain how to work with this set.
First of all, make sure that you can see a page list in the left panel. If you don’t have the list, click on the Expand icon.
There will be six sections, but we’ll cover the most important of them:
- Setup page
- UI Starter Kit
- Illustrations Starter Kit
- Skeleton Starter Kit
1. Customize Colors and Typography
Switch to the Setup page. Here you can adjust the system’s visual style.
We used Shared Styles for each element. All styles are interconnected, and it’s easy to readjust the project according to your needs.
- Go to Customize Fonts artboard
- Select all text styles you want to change
- Change font in the right panel
- Then click on the appearance tab and press to update all text styles
The same process is with color styles. You can change each detail, shadows, colors, outlines — we set the whole system so you could customize design up to your needs
Also, it’s straightforward to change the logo:
- Go to Logo artboard
- Paste your logotypes in color and white versions inside this artboards
- Setup resizing constraints, pin to the left and fix size
- Logos will be changed across all system
2. UI Starter Kit
We built this set on the principles of an atomic system. It’s a massive library of symbols that we used for creating components
Of course, each detail has resizing constraints.
Nested Symbols and Overrides:
Each element that is used several times is made through symbols. Use overrides to customize symbols.
3. Illustrations Starter Kit
It’s a set with illustrations. We divided them into Items, Objects, Scenes, and Background artboards.
You can use elements separately, together or create your scenes like this:
Another thing that all premade scenes are built with symbols, so it’s easy to make changes with overrides
4.Skeleton Starter Kit
It’s the third pack of elements that are waiting for you in this kit — Skeleton Starter Kit. Do you need to design loading page before all UI elements appear on the screen? We got ya!
By changing the primary UI colors and updating styles, skeleton screens will be updated too, which means that you will always have an actual looking version