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 | 176 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.
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.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code