To fetch and retrieve the Variable Mode attached to the node

Hello. Let me try to explain myself the best i can.

First i have 0 knowledge and background on programming, so excuse me if i don’t refer to things as good as i should.

I built a plugin with the help of chatGTP.
In short this plugin fetches inside your current selection and retrieves all the styles used, the unstyled colors and fonts.

I use it to transfer components between files and reapply the remote styles to their local matching styles.

When they anounced Variables, i wanted to implement it to the plugin.
So far i managed to list the variables bound to a node and list them in the ui.

Then i noticed about the modes, and wanted to retrieve the mode applied to that node, with no look.

I tried to fetch inside the whole variable collection and match the hex color of the variable bounded to the hex color of the different modes, and get the mode name by making a comparison. But this solution is not good because various modes can share the same variable value inside.

So here i am now, i have no idea what method to use to retrieve not only the color variable applied to the node and the mode.

Here is the code i use to retrieve the variables:

function processBoundVariables(node: BaseNode, variableId: string, styleType: string) {
      const variable = figma.variables.getVariableById(variableId);

      if (isSceneNode(node)) {
        if (variable !== null) {
          const variableValue = variable.resolveForConsumer(node).value;

          let rgbaColor: RGBA;

          if (typeof variableValue === 'string') {
            rgbaColor = hexToRgba(variableValue);
          } else if (isRgba(variableValue)) {
            rgbaColor = variableValue;
          } else {
            throw new Error('Unsupported color format');
          }

          const hexColor = rgbaToHex(rgbaColor);

          const existingVariable = boundVariables.find(
            (entry) =>
              entry.name === variable.name &&
              entry.hexColor === hexColor &&
              entry.styleType === styleType
          );
          if (existingVariable) {
            existingVariable.nodes.push(getNodeToAppend(node));
          } else {
            boundVariables.push({
              name: variable.name,
              hexColor,
              nodes: [getNodeToAppend(node)],
              isRemote: variable.remote,
              styleType,
            });
          }

        } else {
          console.log('Variable is null');
        }
      } else {
        console.log('Node is not a SceneNode');
      }
    }

Here is the link to the full repository:

Any help will be welcome.
Thank you very much guys.

node.resolvedVariableModes should do the trick: FrameNode | Plugin API

This is similar to the explicitVariableModes property, except that it will walk up the ancestor chain to give you any modes that were inherited from explicitly set modes.

1 Like