Variables & Styles List for Devs
Figma Plugin that lists all local variables as css variables.
Plugin Preview
About this plugin
This plugin allows developers to lists all local variables and export them to JSON as a tokens.json file or CSS with custom properties.Tokens.jsonFor JSON code generation, you can apply custom settings achieve the best result for your needs, such as:Unit settingsTab sizeSeparate collections in single filesAutomatically abbreviate collection namesUse dimensions for numbersGenerate text valuesTokens.cssCustom properties, also knows as CSS variables, can also be customized:Unit settingsTab sizeSeparate collections in single filesAutomatically abbreviate collection namesCollection name prefixCustom prefixShow description as CSS commentsColor value type (hex, rgb or hsl)Generate text values
Plugin Details
| Version | 15 |
|---|---|
| Created | July 3, 2023 |
| Last Updated | January 15, 2024 |
| Category | Software development |
| Creator | Sebastian Hösl |
| Stats | 173 installs, 25 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:{"main": "main-ui/index.html", "settings": "settings-ui/index.html"}
- main:code.js
- Editor Types:dev
- Allowed Domains:
- none
- Codegen Languages:
- CSS custom properties (variables)(css)
- tokens.json(json)
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.