Skip to main content
Question

Creating a library of Elementor widgets with variables

K

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.

3 replies

Gayani_S
Figmate
  • Gayani_S
  • Community Support
  • 1977 replies
  • November 7, 2023

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.

K
  • Kari3
  • Author
  • 1 reply
  • November 18, 2023

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.

Alex Costa
  • Alex Costa
  • New Member
  • 3 replies
  • February 22, 2025

Hi Kari3,

It sounds like you’re on the right track with a master library approach. Currently, Figma doesn’t offer a built-in, fully automated way to map variables from a master file to client files at a global level. Here are a few suggestions to streamline your workflow:

  • Team Library & Shared Styles: Use Figma’s Team Library to maintain your Elementor widget components and shared styles (colors, spacing, typography). This way, any update to the master components can be pushed out to the files that use them.

  • Local Component Overrides: For client-specific adjustments, dragging in the component from your master file and converting it into a local component is indeed the best approach. This allows you to override the variables (like spacing or icon colors) to fit the client’s brand without having to recreate everything from scratch.

  • Design Tokens/Plugins: Consider using design token plugins (such as Figma Tokens) to manage and sync variable values across projects. These plugins can help automate the process of switching between different brand settings by mapping your base, semantic, and component variables more seamlessly.

By combining these techniques, you can maintain a solid base library while still enjoying the flexibility to tweak components for each client’s needs. This approach minimizes repetitive work and keeps your design system consistent across projects.

Hope this helps!

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings