Advanced Variable Export

Plugin and Widget API Show and Tell
1

Cover
Cover1920×960 17.1 KB

Variables is a great new feature in Figma, that helps to make design & development workflow much more flexible and optimized! But currently there is no chance for developers to see all variables in dev-mode without editor rights, and even though - it is impossible to export them to CSS or SCSS. Natively Figma allows only to get CSS variables as a part of component code.

In case, to solve this difficults and make variables usage and handling perfect for both designers and developers, our team made a light & elegant solution - AVE-plugin or Advanced Variable Export. You can check out plugin for free right now in Figma Community.

Plugin will help you to export variables to CSS or SCSS code, and even more - it can fragmentate variables to different folders depending on variables structure in Figma!

We will appreciate any feedback, functionality requests, bug reports, etc. Push it to your favourites so we’ll keep motivation for the further plugin improvements!

4 Likes
2

Thanks @kitponomarenko, awesome simple and very useful plugin, it helps our dev team migrate on variables just in one day, else it will continous more than week.

1 Like
3

Thanks, simple plugin but it works. Maybe you could add an attribute with the option to add a -light/dark prefix, since now I have 2 variables with the same name but different value.

–text-text-primary: var(–colors-grey-black);
–text-text-primary: var(–colors-grey-50);

1 Like
4

I would also appreciate to please consider filtering the mode .Export only dark or export only light