Variables order not always the same as the figma UI

0: {name: 'color/Brand/Alpha/Primary', id: 'VariableID:1:18'}
1: {name: 'color/Brand/Alpha/Secondary', id: 'VariableID:1:3'}
2: {name: 'color/Brand/Primary', id: 'VariableID:1:17'}
3: {name: 'color/Brand/Secondary', id: 'VariableID:1:5'}
4: {name: 'font/family/primary', id: 'VariableID:1:8'}
5: {name: 'font/weight/regular', id: 'VariableID:1:10'}
6: {name: 'font/weight/medium', id: 'VariableID:1:11'}
7: {name: 'mode/modes', id: 'VariableID:1:7'}  <- resolvedType: String
8: {name: 'font/family/secondary', id: 'VariableID:1:9'}
9: {name: 'font/line height/string', id: 'VariableID:3:2'}

Hey everyone,

This is what’s returned by getLocalVariableCollectionsAsync().variables, and as you can see, the order isn’t correct. For instance, variables inside the font folder should be grouped together, and color/Brand/Primary & Secondary should appear before the nested folder color/Brand/Alpha.

It seems that whenever a string is involved in a variable collection (like in mode/modes, which is of type String), it messes up the order. I’ve noticed that if I randomly move the variable and then put it back in the correct place, sometimes the order is fixed, but other times it’s still completely off.

Has anyone else run into this, or found a reliable fix?

Good catch. I got the same issue/question. Is it not possible to fetch the collections and their variables with their original structure and order? @Gleb please do your magic and help us :grin:

Not possible unfortunately. Hope they fix it someday.

2 Likes