Figma plugin converts design styles into variables.

Variables are now available! Hurray!

Stop manually adding all your styles; instead, use this plugin to spend more time playing with aliases, modes, and updating your design system components.

Only compatible with Color styles (solid and transparent).

How to use it:

  1. Open the plugin
  2. (Optional) Choose a name for your new collection
  3. (Optional) Use first-level of groups to create modes
  4. (Optional) Link styles to the variables created
  5. Click “Convert Styles into Variables”
  6. And voilà!

If you want to split your color styles across modes, please move your file from your drafts to a paid external team, or upload it to a team in another organization.

If you need help on anything, I wrote a dedicated guide with the most asked questions about the plugin ↗︎, please have a read before adding a comment to the plugin page.

UI & UX design inspiration for mobile & web apps.

orbs




Get Fountn

Pro friends get unlimited Figma conversions, bookmarks and collections.

Free Forever

$0

1 Figma conversion/day

5 collections

15 bookmarks

Limited access to new features

Current Plan

Fountn Pro

$6

Unlimited Figma conversions

Unlimited collections

Unlimited bookmarks

Full access to new features

Upgrade to Pro

You've reached your free limit. Upgrade for unlimited access.