Back to Plugins
Variable Syntax

Variable Syntax

Batch update variable syntax for web, Android, and iOS

Plugin Preview

Variable Syntax preview

About this plugin

Variable Syntax is a Figma plugin that simplifies the process of formatting design tokens and variables for different platforms. This tool allows you to convert variable names into various formats such as camelCase, PascalCase, snake_case, and kebab-case — in a circular manner, so you can easily switch between them. It supports web, Android, and iOS platforms, enabling quick and consistent syntax generation for each platform. Whether you're working with CSS variables for the web or adapting variables for mobile, this plugin helps streamline your design-to-development workflow.


Key Benefits:


  1. Save time by updating multiple variables in one click
  2. Keep variable syntax consistent across platforms
  3. Preview the changes live before applying


  1. Cross-Platform Support – Supports Web, Android, and iOS.
  2. Multiple Syntax Formats – camelCase, PascalCase, snake_case, kebab-case.
  3. User-Friendly Interface – Simple and intuitive controls.
  4. Design Token Management – Organize and format variables consistently.
  5. Platform-Specific Code Generation – Generate code for Web, Android, and iOS.
  6. Variable Collection Support – Format groups of variables in collections.

  7. Live Syntax Preview – See changes in real-time before applying.

  8. Undo/Redo – Track and revert changes easily.
  9. Batch Formatting – Format multiple variables at once.
  10. Efficient Workflow Integration – Streamlines the design-to-development process.

Plugin Details

Version1
CreatedAugust 19, 2025
Last UpdatedAugust 19, 2025
CategorySoftware development
CreatorTom Barrett
Stats0 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none