Back to Plugins
Gene UI Tokens Hub

Gene UI Tokens Hub

The Gene UI design system tokens hub plugin to keep aligned tokens between design and development

variables to jsonvariables to tokentokens generatortokens plugintokensvariables exportstyle dictionarygithub integrationdesign systemvariables design system

Plugin Preview

Gene UI Tokens Hub preview

About this plugin

Gene UI Tokens Hub

Streamline your design-to-development workflow with Gene UI Tokens Hub, a Figma plugin that connects your design system tokens to your GitHub repository.


Key Features

  1. Sync Figma variables and explore them using JSON tree and variable collections filters
  2. Connect to GitHub and push changes to your style dictionary package
  3. Generate CSS3 and JavaScript variables from your design tokens


Benefits

  1. Automate the process of converting tokens into code
  2. Ensure consistency across your design system, design, and development teams
  3. Save time and reduce errors during the sync process of tokens


How it Works

  1. Install the Gene UI Tokens Hub plugin in your Figma account
  2. Make changes in Figma built-in variables and use it in your design styles
  3. Open the Gene UI Tokens Hub, and connect your GitHub repository to the plugin
  4. Review your changes and push them to your GitHub repository, where your style dictionary package will be generated

Plugin Details

Version6
CreatedJune 3, 2024
Last UpdatedSeptember 27, 2024
Categoryui-kits
CreatorHamik Hambardzumyan
Stats13 installs, 4 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    We use various external endpoints.

  • Editor Types:
    figma
  • Allowed Domains:
    • *