Skip to main content

Cover


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!

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.

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);

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

Hi

I do have problem expording my Variable, width Advanced Variable Export

Can you help?

Hello!

Please, tell us a bit more details about your issue: you can provide this info here or send it on mail: kitponomarenko@gmail.com or info@code-creators.tech if you want to keep your details private - as soon as we have more info about your issue we surely would try to solve it!

Hi! This a good plugin, I’ve used it several times. Last week I came across another one, that also allows you to filter to specific variables, and it also offers an option for developers to download them in the specified format, be it css, sass or a couple of other formats. It’s called Figma Token Exporter.

Reply


Terms & ConditionsCookie settings