Development

Install dependencies:

Start the Design System preview server and open http://localhost:8080 in your browser:

Creating a new component

  1. To create a new component boilerplate, install Hygen code generator globally and run the generator:
  1. Add the component to the index export file src/index.ts:

Publishing changes

The Design System monorepo uses Changesets workflow for managing changes and publishing the packages. To tag your changes to be included in the changelog run npm run changeset in the root of the Design System repository. Follow the instructions to tag which packages have been changed, do the changes require a major or minor version bump and the notes of the changes made.

Linking locally

For testing the changes locally it's usefull to try your changes locally. Here's an example for linking the design-system library to the cloud front-end project.

Synchronize theme variables with Figma

The source of color tokens for the Design System are located at the Figma Styled & Typography token document.

To synchronize these tokens with the codebase:

  1. Install the Figma plugin under Plugins > Development > Import plugin from manifest...
  2. While at the token document, run the newly installed Sema4.ai Design Tokens plugin
  3. Copy paste the token values to the Design System theme

Synchronize icons with Figma

The icons used in Design System based designs are located at the Figma Icons document. To synchronize these icons with the codebase, follow these steps:

  1. Create an ./icons/.env file with your Figma API access token:

  2. Run npm run sync-icons in the ./icons package directory to start the sync process.

  3. Although the icons are synced automatically, it is advised to check the newly added icons visually on light and dark themes by running the Design System locally. If any visual deffects exist - they need to be fixed in Figma first and icons resynced again.

  4. Optionally if you want to sync Iconic icons (necessary only if new icons are requried from the Iconic set that are not present already) – download the Iconic Pro icon set, unzip the set and add the path to svgs folder to ./icons/.env file and re run the sync command: