@baysidepoc/tokens

Design Tokens POC

This Tokens are originated in Figma and exported as code into this repository using the 'FigmaTokens' plugin.

Using Tokens in other JS projects (React, Storybook, etc.)

Install dependency

npm i @baysidepoc/tokens

Use inside a component:

import { colors } from "@baysidepoc/tokens";

style={{backgroundColor:`${colors.red100}`}}

---

Updating Tokens Step by Step

1. Figma Tokens

Make changes in Figma using the Figma Tokens Plugin, be sure this repo is connected in settings section.

Name: baysidepoc Tokens
Personal Access Token: <personal token>
Repository: baysidepoc/tokens
Default Branch: main
FilePath: figma/figmaTokens.json


Note: get your unique access token from https://github.com/settings/tokens

2. Push changes to repo

Inside FigmaTokens window, click on 'Push changes' , write a commit message and assign it to a branch with a customized name (it can be any name). Create a Pull Request, get that PR merged into main.

Then pull your changes into your local environment

git pull

3. Prepare for NPM

The tokens sent by Figma need to be compiled in a format that can be used by NPM, run the followign script:

npm run build

4. Update NPM

1. Bump Version

//Be sure that all files are comitted in git
npm version <versionNumber>

2. Be sure you are logged in inside the terminal (not just the browser)

npm login

2. Publish to NPM

npm publish --access public

3. Update in Storybook (or any other app)

npm i @baysidepoc/tokens

---

Contributing

Clone code from repo:

git clone [e-mail]:baysidepoc/tokens.git