Skip to content

This repo demonstrates how to use Figma tokens on web (with parsing from .json to .scss)

License

Notifications You must be signed in to change notification settings

FreeeeZ/rmr-figma-tokens-demo

Repository files navigation

r_m_r Tsk Figma tokens demo

Description

This repo demonstrates how does compiling tokens from .json files to .css or .scss

Design

Figma tokens explanation

Figma tokens determine

Tokens repo

https://github.com/arturuxui/rmr_tokens

Main deps

npm node vue typescript vite

Roadmap

  • Write script for get tokens from remote repository
  • Parse json tokens to css/scss
  • Markup example page for demonstrate changes into tokens
  • Setup Token transformer for correct parsing arrays
  • Make this repo auto update. Write git hook for figma tokens auto deploy when changes is available

Quick start

  1. Install all dependencies using yarn or npm install
  2. Start the development server using yarn dev or npm run dev
  3. Open up http://localhost:3000

How to get tokens

  1. Run script for get and parse tokens using yarn get-tokens or npm run get-tokens
  2. Open src/assets/tokens folder
  3. Profit!

License

MIT

Copyright (c) 2023, Shell Vladislav