Getting Started - Design

Getting Started

1. Get the template
2. Sync libraries
3. Begin designing

Overview

Welcome to the Komodo Design System! To ensure that you have and know everything you need to start designing with Komodo, view all three tabs shown above.

Required software

To design with Komodo, you must have the most recent version of Sketch and Abstract installed. A Sketch license and Abstract account access are required.

Are you new to Abstract? Learn how we use Abstract.

Komodo Sketch template

The template includes layout guides for all breakpoint sizes that Komodo designers need. Learn how to acquire and apply the sketch template to your project by following this tutorial video (Contents in the video differ in appearance and display an older version due to recent updates). Alternatively, you can follow the instructions below.

Step 1

Acquire the Sketch template.

Click "Download Komodo Sketch template".
A zip file will start downloading on your Desktop (or Download folder).

Step 2

Create a new project.

Open Abstract.
On the top right corner, click the "New Project" button.
Fill out and select the required fields.
Click the "Create Project" button.

Step 3

Import the Sketch template.

Click the "Import Sketch File" button.
Select the Komodo Sketch template file from your Desktop.
Click the "Import" button.

Komodo Sketch template

Learn how to sync the Komodo Design libraries by following this tutorial video (Contents in the video differ in appearance and display an older version due to recent updates). Alternatively, you can follow the instructions below.

Step 1

There are two ways to find the Komodo Design Libraries. You can follow option A or B.

Option A

Click the "Download Komodo Design Library" button below.
A new page will open. On the top right of your browser, click "Open in Abstract for macOS".
Click "Sync to desktop".

Download Komodo Sketch library

Option B

Open Abstract.
Use the top right search bar to search for the word “Komodo”.
Under the search results, Locate “Komodo-TF-Libraries”.
Click the “Sync” button.

Step 2

After the library has synced, follow the steps below.

In Abstract, under your project, click on “Master”.
Click on the “Files” tab.
Click the “Add file” button.
In the drop-down menu, select “Link Library”. 4. In the list, find “Komodo-TF-Libraries”.
On the right panel, select the top option “TF-00-Guidelines”.
Hold shift on your keyboard.
Select “TF-Text styles". (All options in the right panel should be selected)
Click the bottom right button “Link 9 Libraries”.

Transitioning from 1.0 to 2.0

If you have not used Komodo previously, skip this step. Now that you have successfully linked the Komodo TF Library, learn how to safely transition by watching this video (Skip to the 30:20 mark). Alternatively, you can also read this Miro Board titled “How to transition from 1.0 to 2.0”.

Begin designing

Now that you have the Komodo Layout template and Libraries in your project, we will now cover what they are and how to utilize them while designing.

Komodo Layout

The Komodo Template includes layout guides for all breakpoint sizes that designers need. The layout is the framework for all visual elements on the screen. The guide is applied to every screen to achieve a consistent structure throughout the entire product. Tidy up your wireframes by aligning your content with the layout for each of your screens. Toggle the layout guide on and off with hot keys Control+L.

Refer to the Layout Guidelines to learn more about the Komodo layout.

Example image of the layout grid utilized for design spacing.

Using the libraries

You can access all symbols, text styles, and layer styles through the components panel. Komodo relies on overrides to edit the variations and states that a symbol can have. Komodo symbols are built to be flexible, so designers won't ever need to detach symbols from the library. Once a symbol is detached, you will no longer receive updates as they are released.

Learn how to efficiently utiliize the Komodo Design Libraries by watching this video (Skip to the 1:00 mark). Alternatively, you can also read this Miro Board titled “Komodo 2.0 Sketch Libraries".

Component classification

Components from the Komodo Libraries are organized into three groups. The three groups are called Atoms, Molecules, and Organisms.

Atoms are the building blocks of our design system.

Molecules are the group of several atoms.

Organisms are the complex entities consisting of the multiple molecules.

In Sketch, you will find Atoms, Molecules. and Organisms by clicking “Insert”, and they will be located underneath Symbols in the drop-down menu.

Icons

Komodo Icons will also be found under Symbols in the “Insert” dropdown menu.

Text styles

Text styles are based on the Typography Rules defined in the Komodo design system. Komodo Text Styles will be located under Text Styles in the “Insert” dropdown menu.

Layer styles

Komodo Layer Styles are predefined combinations of styling attributes to use on any shape in Sketch. You can access them in the Inspector underneath Appearance in the drop-down menu.

Version updates

Komodo releases new versions every other week. Look for the notification on the top right of the Sketch app for the latest updates. For in-depth information on versioning and the release schedule, view this Miro Board titled “Version Control.”

Questions

If you have any questions or concerns, join our office hours. For more information on office hours, view this Miro Board entitled "Office Hours".

      Wednesdays
      10:30 - 11:30 am PST
        1:30 - 2:30 pm EST