Skip to main content
Question

To fetch and retrieve the Variable Mode attached to the node


Jairo

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:

GitHub

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

This topic has been closed for replies.

2 replies

James_Yang
Figmate
  • Figmate
  • 82 replies
  • July 21, 2023

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.


Lorenz_Wohr

I’m actually having issues with the resolvedVariableModes as it only returns a value if the node already has set a variable. Even if the parent node has an explicit variable mode. I believe this wasn’t always the case or am I missing something here? Unexpected behavior for resolvedVariableModes


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