Figma Plugin

1. Install the plugin

Open Figma and go to Main menu → Plugins → Browse plugins in Community. Search for “ReframeUI” in the Figma Community and click Install. The plugin is free to install. Each designer who uses it needs a consumer seat ($2.50/month) on your ReframeUI account to authenticate.

2. Connect your account

Open the plugin panel in any Figma file (Plugins → ReframeUI) and click Sign in. You'll be redirected to complete the OAuth flow in your browser. Once connected, your list of design systems appears in the plugin panel.

Select the design system you want to link to this Figma file. The link is stored in the file. Other editors of the same file will see the linked design system automatically.

Agencies: Each client's Figma file connects to that client's isolated design system, not a shared one. Select the correct client workspace when connecting.

3. What gets synced

When you pull from your design system, the plugin syncs:

• •Token values: All colors, spacing, typography, and radii appear as Figma Variables in your file.
• •Token modes: Each mode (light, dark, high-contrast) maps to a Figma Variable Mode.
• •Component structure: Component variants are mapped to matching Figma component properties where possible (e.g., a Button with variant: primary | secondary maps to a Figma variant property).

4. Sync workflow

The plugin has two sync directions:

The “Sync to ReframeUI” flow creates a named branch in Studio. You can then review the diff, merge to main to publish, or discard.

5. Known limitations

• •Component behavior is not synced. Event handlers, state logic, and interaction behavior live only in code, not in Figma. Only visual tokens and component structure are synced.
• •Animation tokens are not yet supported. Duration, easing, and transition tokens will be added in a future release.
• •Complex component slots. Components with rich slot compositions (nested components, icon slots) map approximately to Figma layers. Manual refinement may be needed.