Skip to main content
Question

Difficulty applying color modes (light/dark) via Figma API

  • February 13, 2025
  • 3 replies
  • 41 views

Rachel49

Hello! I'm developing a plugin to switch between color modes (light/dark) for multiple collections at once, and I'm facing some challenges. I have several collections that control different aspects of the light/dark mode theming, and I need to apply or switch all of them simultaneously on selected frames (or the whole page if possible). Here's what I've tried so far:

First Approach - setVariableModesAsync

  • Tried using the setVariableModesAsync method to apply modes
  • The code correctly identified collections and their modes
  • Issue: Changes weren't applied visually, although logs indicated success

Second Approach - setBoundVariableForPaint

  • Switched to using setBoundVariableForPaint for specific colors
  • Tried processing each variable individually
  • Issue: Received errors related to paint type and properties not found

Third Approach - setVariableModeForCollectionAsync
Based on the latest documentation (Update 83), changed to use setVariableModeForCollectionAsync. Implemented logic to:

  • Identify only COLOR type variables
  • Collect all color collections linked to the element
  • Apply the selected mode to each collection
  • Issue: Code executes without errors, but visual changes don't happen

Current code:

  • First identifies all collections containing color variables
  • Filters only 'COLOR' type variables using variable.resolvedType === 'COLOR'
  • Uses setVariableModeForCollectionAsync to apply the mode to the entire collection
  • When a mode is already applied, it should switch to the opposite mode

Relevant logs:

  • Plugin correctly identifies available collections
  • Finds light/dark modes in each collection
  • Confirms mode application (selectedModeId: "3683:1")
  • No errors in console

Could someone help me understand:

  1. Why aren't the changes being applied visually when switching between modes?
  2. What's the correct way to apply color modes via Figma API across multiple collections?
  3. Are there any limitations or specific requirements for switching modes that I might be missing?

Any help or guidance would be greatly appreciated!

3 replies

tank666
  • 4857 replies
  • February 13, 2025
Rachel49 wrote:

setVariableModesAsync

setVariableModeForCollectionAsync

Where did you get these methods? They don't exist in the Plugin API.

 

To set the variable mode, use the setExplicitVariableModeForCollection method.

node.setExplicitVariableModeForCollection(collection, modeId);

 

To bind a variable, you can use the setBoundVariableForPaint helper method. See an example of use here: Working with Variables.


Rachel49
  • Author
  • New Member
  • 1 reply
  • February 14, 2025

@tank666 I'm using Cursor and Claude to help me since I'm not that good to coding, but really wanted to make some plugins to help my workflow

 

I've noticed that it keeps using deprecated methods from the API. 

I'm still very confused with the API guides in terms of the Variable Modes


tank666
  • 4857 replies
  • February 14, 2025
Rachel49 wrote:

​I'm using Cursor and Claude […].

 

I've noticed that it keeps using deprecated methods from the API.

As in your example above, the AI did not use deprecated methods, but wrote ones that never existed in the API, i.e. invented all sorts of crap.

Unfortunately, I can't help you with AI bots.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings