Back to Plugins
Variables & Styles List for Devs
Figma Plugin that lists all local variables as css variables.
code-generators
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.json
For JSON code generation, you can apply custom settings achieve the best result for your needs, such as:
- Unit settings
- Tab size
- Separate collections in single files
- Automatically abbreviate collection names
- Use dimensions for numbers
- Generate text values
Tokens.css
Custom properties, also knows as CSS variables, can also be customized:
- Unit settings
- Tab size
- Separate collections in single files
- Automatically abbreviate collection names
- Collection name prefix
- Custom prefix
- Show description as CSS comments
- Color 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 | 140 installs, 20 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.