As a developer, you are working on version 1 of your library. You already have a product and it is functioning (kind of). But the interface there is not componentized. Let's fix it.

By this time, you should already have a list of components to implement, aligned with your team. At this step, your final goal is to create a set of components for your future product. Focus on the Storybook, don't change the product yet. However, you can copy-paste the styles from the product.

Updating design tokens

If you want to sync with the design library, build Figma tokens. You will use in components and product pages. The tokens are exported from Figma in one click with Design Tokens plugin. Once you got design-tokens.json file from your designer, put it to design-system/tokens/design-tokens.json.

Under the tokens' hood

The exported is not very convenient for development, so we process it with the help of Style Dictionary. You can see the result in design-system/src/tokens/dist/. These are the the files that will be imported into the components. You don't have to change anything there, but it is good to know how these things work.

Adding new component

Quickly add component template files:

yarn add-component <ComponentName>

For example, if you run yarn add-component CheckoutForm, a new folder with two new files will be created at design-system/src/components:

• CheckoutForm/
  • index.js
  • CheckoutForm.stories.mdx

Note. When you add the component, it gets re-exported in the library index file, which is design-system/src/index.js. If you want to rename or remove a component, don't forget also to change there.

What do I code?

Check https://component.gallery/ to get ideas on how to fill your component with code.

Creating visual references

Note. Creevey requires Docker to be installed.

To keep the system consistent, you should always provide visual references for your components. This will make automatic testing work smoothly. This is how you can do it:

1. Run the testing UI with yarn test:creevey:ui
2. Run the tests and examine the results
3. Noticed the inconcistency? Fix and run the tests again.
4. There is a change but you were expecting it? Approve.

If you created a new component, or visualy changed the existing one, it will always go with the change of their visual references. Notice the changes files in design-system/tests/referenceImages, add them and commit. It is a good habit to include your visual references in your pull request. And it ensures the tests automation.