This plugin is your new best friend for managing variable scopes in Figma. It's designed to help you quickly filter, search, and modify the scopes of your local variables without breaking a sweat.
- Filter variables by type: Whether you're looking for NUMBER, COLOR, STRING this plugin's got you covered.
- Search like a pro: Need to find a specific variable? Just start typing, and the plugin will show you matching results in real-time.
- Bulk scope changes: Want to change the scopes for multiple variables at once? No problem! Select the variables you want to modify, choose the new scopes, and voila!
- Quick overview: Get a bird's-eye view of all your variables, their types, and current scopes in one convenient list.
- Fire up the plugin
- Choose the variable type you want to work with
- Use the search box to filter the variables you want to edit
- Apply new scopes.
It's that simple! This plugin is perfect for keeping your variables organized and your workflow smooth. So go ahead, give it a spin, and take control of your Figma variables like never before! 🚀
☕️ Buy me a coffee (https://buymeacoffee.com/lazerbach)
Variables everywhere Quickly scan your selection for variables you actually forgot to apply (It's free)
Brutal A super light-weight plugin to remove, detach styles, variables etc (It's free)
This plugin is built with Create Figma Plugin.
- Node.js – v20
- Figma desktop app
To build the plugin:
$ npm run build
This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.
To watch for code changes and rebuild the plugin automatically:
$ npm run watch
- In the Figma desktop app, open a Figma document.
- Search for and run
Import plugin from manifest…via the Quick Actions search bar. - Select the
manifest.jsonfile that was generated by thebuildscript.
Use console.log statements to inspect values in your code.
To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.
Official docs and code samples from Figma: