Skip to main content

I’m currently the solo person on the team that works in Figma and eventually builds the website using Elementor. After designing a site and then discovering its not easy to implement a part of it, I want to recreate the Elementor widget in Figma and use variables for its design parts. (Sidenote: I’m at the point where I want to start to break free from Elementor but the boss and the client want to be able to edit the site.)


I was able to do this successfully for one project, but want to make it easy to use for the multiple clients/projects that come. Variables were set up using the Base, Semantic, Component so changing a base color to the new brand’s colors is a simple process.


I originally thought that having a library of the various Elementor widgets in a neutral color scheme would do that could be imported into various files. Components from that library still use its variables, as expected. Is there an easy way for me to map to the brand’s variables?


Effectively, a super wide view of modes where the settings of the variable are at file level. For this client, spacing is 20px, for another its 40px. Or, having an icon library where it automatically knows icons should be whatever icon-color-primary is inside of the Figma file.


Is the best solution to drag in the component from the master Elementor file, create it as a new local component and override? I want to avoid have to avoid recreating variables and linking them up since that takes up a lot of time, especially since some widgets are complex.

Hey Kari, thank you for reaching out! Did I get your question right, you want to drag out a neutral component and have it automatically adopt the correct variable values based on each client’s need?

Do you own your clients file? If you own the file you can change the default mode of a page in any file. More info here: https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#Switch_modes_on_a_page.

I do own the client files.


I don’t think modes would work because that would require me to set up modes on the neutral library and Figma only allows up to 4 modes. That also means I would have to go to an entirely separate Figma file if I wanted to change any variables.


It would be different if I could see the variables and create the mode in the client file. Essentially, adding a library could import all of the variables, maybe even making them locked and uneditable (so you can’t change the master) but can add overrides via modes.


Might just be easiest for now to have a master and then just copy it for every new client until Figma figures out variables more. And doesn’t limit modes based on price tier.

Reply


Terms & ConditionsCookie settings