---
title: "Import Figma variables with the UI Rules plugin"
description: "Install the UI Rules plugin from Figma Community and import your variable collections as brand design tokens, light and dark modes included."
label: "Figma plugin"
date: "2026-09-07"
---

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](/docs/connect/figma-make), 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

<Steps>
<Step>
### Install the plugin

Install the UI Rules plugin from Figma Community.
</Step>
<Step>
### 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.
</Step>
<Step>
### 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.
</Step>
<Step>
### Pick your collections

Back in the plugin, pick the variable collections to import and preview what will change.
</Step>
</Steps>

Like every import, nothing is written blind: you preview everything in the plugin before anything lands in the brand.

<Callout type="info">
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](/docs/workspace/api-keys) page like any other, and you revoke it there when you are done.
</Callout>

## Related

<Cards>
  <Card title="Importing styles" href="/docs/styles/importing-styles">The other ways token values get into a brand.</Card>
  <Card title="Figma Make" href="/docs/connect/figma-make">Serve your brand to Figma Make's AI instead.</Card>
</Cards>