Designers' Guide

Learn how to start designing using the Nulogy Design System (NDS).

Tools and assets

Designers at Nulogy use:

  • Sketch as our design tool for creating high-fidelity mockups
  • Abstract for collaboration and version control of Sketch assets
  • IBM Plex as a Nulogy's sole typeface
  • NDS UI kit as a library of styles, symbols, and templates
  • Storybook as a component reference guide

Understanding NDS visual language

To be effective at using the Nulogy Design System designers should familiarize themselves with the basics of NDS visual language. The following articles provide a good starting point:

Designing with NDS

Starting a project

Creating a project in Abstract creates Sketch file and makes an initial commit to the master branch. By default, all projects are visible to all members of Nulogy organization. More about projects can be found here.

Creating a new project in Abstract animation

Linking NDS UI kit

To get access to NDS component symbols, and colour and layer styles you need to link the NDS-ui-kit.sketch library from the NDS project to your project. More about libraries can be found here.

Linking NDS UI kit in Abstract animation

Branching

Edits to Sketch files are done in the new branch that is created in Abstract. More about branching can be found here.

Branching in Abstract animation

Adjusting Sketch settings

It’s helpful to have Nudging settings and Grid settings adjusted to NDS’s spacing scale.

Adjusting Sketch settings animation

Working with NDS

Text styles

NDS text style animation

Symbols

NDS symbol animation

Layer styles

NDS layer style animation

Templates

Coming soon ...

Committing changes

To keep design updates traceable changes should be committed after each meaningful change. More about committing can be found here.

Commiting in Abstract animation

Merging

When the design is approved (Process TBD) it should be merged into the parent branch or master. More about merging can be found here.

Merging in Abstract animation