From Figma to Elementor: 500 Designs’ Estimated 25–30% Production Time Savings

Mauro Carrera De Franceschi is the Web Development Manager at 500 Designs, a digital agency that brings together strategy, branding, UX/UI design, and development to build websites and digital products for clients.

Projects move between several departments. A design begins with the UI/UX team and then moves into development. Throughout that process, both teams need to agree on what can be built in Elementor and how the finished website should reflect the original design.

That handoff can create extra work when a developer has to interpret and rebuild a section from scratch. Skelementor gave the agency a more predictable starting point.

Mauro discovered Skelementor through the Elementor community and demonstrations of the platform. He bought a lifetime license and introduced the library to his team.

Over time, the components became a starting point for many of the agency's designs. The team still adds custom CSS, animation, interactions, and project-specific behavior. The library supplies a practical foundation that designers and developers can both recognize.

A designer can imagine almost anything in Figma, but the team also needs to know how an idea will be implemented. Because 500 Designs works across different technologies, the possibilities vary from project to project.

The Skelementor library gives the UI/UX team examples of structures they can build with Elementor. Designers can start from a known component, then change the visual direction or add interactions to fit the client. That reduces the need to research every familiar pattern independently.

Mauro asked for access to Skelementor's Figma component library so the design team could work with the same concepts that developers would later use in Elementor.

Instead of drawing a generic hero section and leaving the implementation open to interpretation, a designer can reference a specific component such as Hero 39. When the project reaches development, the developer knows which component to use and can focus on styling and customization.

The shared reference gives both departments a concrete way to discuss the section before it is built.

When the Figma design is based on a Skelementor component, developers can bring its underlying structure into Elementor instead of recreating it on an empty canvas. They then adapt it to the approved design and the project's functional requirements.

Designers spend less time deciding how to structure common patterns. Developers spend less time rebuilding those structures after the handoff. The time between an idea in Figma and a working Elementor section becomes shorter.

For 500 Designs, a component can travel from the Skelementor library into UI/UX planning, a Figma design, development, and finally a customized website. Each team understands the structure behind the reference.

That lets the UI/UX team concentrate on the experience and the development team concentrate on implementation, responsiveness, functionality, and quality. The component library connects those stages without dictating the final look.

Mauro says the benefit is spread across UI/UX work, wireframing, component selection, development, and the handoff between them. Because the improvement comes from several stages, he does not frame it as a precise measurement of one task.

Asked for a high-level estimate, Mauro put the reduction in production time at around 25–30% for the agency's workflow. That is his estimate for 500 Designs, reflecting how broadly the team uses the library.

500 Designs treats a component as a head start, not the finished design. Its team still makes the choices that give each website its own identity, including custom styling, animation, interactions, and implementation details.

For Mauro, the shared foundation means designers and developers can spend more time on the work that needs their expertise. It has become part of the agency's design-to-development workflow rather than an occasional source of ready-made sections.