Design System Sync

About this plugin

🎨 Design System SyncExport Figma variables (strings, colors & typography) directly to GitHub with automated pull requests. Perfect for multi-platform mobile development. ✨ What It Does 🌐 Localization (Strings) - Export string variables in 30+ languages - Android XML (strings.xml) - iOS Localizable.strings - Flutter ARB files - Multi-mode support (English, Arabic, Spanish, etc.) 🎨 Design Tokens (Colors) - Export color variables as design tokens - Android XML (colors.xml) + Jetpack Compose (Color.kt) - iOS UIKit/SwiftUI color extensions with generated hex initializer - Flutter Dart colors (AppColors) with full ARGB support - Full RGBA support including alpha/opacity - 🌗 Light/Dark theming — export all color modes as separate files using {mode} placeholder ✍️ Typography (Font Styles) - Export text styles from Figma - Android Compose (Typography.kt) with custom font family support - Android XML (styles.xml) with fontFamily, textSize, fontWeight - iOS SwiftUI Font / UIKit UIFont extensions with proper custom font handling - Flutter TextStyle definitions with font family, weight, and line height - Complete font metric support: fontSize, fontWeight, fontFamily, letterSpacing, lineHeight 📱 Multi-Platform Export — NEW in v4.0! - Select multiple platforms at once (Android + iOS + Flutter) - Export everything in a single branch and pull request - No more running the export 3 times for cross-platform projects 🚀 Automation - Creates pull requests automatically - Updates multiple files in one commit - Configurable branch names and PR titles - Non-destructive branch updates — preserves existing PR review comments - Settings persistence for quick exports 💡 How It Works 1. Create string/color variables and text styles in Figma 2. Configure your GitHub repository (one-time setup) 3. Select export types: Strings, Colors, and/or Fonts 4. Select platforms: Android, iOS, and/or Flutter (multi-select) 5. Click "Load Variables" → "Export to GitHub" 6. Review the automated pull request 7. Merge and deploy! 🌗 Light/Dark Theme Support If your color variables have multiple modes (e.g., Light and Dark), add {mode} to your file paths: - values/{mode}/colors.xml → generates values/light/colors.xml + values/dark/colors.xml - Theme/Colors_{mode}.swift → generates Theme/Colors_light.swift + Theme/Colors_dark.swift - lib/theme/colors_{mode}.dart → generates per-mode Dart files Without {mode}, only the first mode is exported (backward compatible). 🎯 Perfect For ✅ Kotlin Multiplatform projects ✅ Android apps with Jetpack Compose ✅ iOS apps with SwiftUI or UIKit ✅ Flutter applications ✅ Cross-platform mobile teams ✅ Design system maintenance ✅ Multi-language applications ✅ Light/dark theme management 📦 Supported Platforms Android: - XML strings & colors - Jetpack Compose Color.kt & Typography.kt - XML styles.xml with TextAppearance and fontFamily - Kotlin Multiplatform ready iOS: - Localizable.strings - UIKit UIColor & UIFont extensions (custom fonts with fallback) - SwiftUI Color & Font extensions (hex initializer included) Flutter: - ARB localization files - Dart color theme with Color.fromARGB - TextStyle typography with font family support 🆕 What's New in v4.0 - 📱 Multi-platform export — select Android + iOS + Flutter and export all in one PR - 🌗 Light/dark theming — export all color modes with {mode} path placeholder - 🌿 Configurable branches — custom branch names and PR titles - 🔒 Non-destructive updates — existing branches updated via PATCH, not deleted - 🍎 iOS hex initializer — generated Swift code includes Color(hex:) extension automatically - 🍎 iOS alpha support — semi-transparent colors pass opacity/alpha parameter - 🍎 iOS custom fonts — Font.custom() preserves exact names; UIKit uses UIFont(name:size:) with fallback - 🤖 Android XML fontFamily — typography styles now include android:fontFamily - 🛠️ Modular codebase — refactored into 15+ focused modules with esbuild bundler - 🧪 86+ automated tests for reliability 🔐 Privacy & Security - Your GitHub Personal Access Token is stored locally in Figma - No data is sent to third-party servers - Only communicates with GitHub API (api.github.com) - Open source — audit the code yourself 🆓 Free & Open Source This plugin is completely free to use and open source under MIT license. GitHub Repo: Here Made with ❤️ for multi-platform development teams