Back to Plugins
Code Syntax Generator
Streamline design to code workflows with platform-specific naming for your design tokens
Plugin Preview
About this plugin
This plugin allows you add / remove code syntax to Figma variables in seconds. Streamline design to code workflows by automatically generating platform-specific design token names that matches your codebase.
Features:
Normalize token name with proper naming convention
Custom Template System per collection + platform
- Add prefix/sufix with custom format and characters
- Use or omit parent hierarchy on token naming
Preview your design tokens
- Display 10 variables from the selected collection
- "Preview All" loads complete collection list
Remove code syntax from variables in collection
Plugin Details
| Version | 5 |
|---|---|
| Created | December 11, 2025 |
| Last Updated | December 20, 2025 |
| Category | Software development |
| Creator | Cristian Morales |
| Stats | 12 installs, 7 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
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.