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.