Export Variables Formatter

About this plugin

English

Export Variables Formatter is a powerful Figma plugin that transforms design tokens and variables into various code formats. Select variable collections, choose from 25+ ready-made templates or create custom ones, configure naming conventions, and export to multiple file formats. Perfect for design systems, frontend development, and cross-platform projects.

How to use

Select variable collections from the left panel, choose a template or create custom one, adjust naming case and hierarchy settings, preview the output, then copy or download in your preferred format.

Русский

Export Variables Formatter — мощный плагин для Figma, который преобразует дизайн-токены и переменные в различные форматы кода. Выбирайте коллекции переменных, используйте 25+ готовых шаблонов или создавайте собственные, настраивайте соглашения об именовании и экспортируйте в различные форматы файлов. Идеально подходит для дизайн-систем, фронтенд-разработки и кроссплатформенных проектов.

Как использовать

Выберите коллекции переменных в левой панели, выберите шаблон или создайте собственный, настройте стиль именования и иерархию, просмотрите результат, затем скопируйте или скачайте в нужном формате.

Supported Formats & Features

Quick templates

1. Web: CSS Custom Properties, SCSS Variables, LESS Variables, Stylus Variables, JavaScript/TypeScript
2. Mobile: iOS Swift, iOS Swift UIColor, Objective-C, Android Kotlin, Android Kotlin Color, Android Java, Android XML Resources, Android Dimensions XML, Flutter Dart, React Native, Xamarin C#
3. Design Systems: Design Tokens JSON, Nested JSON, Figma Tokens, Style Dictionary, W3C Design Tokens
4. Other: Python, Rust, Go, C/C++

Naming Cases

camelCase, PascalCase, snake_case, kebab-case, UPPER_SNAKE_CASE, dot.case, path/case, Train-Case, COBOL-CASE, flatcase, lowercase, UPPERCASE

Export file format

JSON, CSS, SCSS, Less, JavaScript, Typescript, Swift, Kotlin, XML, Flutter, Figma Tokens, Style Dictionary, W3C Design Tokens

And

Preserve or ignore the hierarchy

Group code by level

Choosing of colors: hex, hex_no_hash, hex_short, hex_short_no_hash, rgb, hsl

Keywords for search

Figma plugin, design tokens, variables export, CSS variables, SCSS, LESS, JavaScript, TypeScript, Swift, Kotlin, Android, iOS, Flutter, React Native, design system, frontend development, color variables, spacing variables, typography variables, code generation, template system, naming conventions, hierarchy management, JSON export, mobile development, web development, cross-platform, design-to-code, token management, variable collections, custom templates, color formatters, RGB, HSL, HEX, naming cases, camelCase, snake_case, kebab-case, PascalCase, UPPERCASE, lowercase, grouping options, comment styles, preview mode, copy to clipboard, download files, design workflow, developer handoff