Una ruta como color/background/primary puede funcionar en Figma y necesitar otra forma en CSS, Android o iOS. Hice Syntaxer para configurar esa traducción y guardarla en Code Syntax, conservando los nombres del archivo de diseño.
Plataformas
Unaruta.Cadaplataforma.
Syntaxer lee las rutas de tus variables y escribe en Dev Mode el nombre que espera cada plataforma.
color/background/primary
Webvar(--color-background-primary)
AndroidcolorBackgroundPrimary
iOSColorBackgroundPrimary
Reglas
Armarlareglacontusconvenciones.
Los niveles de la ruta se seleccionan y reordenan, y las palabras se sustituyen sin renombrar la variable en Figma. La vista previa muestra el resultado antes de aplicarlo.
Presets
Seispresets.Unclic.
Cada preset completa la convención, el prefijo, el separador y el sufijo. Puedes cambiar cualquiera después.
CSS variablesvar(--color-background-primary)
SCSS / Sass$color-background-primary
Less@color-background-primary
Tailwind CSSbg-primary
AndroidcolorBackgroundPrimary
iOS (Swift)ColorBackgroundPrimary
Resultado para color/background/primary
Reemplazos
Formascortas,mayúsculascorrectas.
Cambia palabras largas por las que usa tu código, como bg en lugar de background, y separa bien los segmentos en camelCase.
Reemplazo de palabrasbackground → bgcolor/background/primary→ var(--color-bg-primary)
Ejemplo de transformación de color/background/primary, conservando el nombre en Figma.
Web · CSS
var(--color-background-primary)
Android
colorBackgroundPrimary
iOS
ColorBackgroundPrimary
La implementación
Cómoloconstruí.
Trabajar sobre Code Syntax
El plugin usa setVariableCodeSyntax para escribir la sintaxis de cada plataforma. Trabaja con variables locales, funciona sin recursos externos y permite recorrer la interfaz con teclado.
