UI Design Kit

Getting Started

Follow these steps and you should be all set to start speeding up your workflow and designing on EF brand.

Installing the EF UI Design Kit

Step 1: Download the latest UI Design Kit

The UI Design Kit zip includes two files: the UI Design Kit Sketch file and the EF Circular font. Make sure to save the Sketch file in a safe place where you can easily find and replace it.

EF UI Design Kit
Our EF Design system
Step 2: Install EF Circular font

Add the EF Circular font to your Font book.

EF Circular Font
Our EF Font
Step 3: Import sketch library

Open Sketch and import the UI Design Kit as a library in Sketch. Do this by going to Sketch > Preferences > Add library > Choose UI Design Kit Sketch file. Now you will be able to access the UI Design Kit in Sketch documents from the insert menu.

Step 4: Start designing!

Symbols from the UI Design Kit can be added to your designs by selecting “Insert” in the Sketch toolbar and choosing the UI Design Kit symbol library.

Step 5: Don’t forget us..

Remember to come back and check for updates. To update your library download the latest UI Design Kit and replace the file on your computer with the latest version. You will then automatically receive a notification about the updates in the top right corner in Sketch.

*Note to Abstract users:

The EF UI Design Kit is available as a Shared Library under the EF Design organisation.

Learn more about adding libraries to Abstract projects

Guidelines for contributing to the project in Abstract:

  • Branch off Dev to propose any changes/additions.
  • Do not merge into Dev before your work has been approved.
  • NEVER merge Dev into Master.

UI Design Kit Anatomy

The UI Design Kit is based largely on the principles of Atomic Design. The key idea of this methodology is that small – atomic – parts, can be combined into larger component structures. Components can be combined into layouts which can then serve as the foundation for templates and full pages. Learn more about Atomic Design

If you want to learn more about using Sketch, Sketch has a great support section worth visiting.

1. Core

The core refers directly to the core of GUD. Everything we do in digital inherits this.

2. Structure

These are structural principles and patterns our digital designs should live by. This includes spacing, the grid system for responsive web design and accessibility guidelines.

3. Atoms

Atoms are the smallest building blocks of our design system. Atoms cannot be divided into smaller parts without losing use. Atoms include: Text styles, UI colors, buttons, tags, links, icons, surfaces and form elements.

4. Components

Components consists of a group of atoms. A group of atoms can be combined in different ways to create unique components suitable to your needs. Components include: Form groups, cards, breadcrumbs, accordions, carousels, full-width images and pagination.

UI Design Kit & Product libraries

Product specific libraries can live as extensions of the core EF UI Design Kit in Sketch. Sketch can link styles across libraries in nested symbols. This means you can create a library of product specific components that utilising the atoms and styles that exist in the EF UI Design Kit.

To link styles across several libraries make sure you have both libraries installed when using the linked libraries.

Download the latest EF UI Design Kit
EF UI Design Kit
Our EF Design system