https://github.com/vivek-nexus/variables-inspector-figma-plugin

Debug your variables in designs and prototypes. The missing DevTools for Figma variables.
https://github.com/vivek-nexus/variables-inspector-figma-plugin

devtools figma figma-plugin figma-variables prototyping

Last synced: about 2 months ago
JSON representation

Debug your variables in designs and prototypes. The missing DevTools for Figma variables.

• Host: GitHub
• URL: https://github.com/vivek-nexus/variables-inspector-figma-plugin
• Owner: vivek-nexus
• Created: 2024-03-28T15:17:47.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-14T05:36:00.000Z (8 months ago)
• Last Synced: 2024-06-14T07:48:26.114Z (8 months ago)
• Topics: devtools, figma, figma-plugin, figma-variables, prototyping
• Language: JavaScript
• Homepage: https://www.figma.com/community/plugin/1355055910166329140
• Size: 49.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Variables Inspector

**Debug your variables in designs and prototypes. The missing DevTools for Figma variables.**

https://www.figma.com/community/plugin/1355055910166329140

![image](https://github.com/vivek-nexus/variables-inspector-figma-plugin/assets/26523871/6f7cc93e-896b-44b0-87ce-8995c495a2fe)

---

## What is this plugin for?

Using complex variables and logic in Figma, but can't find a way to debug when things don't wok as expected?

Variables Inspector will show current values of variables as an overlay on every frame. The inspector works in both design and prototype modes. You can quickly see and isolate what is going wrong and make changes to fix them.

---

## Instructions

1. Open the desired page and run the plugin (file should contain at least one variable, no pranks please!).

2. Choose the variable collection you would like to inspect and click Show Inspector.

3. Plugin will add Inspector to all the frames in the current page, listing the variables and their current values.

4. Added Inspector is visible in prototypes as well and will update in real-time, when variable values change.

5. Go debug that pesky variable that is driving you nuts.

6. Close the plugin when you no longer need the Inspector.