UI Library

Introduction

We have developed the User Interface Library to ensure consistency across all user interfaces, facilitate reusability, and make maintenance and updates easier. In this guide, you will learn the basics and benefits of a user interface library and find examples and links to help you get started.

Introduction
  • Essentials
  • Benefits
  • Examples
  • Getting started

Essentials

A user interface library is a collection of user interface design elements – a single source of truth for user interface (UI) assets and code that drives more consistency across all touchpoints and speeds up development. It defines how each component (or ‘pattern’) behaves, what they look like, and how they are coded. It also facilitates the work of developers and designers, ensuring new teams can ramp up quickly.

In short: the User Interface Library helps you develop and design on-brand UI components more quickly and easily.

Benefits

Symbiosis of design and code

We used the InVision Design System Manager (DSM) to create the library. With DSM, we can document all components and styles and provide information for new teams to ramp up quickly.

Super fast and easy

Using the CRAFT plugin, you can integrate the components and styles from our library into your projects quickly and easily. Updates can be easily applied to all items.

Simple workflow

There’s no need to get used to a new routine. Use your standard workflow and leave the rest to us. Just like working on a regular app, all you have to do to release a new version is write your changes in a feature branch and open a pull request to master. Once approved, your new release is published.

Examples

The library gives you a basic set of the most important components and styles to build your UI. Here are some examples of the pre-approved and ready-to-use materials you can use to kick start your project.

Getting started

Once you’re ready to ramp up, 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.