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.
Add the EF Circular font to your Font book.
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.
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.
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.
The EF UI Design Kit is available as a Shared Library under the EF Design organisation.
Guidelines for contributing to the project in Abstract:
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.
The core refers directly to the core of GUD. Everything we do in digital inherits this.
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.
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.
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.
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.