Export Variables Formatter

EnglishExport 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 useSelect 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 & FeaturesQuick templatesWeb: CSS Custom Properties, SCSS Variables, LESS Variables, Stylus Variables, JavaScript/TypeScriptMobile: 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#Design Systems: Design Tokens JSON, Nested JSON, Figma Tokens, Style Dictionary, W3C Design TokensOther: Python, Rust, Go, C/C++Naming CasescamelCase, PascalCase, snake_case, kebab-case, UPPER_SNAKE_CASE, dot.case, path/case, Train-Case, COBOL-CASE, flatcase, lowercase, UPPERCASEExport file formatJSON, CSS, SCSS, Less, JavaScript, Typescript, Swift, Kotlin, XML, Flutter, Figma Tokens, Style Dictionary, W3C Design TokensAndPreserve or ignore the hierarchyGroup code by levelChoosing of colors: hex, hex_no_hash, hex_short, hex_short_no_hash, rgb, hslKeywords for searchFigma 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