Skip to content

Contribution

Learn how to contribute to Nebula.

Nebula is primarily maintained by the Design System Team, but is also open for contribution. To get an overview of what is being worked on and what is upcoming you can view the roadmap (opens in new window) .

This page outlines the general process and requirements for contributing new components - in order to request an improvement or report a bug, simply create an issue github (opens in new window) .

Those who don't have access to github can fill in the contribution form (opens in new window)  or reach out on slack (opens in new window) .

To add an insight (relevant information from studies and research) to the site, fill in the insight form (opens in new window) .

Process

A lot goes into creating components from scratch - from auditing and research to design and build. It's not expected that teams are able to provide everything, so the component creation process can be kicked off as soon as there is an idea for a component, and how best to proceed can be discussed as part of this.

The process generally consists of these steps:

  1. Ideation
  2. Kick-off
  3. Design
  4. Build
  5. Documentation
  6. Release

Ideation

First thing is to make sure the component fits the component criteria, then create an issue in github (opens in new window) , filling in the template. Discussion or requests for additional information can come to light in the comments.

For most components it's a good idea to complete an audit (opens in new window)  of some of our current front end journeys - this really helps know more about common uses, and if there are any special considerations around Web / Native / Figma.

Kick-off

Once the issue is created, it's a good idea to book in a quick catch up to agree who's going to do what - a team may be able to provide the React and React Native builds but needs some help creating the Figma component for example.

Kick-offs also help to make sure everyone is aligned on what the component does, and move onto design with everyone having a good idea of what to expect.

Design

Nebula components need to focus on user experience first - they should allow the user to do what they need to do quickly and in a way that is easily understood.

The components need to remain as brand agnostic as possible - we want them to be universal. This is where the audit can be helpful to know what are the common use cases and what are we trying to achieve.

Once the designs have been reviewed, building can start!

Build

Nebula components are available across three platforms: Figma, React, and React Native - all of these need to be built before release.

Separate PRs for React and React Native are preferred, you can read the developer docs (opens in new window)  to get a run down on the basics and help PRs go through swimmingly.

Documentation

Follow the documentation guidelines when writing documentation.

When adding documentation to the Nebula site, follow the instructions in the developer docs (opens in new window)  to run the site locally.

Make sure to include a screeenshot of the page in the PR.

Release

Once all platforms are ready to go and everything is documented properly, it can be put together into a release - the design system team will take it from here.