Figma Variables Sync Plugin

A Figma plugin that syncs variables from external sources like Notion and Coda.

Features

  • Import variables from Notion or Coda
  • Automatically sync changes from external sources
  • Map external data to Figma variable collections and modes
  • Support for different variable types (colors, numbers, strings, etc.)

Project Structure

├── manifest.json           # Plugin manifest
├── ui/
│   ├── ui.html            # Plugin UI
│   ├── ui.css             # UI styles
│   └── ui.ts              # UI logic
├── code/
│   ├── main.ts            # Plugin main code
│   ├── api/
│   │   ├── notion.ts      # Notion API integration
│   │   └── coda.ts        # Coda API integration
│   └── utils/
│       ├── variables.ts   # Figma variables utilities
│       └── sync.ts        # Sync logic
└── README.md

Setup

  1. Install dependencies: npm install
  2. Build the plugin: npm run build
  3. Import the plugin into Figma

Usage

  1. Open the plugin in Figma
  2. Connect to your external data source (Notion or Coda)
  3. Map the external data to Figma variables
  4. Click "Sync" to import the variables
  5. Enable auto-sync to keep variables updated

Development

This plugin uses TypeScript and follows the Figma plugin API guidelines.

License

MIT