Skip to content

Aliases to aliases cause wrong category to be set #284

Open
@linaroether4308

Description

@linaroether4308

For our use case, we use Figma variables with two layers of aliases. With my settings, I get an output like this (some parts omitted for brevity):

{
   "base": {
      "dimension": {
         "12": {
            "type": "dimension",
            "value": 12
         }
      }
   },
   "semantic": {
      "spacing": {
         "75": {
            "type": "dimension",
            "value": "{base.dimension.12}"
         }
      }
   },
   "component": {
      "chip": {
         "100": {
            "padding-x": {
               "type": "color"
               "value": "{semantic.spacing.75}"
            }
         }
      }
   }
}

As you can see, on the second layer of aliases, the output contains an incorrect value for type. This happens consistently; every double alias gets a type of "color", no matter what the actual type of the aliased value is.

I have no experience with Figma's API whatsoever, but I looked through the code a bit, and I believe the issue is that in the
function extractVariable, in getVariables.ts, the code tries to deduce the category from the value of the variable, but if that value is itself an alias, it fails and falls back to "color".

const extractVariable = (variable, value) => {
  let category: tokenCategoryType = 'color'
  let values = {}
  if (value.type === 'VARIABLE_ALIAS') {
    const resolvedAlias = figma.variables.getVariableById(value.id)
    const collection = figma.variables.getVariableCollectionById(resolvedAlias.variableCollectionId)
    return {
      name: variable.name,
      description: variable.description || undefined,
      exportKey: tokenTypes.variables.key as tokenExportKeyType,
      category: getVariableTypeByValue(Object.values(resolvedAlias.valuesByMode)[0]),
      values: `{${collection.name.toLowerCase()}.${changeNotation(resolvedAlias.name, '/', '.')}}`,

      // this is being stored so we can properly update the design tokens later to account for all 
      // modes when using aliases
      aliasCollectionName: collection.name.toLowerCase(),
      aliasModes: collection.modes
    }
  }

Without knowing any better, I would have just used variable.resolvedType here, but I assume there is a reason why that wasn't done.

I don't feel confident enough in my understanding of the problem yet to submit a PR, but maybe you could give me some pointers. In either case, it would be nice to see this issue fixed.

Thank you :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions