dev.designsystem

TODO

• Prevent .mjs/.js files generating for specific themes. \n
• Prevent empty files being generated if source is empty (rotify-web-typography.css for example). \n

What is it?

dev.designsystem is library that generates and distributes files to allow for consistent, cross-platform styling with a single source of truth. It utilises a Zeplin webhook to trigger the automated generation of new files when changes are published in Figma.

Here's a brief diagram of how it works:

Adding new themes

First, you'll need to fetch the styleguide ID from Zeplin. This is found in the URL of the styleguide you wish to add (the string between the arrows in the following link): https://app.zeplin.io/styleguide/--->601a924a5b25c52920c04s1f<---.

In the generate-themes.js file, you'll find a styleguides array containing a {name: styleguideName, id: styleguideId}. Add your own object following this convention to this array.

You'll also need to add the theme entry file into the vite.config.js file.

When the build command is next run, a mobile and web version of your stylings will be generated!

Setup

To install dependencies:

bun install

Bun is used as the package manager for this project. Most commands are like-for-like with npm so it should be intuitive to use.

Create a .env file in the root of the project, containing a the Zeplin personal access token:

# .env

ZEPLIN_ACCESS_TOKEN={ZEPLIN_ACCESS_TOKEN}

To generate files:

bun run generate

Caveats

Transforming a JSON object to stylings is a messy, imperfect process. Doing it for different stylesheet rules across different platforms even more so.

While future cases have been taken into consideration, the process of this conversion is relatively fragile. If you find mistakes in generated files, please feel free to update any transforms to accomodate your needs.