Back to Plugins
Tokeno

Tokeno

Tokeno: Bridging Design and Code Seamlessly.

scssdesign tokensfigma plugindevelopment efficiencycode generationautomationdesign-to-codeworkflow optimizationtokenotypescriptlocal variablesuser interface

Plugin Preview

Tokeno preview

About this plugin

Overview:

Tokeno is a versatile Figma plugin designed to streamline the conversion of local variables into usable code snippets. With Tokeno, designers can effortlessly extract variable names and their corresponding values from Figma's local variables collection. The plugin then transforms this data into JSON format, offering seamless integration with development workflows. Moreover, Tokeno facilitates the conversion of JSON data into TypeScript (ts) and SCSS files, optimizing the transfer of design tokens into code.


Key Features:

  1. Local Variable Extraction: Tokeno simplifies the process of gathering variable names and values directly from Figma's local variables collection.
  2. JSON Conversion: The extracted data is automatically formatted into JSON, ensuring compatibility and ease of use across different platforms and environments.
  3. Code Generation: Tokeno empowers users to effortlessly convert JSON data into TypeScript (ts) and SCSS files, streamlining the transition of design tokens into development-ready code.


User Interface:

Tokeno boasts an intuitive user interface featuring two prominent buttons:

  1. Download TS: This button enables users to instantly download the generated TypeScript (ts) file containing the extracted local variables in a structured format.
  2. Download SCSS: With a single click, users can download the generated SCSS file, facilitating seamless integration of design tokens into SCSS-based projects.

Plugin Details

Version7
CreatedApril 1, 2024
Last UpdatedNovember 5, 2024
Categoryui-kits
CreatorPixolo Designer
Stats60 installs, 26 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://cdnjs.cloudflare.com
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com