Plugin utilities to super charge your dev work for reablocks
- CSS Token Generator: Generate Reablock compatible json from Figma Style variables
-
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'``
- Go to the Figma design file where you want to use the plugin
- Use
CMD + pto 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
This plugin is built with Create Figma Plugin.
- Node.js – v18
- Figma desktop app
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
- In the Figma desktop app, open a Figma document.
- Search for and run
Import plugin from manifest…via the Quick Actions search bar. - Select the
manifest.jsonfile that was generated by thebuildscript.
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.
Official docs and code samples from Figma: