Back to Plugins

Tokeno
Tokeno: Bridging Design and Code Seamlessly.
scssdesign tokensfigma plugindevelopment efficiencycode generationautomationdesign-to-codeworkflow optimizationtokenotypescriptlocal variablesuser interface
Plugin 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:
- Local Variable Extraction: Tokeno simplifies the process of gathering variable names and values directly from Figma's local variables collection.
- JSON Conversion: The extracted data is automatically formatted into JSON, ensuring compatibility and ease of use across different platforms and environments.
- 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:
- Download TS: This button enables users to instantly download the generated TypeScript (ts) file containing the extracted local variables in a structured format.
- 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
Version | 7 |
---|---|
Created | April 1, 2024 |
Last Updated | November 5, 2024 |
Category | ui-kits |
Creator | Pixolo Designer |
Stats | 60 installs, 26 likes |
Pricing | Free |
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
More Like This
Discover other plugins in the ui-kits category.