Resources · User guides

Introduction for Developers

Everything a developer needs to start using and contributing to the design system: the tools, the access you need, local setup and the ticket workflow.

About

The ECO Design System gives Swedol and Tools one shared way to design and build. Three tools work together.

  • Storybook is where components are built, tested and shown live. Each component has variations to try and code to copy.
  • Figma holds the design library: variables and UI components for prototypes and designs.
  • This documentation explains when and how to use each foundation and component, with guidelines, specifications and code.

Together they keep design and code in step, so every digital platform looks and behaves the same.

Getting started

Prerequisites and access

Before you begin, make sure you have access to these tools.

ToolUsed forAccess
GitHubThe code, for local development: alligo-eco-design-systemRequest access to the repository.
ChromaticHosting and review of Storybook buildsAdmin access is required. Ask a team admin for an invite.
JiraThe project board: tickets and swimlanesRequest access to the project board.
ConfluenceGeneral documentation, workflows and credentialsRequest access.
StorybookBrowsing and testing componentsUse the UAT environment.
DocumentationGuidelines, specifications and design tokensThis site.

Setting up locally

Follow the setup instructions in the README file to run Storybook on your machine.

README
alligo-eco-design-system/README.md

Builds are automatic. When a working branch is merged into UAT or production, the environment is built and deployed to Chromatic, where the latest version can be viewed. Chromatic access is granted by an admin: log in at chromatic.com.

Public UAT branch: https://test-acceptance--67b6063b450f52d85d87d37f.chromatic.com/

Workflow and tickets

Branching follows the main system workflow: a working branch from develop, a merge request, code review, UAT test and customer test, then merge. The ticket name depends on the type of work.

New featureDesign system component
Jira swimlaneStandard ticket“Design System Components”
Branch namefeature/AE-2247/drawer-sliderfeature/EDS-2234/drawer-slider-component
Reviewed inThe main system, on UATChromatic and Storybook only

New feature

Use this when a feature depends on the design system. Example: a new text area in a div that uses a Storybook button. The div and text are created in the feature, and the button is imported from Storybook.

It is a two-part process. First create the component in the “Design System Components” workflow. Then include it in the standard ticket, which is reviewed as a whole.

Design system component

The steps:

  1. Create a working branch from develop. When finished, make a merge request to staging.
  2. Code review. Once approved, merge the working branch into the test/acceptance branch and push it to the remote.
  3. An automatic build publishes the latest test/acceptance work.
  4. Review and test on UAT (Storybook).
  5. Once approved, merge the working branch into staging.

The main system then syncs automatically with the Storybook git repo (develop branch), and the styles become available in the main system.