Figma Variables Not Showing? Here's Why and How to Fix It

Open a Figma Design file and click Variables in the navigation bar on the left. The Variables view lists every local collection, its modes and its variables. Figma describes the change as "No more deselecting everything on the canvas to access your variables", which is why older tutorials that say "click an empty spot on the canvas, then Local variables" no longer match what you see.

Variables from a library are applied through the property pickers once the library is enabled, covered below. For creating new ones from scratch, see how to create variables in Figma.

Figma doesn't document a keyboard shortcut for the Variables tab. Click it in the left navigation.

Figma's help center puts it simply: if applying a variable doesn't work, "it's possible you don't have any variables available to apply." Work through these causes in order.

1. The variable type doesn't fit the property

Pickers only list variables of a matching type. A number variable never appears in the fill picker, and a color variable never appears in the gap field.

• Color variables go on fills, strokes, effects and gradient stops.
• Number variables go on size, gap, padding, corner radius, opacity and other number fields.
• String variables go on text content and font properties.
• Boolean variables go on layer visibility: right-click the eye icon in the Appearance section. The normal Apply button won't show them.

2. Scoping hides it from that property

Each variable has scoping settings in the Edit variable dialog. A number variable scoped only to corner radius won't be offered for gap or width. Open the variable in the Variables view, check its scoping, and widen it if the variable should be available there.

3. The library isn't enabled in this file

Variables from a library only show up after you add the library to the file. Open the Assets tab, click the Libraries icon and add the library. The library also has to be published, and you need at least view access to it. If the variable was marked Hide from publishing in the source file, it won't reach other files at all.

4. There are no variables in the file yet

If the file has no local variables and no enabled library with supported variables, every picker will be empty. Create a collection first or enable the right library.

Deleting a collection deletes every variable inside it, so check whether someone removed a collection. If the variables came from a library, the library owner may have renamed, hidden or unpublished them. Check version history to see what changed and when.

The opposite problem also comes up: ghost entries that stay in the Page section's modes after the source is gone. Run Detach deleted variables from the Actions menu, which is the fix Figma Community Support gave in a forum thread with over 100 replies.

Modes are switched on a frame or layer from Appearance → Apply variable mode, or for a whole page from the Page section after you deselect everything. When the switch does nothing, these are the causes the forum reports most:

1. A library variable is outdated or unpublished. Mode switching can be blocked until the library changes are published and the file accepts the updates. Publish from the library file, then open the Libraries icon in your file (its tooltip reads "Review library updates" when updates are waiting) and accept them.
2. The layer has a fixed mode set higher up. Children default to Auto and inherit the mode from their parent. If a parent frame sets a specific mode, change it there.
3. The layers use raw values instead of variables. A mode only changes layers bound to variables in that collection. Hex values and detached variables stay the same.
4. It only fails in the prototype. Prototypes switch modes through the Set variable mode action, which needs a paid plan. The full setup is in how to build dark mode with variable modes.