Figma variable library

Ask the community
1

Looking to recreate the team’s Colour library using Figma variables. Have used a couple of plugins to get this far:

  • Converting all the light mode colour styles to variables - done
  • Converting all the dark mode colour styles to variables - done
  • Moving them into same file - Light mode variables and Dark Mode variables - Done
  • Parent Component library, can now toggle between Light Mode and Dark mode themes from the child library which has the variables.

But when pulling that component library into a furthr figure file (which uses the components to make up screens), when toggling between light mode and child mode (next to layers when the screens are selected, altough the selected frame says “Light Mode” or “Dark Mode” no colour change happens.

Is there something I’m missing or is the file structure need updating?

2

I’m just wondering how you set up the mode for the layers. Did you set Auto for the frame color to be changed? You can refer to this guide for more information: Modes for variables.

I created a very simple test frame to change the color when the mode of the parent frame was changed.

I hope this helps but if I’m misunderstanding please feel free to let me know!

Thanks,
Toku

1 Like
3

Thanks @y_toku - this is exactly it and is now working. :+1:

1 Like
4

Thanks for the reply. Glad to know it’s working now😊