UI Library

For Designer

The User Interface Library is packed with UI components. In this guide, you will learn how to access the library and find links to the tools you need to install.

For Designer
  • Essentials
  • Fundamentals
  • Getting the Tools
  • Getting started

Essentials

As explained in our Introduction Guide, the User Interface Library helps you design on-brand UI components more quickly and easily. It provides a single source of truth for user interface (UI) assets and code that drives more consistency across all touchpoints and speeds up development. You’ll find all the essential components for building websites, apps, and microservices for DHL touchpoints.

As a designer, you can access the library and take advantage of all the pre-approved UI components and use them in your projects and prototypes.

Fundamentals

Here’s how to access the library, use components from the library, and add new components to the library.

1. Get InVision DSM
You need InVision DSM to access the library. In the DSM, you can access all the documentation and code for each component. Inspect mode allows you to view and examine each one in detail.

2. Use library components
To use components from the library in your design, simply select them via the integrated menu in Sketch.

3. Add new components
It may be necessary to modify a component to meet your needs. If it can be used again and will be helpful for other designers, please add it to the library.

New components must be approved. You can do this by simply adding your component to Sketch. This will automatically trigger the approval process. Once the User Interface Library Team checks and approves your design, it will be added to the library and made available to everyone.

Getting the Tools

To use components from the library in your designs, you will need to have the appropriate tools. Below you will find links to all required tools. As a designer, you will utilize InVision DSM in Sketch so you can drag and drop components from the CRAFT plugin into your designs. With each new release of InVision DSM, it only takes one click to update your components to the latest version.

Install the following tools to get started.

Sketch-App

We use Sketch to build our websites, apps, and microservices. We also use Sketch to create a master file, which contains all the components from the library and is synchronized with InVision DSM. Sketch also documents all components and includes guidance to help new teams get started.

Visit Sketch

CRAFT-Plugin

The CRAFT Plugin is the interface between Sketch and the library in InVision DSM. The plugin allows you to apply styles and components to your designs easily. Once installed, you can synchronize your components in Sketch with the latest version in InVision DSM with one click.

Visit CRAFT

InVision DSM

InVision Design System Manager is where code and design come together. It is the platform that allows us to work together and in sync. You can use the components and styles as design or code snippets. To help you find your way around, you’ll find guidance for the individual areas as well as information to help new teams get started.

Visit InVision

Getting started

If you’re just getting started, make sure to review the Introduction guide and check out our Getting Started guide for the next steps. If you don’t find what you’re looking for there – or in the other related guides – use the contact information at the end of the Getting Started guide to get help.