resolveForConsumer

Retrieves the resolved value for this variable if it was bound to consumer.

Signature

resolveForConsumer(consumer: SceneNode): { value: VariableValue; resolvedType: VariableResolvedDataType }

Remarks

The value that a variable resolves to depends on the following:

The node consuming the variable and which of the collection's modes is currently selected in the node
The variable's value for the selected mode
If that value is an alias, then the resolved value is determined using the selected modes of each collection in the alias chain

info

It is not possible to statically determine the resolved value of a variable when there are multiple modes involved (either in the variable itself or in any variables in the alias chain).

The consuming node can have any combination of explicit or inherited variable modes per collection assigned to it.

Here are some examples illustrating how variables can resolve to different values depending on the consuming node. These examples do not work if the current file is on the Starter plan, which is limited to a single mode.

For a variable in a collection with two modes, it can resolve to up to two different values:

Simple variable value resolution without aliasing
// Create a collection with two modes and a variable with a different
// float value for each mode
const collection = figma.variables.createVariableCollection("Collection")
const mode1Id = collection.modes[0].modeId
const mode2Id = collection.addMode('Mode 2')
const variable = figma.variables.createVariable(
  "My Variable",
  collection,
  'FLOAT'
)
variable.setValueForMode(mode1Id, 1)
variable.setValueForMode(mode2Id, 2)

const frame = figma.createFrame()
frame.setExplicitVariableModeForCollection(collection, mode1Id)
// Output: {value: 1, resolvedType: 'FLOAT'}
console.log(variable.resolveForConsumer(frame))

frame.setExplicitVariableModeForCollection(collection, mode2Id)
// Output: {value: 2, resolvedType: 'FLOAT'}
console.log(variable.resolveForConsumer(frame))

For a variable in a collection with two modes with each value aliasing to different variables in another collection with two modes, it can resolve to up to four different values.

Variable value resolution with aliasing
// Create two collections:
// 1. A collection with two modes and two float variables
// 2. A collection with two modes and a variable aliasing to
//    different variables in the first collection
const collection1 = figma.variables.createVariableCollection("Collection 1")
const collection1Mode1Id = collection1.modes[0].modeId
const collection1Mode2Id = collection1.addMode('Mode 2')
const collection1Var1 = figma.variables.createVariable(
  "Variable 1",
  collection1,
  'FLOAT'
)
collection1Var1.setValueForMode(collection1Mode1Id, 1)
collection1Var1.setValueForMode(collection1Mode2Id, 2)
const collection1Var2 = figma.variables.createVariable(
  "Variable 2",
  collection1,
  'FLOAT'
)
collection1Var2.setValueForMode(collection1Mode1Id, 3)
collection1Var2.setValueForMode(collection1Mode2Id, 4)

const collection2 = figma.variables.createVariableCollection("Collection 2")
const collection2Mode1Id = collection2.modes[0].modeId
const collection2Mode2Id = collection2.addMode('Mode 2')
const collection2Var = figma.variables.createVariable(
  "Variable 1",
  collection2,
  'FLOAT'
)
collection2Var.setValueForMode(
  collection2Mode1Id,
  figma.variables.createVariableAlias(collection1Var1)
)
collection2Var.setValueForMode(
  collection2Mode2Id,
  figma.variables.createVariableAlias(collection1Var2)
)

const frame = figma.createFrame()

frame.setExplicitVariableModeForCollection(collection1, collection1Mode1Id)
frame.setExplicitVariableModeForCollection(collection2, collection2Mode1Id)
// Output: {value: 1, resolvedType: 'FLOAT'}
console.log(collection2Var.resolveForConsumer(frame))

frame.setExplicitVariableModeForCollection(collection1, collection1Mode2Id)
frame.setExplicitVariableModeForCollection(collection2, collection2Mode1Id)
// Output: {value: 2, resolvedType: 'FLOAT'}
console.log(collection2Var.resolveForConsumer(frame))

frame.setExplicitVariableModeForCollection(collection1, collection1Mode1Id)
frame.setExplicitVariableModeForCollection(collection2, collection2Mode2Id)
// Output: {value: 3, resolvedType: 'FLOAT'}
console.log(collection2Var.resolveForConsumer(frame))

frame.setExplicitVariableModeForCollection(collection1, collection1Mode2Id)
frame.setExplicitVariableModeForCollection(collection2, collection2Mode2Id)
// Output: {value: 4, resolvedType: 'FLOAT'}
console.log(collection2Var.resolveForConsumer(frame))

Signature​