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 account you can sign in to in a browser. There is no key to copy: the plugin signs itself in.
Import your variables
Install the plugin
Install the UI Rules plugin from Figma Community.
Run the plugin
In the Figma file that holds your variables, run Plugins → UI Rules and click Connect to UI Rules. The plugin shows a short code and an Open UI Rules button.
Approve the code
Open UI Rules in your browser, sign in if you are not already, enter the code, and choose the brand the plugin may import into. The plugin window connects on its own once you approve, so there is nothing to paste back into Figma.
A code is good for one use and lasts ten minutes. If it runs out, start again from the plugin for a fresh one.
Pick your collections
Back in the plugin, pick the variable collections to import and preview what will change.
Like every import, nothing is written blind: you preview everything in the plugin before anything lands in the brand.
The plugin writes to the brand, so every project inherits what it imports. Approving the code creates a key for it, named Figma plugin, carrying only the permission to import tokens into that brand. It shows up on the brand's API keys page like any other, and you revoke it there when you are done.
