Design Starter Kit Guide
Apr 28 · 4 min read

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:

  1. Setup page
  2. UI Starter Kit
  3. Illustrations Starter Kit
  4. Skeleton Starter Kit

1. Customize Colors and Typography

Change typography:

  1. Select all text styles you want to change
  2. Change font in the right panel
  3. 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:

  1. Go to Logo artboard
  2. Paste your logotypes in color and white versions inside this artboards
  3. Setup resizing constraints, pin to the left and fix size
  4. Logos will be changed across all system

2. UI Starter Kit

Of course, each detail has resizing constraints.

Nested Symbols and Overrides:

3. Illustrations Starter Kit

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

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

Thank you!

👉 Preview and Download

🔥 Design Tools

Written by

Free and premium design tools.