Reablocks Figma Plugin

Plugin utilities to super charge your dev work for reablocks

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 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 Tokens"
• Click on "Copy Colors" to grab all of color tokens
• Use the copied tokens in your project's color palette
• Click on "Copy Themes" to grab all of your design tokens for your theme
• Use the copied tokens in your project's theme

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v18
• Figma desktop app

Build the plugin

To build the plugin:

npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Open Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples