Reablocks Figma Plugin

About this plugin

Reablocks Figma Plugin

Plugin utilities to supercharge your dev work for reablocks (an open-source repo containing a set of enterprise UI components for React).

Features

CSS Token Generator: Generate Reablock-compatible JSON from Figma Style variables

CSS Token Generator Usage

Pre-requisite

You should have style created for all colors that you want to use in the project

You should use the following naming convention to assign style property to your colors

E.g.: 'Primary', 'Brand', 'Primary/100', 'Brand/title black 100'``

# Running Plugin

- Go to the Figma design file where you want to use the plugin

- Use `CMD + p` to open quick menu

- Search for new plugins using "Find More plugins option" and search for "Reablocks Figma Plugin"

- Once found, click on run plugin, it will open a popup

- Click on "Generate CSS"

- Click on "Copy CSS"

- Use the copied CSS tokens to your project

Development guide

Check the readme file @ https://github.com/reaviz/reablocks-figma-plugin/blob/main/README.md for dev contribution guidelines