figma-variables-manager
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
A Figma plugin that syncs variables from external sources like Notion and Coda.
- 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.)
├── 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
- Install dependencies:
npm install
- Build the plugin:
npm run build
- Import the plugin into Figma
- Open the plugin in Figma
- Connect to your external data source (Notion or Coda)
- Map the external data to Figma variables
- Click "Sync" to import the variables
- Enable auto-sync to keep variables updated
This plugin uses TypeScript and follows the Figma plugin API guidelines.
MIT