After so much experimentation and playing around with variables in Figma, thanks to chad, I think I finally found the most *efficient and easy* way to migrate existing component libraries from styles to variables. 🎛️⚡

By using the Styles to Variables Converter plugin, which specifically binds variables *back* to the original style definition, it's then super easy to take an existing design and by simply detaching all styles, you're left with *only* variables. 🙏

Using the Destroyer plugin will help make this all a bit faster, too, which allows you to select everything in a file and, with a click, unlink all styles—leaving only variables in use. ⚡

If you're curious to watch a more complex example, here's an entire tutorial from the @figma team: ✨

If you haven't already converted your libraries, IMO, this is the way. With just a few actions, hours of manual conversion is saved. 🙌

@figma @dotdude If you're looking for a plugin that handles modes and binds styles to variables once created, my plugin can help you ⚡️

@figma @dotdude I just watched that video today too! Makes so much sense

@figma @dotdude This will make life so much easier. Thanks for sharing

@figma @dotdude Quality investigation like always. 🥰

@figma @dotdude Thanks for surfacing — we’ll probably follow suit.

@figma @dotdude 🤜🤛