The paths I use to organize variables in Figma don't always match each platform's naming conventions. I built Syntaxer to configure and preview those conversions, then save them to Code Syntax. This preserves the structure of the Figma file while preparing names for web, iOS, and Android.
Platforms
Preparenamesforeachplatform.
I used variable paths as the starting point for writing platform-specific names into the Code Syntax fields shown in Dev Mode.
color/background/primary
Webvar(--color-background-primary)
AndroidcolorBackgroundPrimary
iOSColorBackgroundPrimary
Rules
Refineandtestnamingrules.
I let users select and reorder path levels, replace words, and preview the result before applying changes. Variable names in Figma stay untouched.
Presets
Startfromaready-madeconvention.
I added six presets that populate casing, prefix, separator, and suffix. Every value can still be adjusted.
CSS variablesvar(--color-background-primary)
SCSS / Sass$color-background-primary
Less@color-background-primary
Tailwind CSSbg-primary
AndroidcolorBackgroundPrimary
iOS (Swift)ColorBackgroundPrimary
Output for color/background/primary
Replacements
Adaptwordsandcasing.
I added substitutions such as bg for background and camelCase segment handling to match code conventions.
Word replacementbackground → bgcolor/background/primary→ var(--color-bg-primary)
A transformation of color/background/primary that leaves the original Figma name unchanged.
Web · CSS
var(--color-background-primary)
Android
colorBackgroundPrimary
iOS
ColorBackgroundPrimary
Implementation
HowIbuiltit.
Work directly with Code Syntax
I used setVariableCodeSyntax to save platform-specific syntax. The plugin works with local variables, loads no external resources, and supports keyboard navigation.
