Find all variant property values?

Plugin and Widget API Questions
1

Hey all,

I’m writing a plugin that allows people to edit instance nodes, and I’ve found I can do this by first checking the variantProperties property of a node, and then set it with the setProperties function.

While variantProperties shows me keys, it would be awesome to know the possible values for those keys. Is that possible?

For example, I have a toggle component with the following properties:
{Platform: "Android", On/Off: "True", State: "Enabled"}

Is it possible for my plugin to find all accepted values for Platform, or is that not doable?

2

I’m working on something similar. What you have to do for each instance is go up to the main component of that instance and get parent of that which should be the component set of that main component. Then you can get all variant properties and all the options for those properties.

Here’s a code snippet:

export default function getAllVariants(): Variant[] {
  const instances = getAllInstances();
  const componentSetNodes = new Map<string, Variant>();
  for (const instance of instances) {
    const mainComponentParentNode = instance.mainComponent?.parent;
    if (mainComponentParentNode && mainComponentParentNode.type === 'COMPONENT_SET') {
      const currInMap = componentSetNodes.get(mainComponentParentNode.id);
      if (currInMap) {
        // @ts-ignore (variantProperties is not yet defined in @figma/plugin-typings)
        const instanceVariantProperties = instance.variantProperties;

        componentSetNodes.set(mainComponentParentNode.id, {
          ...currInMap,
          instanceIds: currInMap.instanceIds.concat(instance.id),
          properties: currInMap.properties.map((property) => {
            let currentOption = property.currentOption;
            if (currentOption !== instanceVariantProperties[property.name]) {
              currentOption = 'SELECTION_VARIANTS_PLUGIN_MIXED';
            }

            return {
              ...property,
              currentOption,
            };
          }),
        });
      } else {
        const properties: VariantProperty[] = [];
        // @ts-ignore (variantGroupProperties is not yet defined in @figma/plugin-typings)
        const variantGroupProperties = mainComponentParentNode.variantGroupProperties;
        // @ts-ignore (variantProperties is not yet defined in @figma/plugin-typings)
        const instanceVariantProperties = instance.variantProperties;
        const propertyNames = Object.keys(variantGroupProperties);
        for (const propertyName of propertyNames) {
          const property = variantGroupProperties[propertyName];
          const values = property.values;
          let type: VariantPropertyType = 'DROPDOWN';
          if (values.length > 2 && isSwitch(values[0], values[1])) {
            type = 'SWITCH';
          }
          properties.push({
            type,
            name: propertyName,
            currentOption: instanceVariantProperties[propertyName],
            options: values,
          });
        }

        componentSetNodes.set(mainComponentParentNode.id, {
          id: mainComponentParentNode.id,
          name: mainComponentParentNode.name,
          instanceIds: [instance.id],
          properties,
        });
      }
    }
  }

  return Array.from(componentSetNodes.values());
}

Also check out the designs for the plugin. It’s in the process of being reviewed.

1 Like