Repository files navigation

A tool for generating theme files from Figma design tokens.

This tool helps you generate Handsontable theme files from Figma design tokens. It works in conjunction with the mainHandsontable repository.

• Node.js version 20 or higher
• Access to Figma with design tokens
• A local clone of theHandsontable repository

1. Export design tokens from your Figma project:

   • Find the Design Tokens Plugin

     • Search for Design Tokens in the Plugins & Widgets section of Figma.

   • Open the Plugin and Select Export

     • Launch the Design Tokens Plugin.
     • Click Export Design Token File.

   • Adjust Export Settings

     • Deselect all Include types in export options, except for Figma Variables.
     • Click Export to save the JSON file to your computer.

   You can find the instructions in theDesign System in Figma, under the "Create Custom Theme" tab.

2. Set up the theme generator:

   • Clone this repository
   • Place the exportedtokens.json file in the root directory

3. Generate theme files:

   • Runnpm start to generate the theme files
   • The generated.scss files will appear in the/output directory

4. Build and use the theme:

   • Copy the generated.scss files from/output
   • Paste them into the Handsontable themes directory at:handsontable/src/styles/themes/utils/[theme-name]/_variables.scss
   • Build the project and include the generated CSS files from thehandsontable/styles directory in your application.

   If you've created a new theme, you also need to create a corresponding icon packhandsontable/src/styles/themes/utils/[your-theme-name]/_icons.scss:

   Alternatively, you can use an existing icon pack. To do so, simply replace@use "utils/[your-theme-name]/icons"; with, for example,@use "utils/main/icons"; in your[your-theme-name].scss file.

© 2012 - 2025 Handsoncode