Syntaxer

About this plugin

Tired of manually formatting variable names for developers? Syntaxer is the tool to automate the process of applying code syntax to your Figma variables.

What you can do:

Choose from Presets: Instantly apply conventions for CSS, SCSS, Less, Android, iOS, or Tailwind.

Customize Everything: Define your own naming convention, prefixes, suffixes, and separators.

Control the Structure: Visually reorder and toggle scopes (like domain, context, element) by dragging and dropping to build the perfect variable name.

Preview in Real-Time: See exactly how your variables will look before applying any changes.

Apply in Bulk: Modify the code syntax for hundreds of variables across multiple collections and groups with a single click.

Bridge the gap between design and development and ensure consistency in your design system effortlessly.