Ghost Variables in Figma
Ghost Variables in Figma
Do you experience feelings of dread in Figma files while working with Variables that should be dead? If you answered "yes", you might be dealing with Ghost Variables haunting your Figma files.
Hi Designer 👋
Sam I am here 🫶
Confession time. I don't love scary movies, but I love a design system horror story. There's something about listening to how other people overcome their struggles that makes me feel less alone.
It's spooky season where I live in Toronto, Canada 🇨🇦 While most of the people I know are talking about haunted houses and binge-watching scary movies, I've been listening to horror stories from Designers in the Tokens Studio community about their Ghost and Zombie Variables in Figma.
Ghost Variables are like that one ex who keeps showing up in your Facebook memories – they're technically gone but somehow still haunting your life (or, in this case, your Figma file).
These Dead Variables can sometimes impersonate your current "Live" Variables, making it difficult to work with your published component libraries. Some folks have even reported issues publishing or working with Figma's API when they couldn't locate where the Ghost Variables were hiding.
At this point, I've come to terms with the fact that I've entered my Semi-Professional Ghostbusting Era, but I'm hoping that by sharing what I know about these Variables that just won't die, you will be armed with everything you need to tackle your own haunted Figma files.
This guide will cover:
Ghost vs. Zombie Variables: Understanding the undead variables haunting your Figma files
5 Signs Your Figma File is Haunted (and How It Got That Way)
Pro Tips from Community Ghostbusters
What is a Ghost Variable?
The community has adopted the term "Ghost Variables" to represent the Variables that should have disappeared when you deleted them. Yet somehow, they're popping up in your Figma files, causing confusion and making you question your sanity.
You'll find these spooky remnants of your past mistakes in the most inconvenient places. Pay close attention to where your Ghost Variables are haunting you, as they provide valuable clues on which approach you should try to banish them from your Figma file.
If you are lucky, one of the pro tips from our community Ghostbusters will do the trick. If not, you may have a case of Zombie Variables.
Ghost vs Zombie Variables
Ghost Variables are like poltergeists – they're annoying but manageable with the right tools and knowledge.
Zombie Variables are the final boss of variable problems. These are the ghosts that just won't go away.
Zombies are much more difficult to deal with than Ghosts, often resulting in moving away from your haunted house and starting a new life elsewhere.
When Ghost and Zombie Variables start to make you question your sanity, your Figma file is officially haunted and its time to channel your inner Ghostbuster!
5 Signs Your Figma File is Haunted
Do you experience feelings of dread in Figma files while working with Variables that should be dead?
If the answer is yes, you might be dealing with Ghost Variables. Here are the most common ways to identify if your Figma file is haunted and how it got that way.
1. Phantom Mode Selection
The Sign: You can select Variable Modes in the layers property panel that no longer exist.
The Scene: You've deleted your Variable modes. Maybe even moved or removed all Variables from your Figma file. There are no Styles with Variable references to be found. Yet there they are, haunting you forever.
In this image, the top half shows the Figma UI with Ghost Variables indicated by the hexagon icon ⬡ in the right-side panel, also known as layers properties. The bottom half does not have the variables icon. In both images, no visible variables are attached to colors or spacing.
2. The Doppelganger Effect
The Sign: You have duplicate Variable Modes with identical names in the layers property panel.
The Scene: You've been refining your Variable Collections over time, finally getting them just right. But when you select a Variable Mode, you see double or triple or the same options. It is as if you are haunted by every bad decision you've made simultaneously, like when several of your exes end up at the same party, and you realize they all kind of look like your date.
In this image from a Figma forum community member, you can see three Variable modes named Theme. 👻👻👻
3. The Haunted Hangover
The Sign: Your design elements have a mysterious "Used Variables" section in the layers property panel.
The Scene: You've been importing components from various sources – maybe a shared library, maybe a community file. Suddenly, there's an unexpected "Used Variables" section in your layer options, like a pair of ridiculous sunglasses you find the morning after a party. You vaguely remember trying them on but have no idea who they belong to, why you brought them home, or what you should do with them now.
In this image from a Figma forum community member, there is a Variable Mode called “ColorToken” under the section called “Used variables”.
4. The Publishing Poltergeist
The Sign: Some components refuse to publish when you're trying to update your component library.
The Scene: You confidently hit that publish button, only to find some components stuck in limbo. No obvious issues, no broken variables – just components that refuse to cross over to the published side.
5. Haunted House Demolition In Progress
The Sign: You've been moving components to new Figma files and seriously considering rebuilding components from scratch.
The Scene: You are so frustrated with the unexplained issues in your Figma file that you have run out of hope. You can't get rid of your Ghosts, so you have convinced yourself it's best to demolish the haunted house and start fresh.
How Your Figma File Gets Haunted
Like any haunted house, there are multiple ways your Figma file can become possessed by ghosts. Here are the most common scenarios of paranormal activity reported by the community.
1. The Variable Identity Crisis
Cause: Modifying, deleting, and recreating Variables, Modes, or Collections in the same Figma file can make you feel like a teenager in their goth phase.
You have 15 black T-shirts that look identical, but somehow they all fit differently, and none of them are quite right.
What Happens: When you delete and recreate Variables, Figma assigns new IDs to the new variables but hangs on to the memory of the old Variables just in case you need them later. When the deleted variables are still attached to a design element in your file, the ghost of that Variable remains.
In this image from a Figma forum community member there are two Variable Modes called “Value” in the middle of the menu visible after they had been deleting and recreating Variable modes.
2. Hidden Layer Hide and Seek
Cause: Hidden layers masking broken Variable connections are like Casper the Ghost playing hide and seek, but they're really good at hiding and being annoying until you find them.
What Happens: Figma doesn't show properties of hidden layers of a design element in the properties panel, creating perfect hiding spots for Ghost Variables.
Just like in a haunted house, the only way to find all your ghosts is to look at every layer, one by one, and see if you can spot the Ghosts in the properties panel. This can be especially tricky for number variables applied to spacing and sizing properties as its not obvious if the variable is dead or alive.
In this post, a Figma forum community member had to look as deep as invisible masked layers to find where their Ghost Variables were hiding.
3. The Bulk Action Blindspot
Cause: Bulk actions don't affect hidden layers. It's as if you had the Ghostbusters come in to perform an exorcism, but their proton packs can't reach the ghosts hiding in the closet because the door is shut.
What Happens: When you perform a bulk action on design elements with multiple layers to detach all deleted variables, any hidden layers are ignored.
Your Ghost Variables are still lurking in hidden layers to cause duplicate modes and "used variables" chaos.
In this post, a gem of a human shared this pro tip that their bulk actions didn’t apply to hidden layers. Thank you Yeazey for saving me (and countless others) so much time and frustration! 🫶
4. The Library Transplant
Cause: Using design elements from another library is like receiving a transplant; you hang on to the spiritual residue from the host.
What Happens: When you copy or paste components from another library, you're not just getting the design element. Your file gets all the Variable and Style connections as well.
Even after deletion, these connections linger in your Figma file (version history) forever.
In this Figma forum thread the conversation confirms that importing design elements from Community UI Kits in Figma (iOS and Material UI) might leave you vulnerable to Ghost Variables. One strategy is to paste these components in a file away from your primary working file so you can cleanse them of any Variables that could haunt you later.
5. The Orphaned Instance
Cause: Component instances in your file after the source component has been deleted causes any "orphan" instances to be haunted by the Variable Ghosts of their dead parents.
What Happens: Deleting a main component or variant doesn't automatically detach its Variables in the process.
The only way to exorcise the Ghost Variables from orphaned instances is to resurrect the deleted component and detach any variables from the source.
This image is just one of many Figma forum posts I found that confirm orphaned component instances will continue to haunt you until their parents have been restored.
Pro Tips from Community Ghostbusters
Now that you've come to terms with living in a haunted Figma file, it's time to channel your inner Ghostbuster!
I've compiled every tip and trick I could find across Figma forums, Reddit, and the Tokens Studio Slack community, starting with the simplest solutions and ending with the "heavy machinery" approach.
Figma's Quick Action Exorcism
The amazing support people at Figma who reply to their community forums suggest this as the first line of defence for removing Ghost Variables.
I tested this personally, and it worked pretty well!
This image highlights the quick actions menu when it’s open with “variables” typed in the search bar.
In your haunted Figma file:
Select all elements on your page
Open the Quick Actions menu
Mac: ⌘ Command / or ⌘ Command P.
Windows: Control + / or Control + P.
Type "variables"
Select "Reset variable modes in selection."
Wait for Figma to process
Open the Quick Actions menu (⌘/Ctrl + P or /) for a second time
Type "variables"
Select "Detach deleted variables."
Wait for Figma to process
Repeat these steps on each page of your Figma file.
Once this process is finished, close your Figma file, wait a few minutes and reopen it. Your freshly Ghostbusted file needs a moment for the spirits to cross over to the other side fully.
Remember, bulk actions don't apply to hidden layers. So you'll likely still have a few Ghost Variables playing hide and seek on you!
If you want a walkthrough, Miggi from Figma has a quick video on how the "Detach deleted variables" part of this process works.
Selection Seance
If the idea of searching through your entire file layer by layer to look for ghosts makes you want to throw the whole file in the bin, don't worry, I got you!
You can select small groups of elements and take a quick peak at Figma's layers properties panel. If you see the dreaded "Used Variables" section, you know you've got more ghosts to bust.
For me personally, this still feels like a lot of work, so I've been using Tokens Studio's deep inspect feature to find variables quickly.
Tokens Studio Plugin for Figma
This approach works on the free Tokens Studio for Figma licence in files where you may not be using Tokens Studio for Design Token management.
This image highlights the Tokens Studio plugin UI alongside the Figma UI in the steps described below.
Launch the Tokens Studio Plugin
Select some of your design elements
Navigate to the Inspect page of the plugin
Ensure Deep Inspect is selected.
Scan the list in the plugin for Variables (look for the ⬡ symbol)
If you see Variables that are suspicious use the actions on the right to
See the layer names where those variables exist.
Select all layers where that variable is applied.
With all the layers selected, you can use Figma's design panel to detach the variables as needed manually.
Like the step above, after you've detached your variables, close your Figma file, wait a few minutes and reopen it to give your components a moment to recover from your Ghostbusting session.
Here’s a video walkthrough of this process with the extra bonus at the end of me struggling to select a radii variable to try and detach it. 🤬
Plugin Powerups
If you are thinking, "Ghosts, that's cute. I'm clearly surviving a Zombie apocalypse over here." it's likely time to bring in some external help.
Remember, just like in the Ghostbusters movies, sometimes you need to cross the streams (use multiple plugins together) to handle particularly stubborn hauntings.
In this post from a Figma forum, this community member describes what its like to survive a Zombie Variable apocalypse.
Select Layers Plugin
This plugin allows you to enter a partial or complete layer name, and it selects all layers that match.
If you have an idea of where your Zombie variables are hiding, you can use this plugin to select them all at once.
🔗 Select Layers Plugin - Figma Community
Variables Vision Plugin
Like an EMF detector for your Figma file, this plugin shows exactly where variables are being used.
Helps identify Zombie variables that Figma claims exist, but you can't see so you can take action on them.
🔗 Variables Vision Plugin - Figma Community
Instance Finder Plugin
Like a ghost trap for multiple instances, this plugin locates and selects all instances of a component at once.
Perfect for when you need to perform a mass exorcism on orphaned component instances.
🔗 Instance Finder Plugin - Figma Community
Detach Variables Plugin
The bigger and better Ghostbusting point-and-shoot tool for when Figma's native solution just isn't cutting it.
🔗 Detach Variables Plugin - Figma Community
Destroyer Plugin
The last step before you go to more drastic measures is the Destroyer plugin. Some of the Tokens Studio community members who have tried this plugin for Ghostbusting reported it may also remove Tokens at the same time.
Proceed with caution.
🔗 Destroyer Plugin - Figma Community
Apply Variable Plugin
This plugin from the Tokens Studio team allows you to batch-apply Variables with the same name or values.
So once you've rid your haunted file of all it's ghosts and zombies, you can quickly re-apply the proper variables to your components.
🔗 Apply Variables Plugin - Figma Community
Here’s a Figma forum community member post sharing their success story with combining several plugins and the Figma native solution to clear their haunted file of all Zombie Variables. Thank you sedatckir for sharing!
📸 Image source - Figma Forum
Still living in a haunted house?
There are many reports of folks in the Tokens Studio slack community who have tried all of these steps and plugins and were still dealing with haunted Figma files. They have some additional tips to share that you won't find in public forums.
Create a new Figma file
Sometimes, Figma's version history hangs onto old variable connections, and for some reason, it just won't forget it.
By creating a new Figma file and cut + paste your components to the new file, it frees up the version history and forgets the memory of old Variables.
🔗 Figma's guide to moving published components
Pro tip - Figma's docs have a toggle at the bottom to select which UI you are using. Be sure you have the right selection based on your haunted Figma file
Manually replace nested component instances
If you've been using the swap instances feature to replace deprecated components and you are seeing Zombie's related to the old component, try manually replacing the nested component instead.
There's something about "swapping" to a new component that hangs onto the old variable information, leading to a Zombie apocalypse situation.
Admit defeat and rebuild
Sometimes it takes more time and effort to survive a Zombie Variable apocalypse than it does to move away and build a new life elsewhere.
The only surefire way to ensure you don't have any lingering connections to the Ghosts of your past is to rebuild your components in a new Figma file.
Be sure you don't bring in any pieces from another library, especially a community file or design system library.
When rebuilding, if you keep all of your Variables in the same Figma file, you are less likely to be possessed by Ghost Variables in your new house.
This is heartbreaking, time-consuming, and drastic, but it's the only option that is 100% effective.
In closing
Haunted Figma files are no joke. These horror stories are what motivate me as a freelancer working on a white-label design system to avoid working with Variables until I hand over the files to the client.
When components are built with Design Tokens using Tokens Studio in Figma, its just a couple of clicks to swap to Variables or Styles with Variable References.
🔗 Read the Tokens Studio Guide on Variables for more info.
However, I realize not everyone can totally avoid living in a haunted house 100% of the time, so I'm always here to help channel my inner Ghostbuster when the community needs a hand.
🫶 Sam I am Designs
Sources
Figma Forum Links
Reddit thread
A special thank you to all the folks in the community who are constantly helping each other out! I’ll leave some honorable mentions here but truthfully, I’ve been compiling this info for the last 2 years and lost a lot of the messages along the way.
Luke Emmerson
Katie Cooper
Chris Kerr
Jyrmid MacCormack
Wolf Benz
The rest of the Tokens Studio team who helps support our community while they are ghost busting and listens to me complain about how annoying Zombie and Ghost Variables are year round.
I laughed out loud many times reading this... hahahah... not only informative but very funny... clever stuff Sam :)
Saving this article in my Readwise, thank you!!
And OMG... I thought I was going insane with a "ghost variable" that had popped up in my Wireframe Kit. The craziest part was that it was a MODE, not just a color or similar. And that mode didn't even exist in my Local Variables. Turned out to be some "bug" Figma said, that got "copied" from an old instance/component. I had to go through all instances that had touched that or had it nested, and manually reset props. 🫠 Wish I knew about the "Reset variable modes in selection" command.
Thanks again Sam! 🫶
P.S. TIL that ⌘ + P opens "Quick Actions" as well! I've been using the OG ⌘ + / until now, and then realized ⌘ + K works too. 3 hotkeys for it! 😆