Skip to main content

resolvedVariableModes

The resolved mode for this node for each variable collection in this file.

Supported on:

Signature​

resolvedVariableModes: { [collectionId: string]: string }

Remarks​

The set of resolved modes on a node includes the explicitly set modes on the node, as well as the explicitly set modes on ancestors of the node. By default, nodes automatically inherit the modes of their parents.

explicitVariableModes vs resolvedVariableModes
// Create two collections with two modes each
const collection1 = figma.variables.createVariableCollection("Collection 1")
const collection1Mode1Id = collection1.modes[0].modeId
const collection1Mode2Id = collection1.addMode('Mode 2')
const collection2 = figma.variables.createVariableCollection("Collection 2")
const collection2Mode1Id = collection2.modes[0].modeId
const collection2Mode2Id = collection2.addMode('Mode 2')

const parentFrame = figma.createFrame()
const childFrame = figma.createFrame()
parentFrame.appendChild(childFrame)

parentFrame.setExplicitVariableModeForCollection(
  collection1,
  collection1Mode2Id
)
childFrame.setExplicitVariableModeForCollection(
  collection2,
  collection2Mode1Id
)

// Example output (only collection2 is present):
// { 'VariableCollectionId:1:3': '1:2' }
console.log(childFrame.explicitVariableModes);

// Example output (both collections are present):
// { 'VariableCollectionId:1:2': '1:1', 'VariableCollectionId:1:3': '1:2' }
console.log(childFrame.resolvedVariableModes);