Import Figma variables with the UI Rules plugin
The UI Rules plugin reads the variables in a Figma file and imports them as your brand's design tokens. It is the path for teams whose tokens live in Figma rather than in CSS, and it is separate from the Figma Make connector, which serves your brand to Figma Make's AI.
It works on every Figma plan, and imported variables become the brand's design tokens, light and dark modes included.
Prerequisites
- A Figma file that holds your variables.
- A UI Rules connection key with the
token:importpermission. The plugin writes to the brand, so when you create the key, keep Full access selected.
Import your variables
Install the plugin
Install the UI Rules plugin from Figma Community.
Copy your key
In UI Rules, open Connect your AI tools on the project overview, pick Figma, and create the key with Full access selected.
Run the plugin
In the Figma file that holds your variables, run Plugins → UI Rules, paste the key, and pick the variable collections to import.
Like every import, nothing is written blind: you preview everything in the plugin before anything lands in the brand.
