Skip to content
Mesh

Design

Designing digital products and services that utilise nib's design system Mesh can help to make your work easier, allowing you to create less new work by following established design patterns and leveraging our Mesh UI symbol library.

Our philosophy

Our design principles underlie the way we do design at nib.

Resources

Playroom

Playroom allows you to simultaneously design using the Mesh react components across a variety of themes and screen sizes.

Open playroom

Sketch library

Sketch app icon

The Sketch library is produced directly from Mesh React components. The library contains both symbols and text styles.

Add Sketch library

Storybook

Storybook app icon

Storybook is a sandbox where you can explore Mesh design system components.

Open Storybook

Design Tooling

Following is a list of tools that we use to help to produce design artefacts and products:

Abstract

Abstract app icon

We store our design files in Abstract. Abstract is like Github but for design. Please email the Design Ops team for access. Once you have access you'll find our design files here.

InVision

InVision app icon

We use InVision to create and share design prototypes. We also use Craft — the utility from InVision that helps manage design between Sketch and InVision.

Miro

Miro app icon

Miro allows designers to create high level user flows. The Sketch to Miro plugin allows designers to upload and sync artboards quickly.