At RIVA, our Digital Experience and Human Centered Design team is continually exploring ways to drive efficiency and innovation by integrating advanced technologies into our digital solutions. We have recently looked at New GenAI UX Design Tools: Testing Ultra Rapid Prototyping and Human Centered Design and Enhancing UX Research Efficiency: What AI Can (and Can’t) Do. Now we turn our attention to an area where this exploration has gained momentum—the connection between UX design and front-end Drupal development.
Traditionally, the process of moving from a design mockup to a functional, coded interface required a significant investment of time and manual effort. Designers would create interactive prototypes in tools such as Figma, then developers would translate those visual assets into HTML, CSS, and JavaScript within a Drupal framework. This handoff often introduced inefficiencies, delays, and even discrepancies between the intended design and the implemented product. With the advent of generative AI (GenAI), this workflow is beginning to evolve.
Our team at RIVA has been testing GenAI as a bridge between UX tools like Figma and front-end Drupal code. The idea is to accelerate the design-to-code pipeline, reduce repetitive manual work, and allow developers to focus on higher-value activities such as accessibility, performance optimization, and integration with complex back-end systems. While this is still an experimental approach, the promise of automating portions of the front-end development process presents exciting opportunities for digital transformation.
The Methods We Tested
Structured Exports → AI models
Our internal experiments worked with Figma, the platform most of our designers use to create responsive, collaborative mockups. Using Figma’s built-in export capabilities, we extracted structured design information such as layout grids, color palettes, typography, and component hierarchies. These design tokens and specifications served as the input for GenAI models trained to produce code templates.
Direct Prompting
We tested feeding annotated Figma design exports into GenAI tools specifically designed for front-end code generation. These models produced HTML and CSS that mirrored the structure of the original Figma file. In parallel, we also experimented with prompting large language models directly by providing detailed descriptions of the desired layout and functionality, then requesting code snippets compatible with Drupal’s theming system.
Plugins & APIs
Another method we evaluated involved connecting Figma APIs with AI-powered plugins. These plugins analyzed the design file in real time and generated React or Twig code, which could be adapted into a Drupal front-end. We also tested iterative prompting, where our developers refined the AI’s outputs by asking it to improve responsiveness, correct semantic structures, or incorporate accessibility attributes such as ARIA labels.
In each case, the RIVA team carefully evaluated the fidelity of the AI-generated code against the original designs. This included checking for pixel-level accuracy, responsiveness across breakpoints, and adherence to brand standards.
Our Findings
The results of our early testing were both promising and instructive.
On the positive side, GenAI significantly accelerated the initial coding phase. What once took hours of manual work to structure a layout can now be generated in minutes, providing developers with a functional starting point. This speed enabled our team to prototype more quickly and focus their expertise on complex areas like Drupal template integration, backend connectivity, and user authentication.
The experiments also highlighted key benefits of improved consistency. By pulling design tokens directly from Figma and feeding them into GenAI, the generated code reflected a higher degree of alignment with the design system. This reduced the likelihood of visual inconsistencies between design and implementation, a common challenge in large projects.
However, there were a few areas to watch:
First, while AI models were adept at producing static front-end code, they often struggled with the intricacies of Drupal’s Twig templating system. Without human oversight, the generated code sometimes lacked the modularity or reusability needed in Drupal projects.
Second, accessibility remained a critical point of human intervention. While AI could create visually accurate layouts, ensuring semantic HTML, proper tab order, and ARIA compliance required developer expertise.
Third, GenAI occasionally produced code that appeared functional at first glance but contained hidden inefficiencies, such as overly nested divs or non-optimized CSS, which could degrade performance if left unrefined.
Overall, the role of the human developer remained indispensable. Rather than replacing developers, GenAI functioned as an accelerator, handling the repetitive aspects of code generation while leaving the nuanced, value-added decisions to our technical experts.
Empowering Developers, Enhancing Workflows
The journey from UX design in Figma to front-end Drupal code using GenAI is not without challenges, but it presents a compelling opportunity to streamline digital development workflows.
For RIVA, these early experiments have demonstrated that GenAI can:
- Reduce time-to-code
- Increase design fidelity
- Free developers to focus on higher-level tasks
At the same time, the process underscores the importance of human oversight to ensure accessibility, performance, and maintainability. GenAI is best understood as a collaborator—an assistant that can transform design files into code more quickly, while still relying on human judgment to achieve excellence in execution. As we continue to refine this approach, our vision is not to replace human developers, but to empower them with tools that enhance creativity and efficiency.
The integration of AI into the design-to-code pipeline is still emerging, but its potential is undeniable. For organizations working with Drupal and other complex platforms, adopting a thoughtful, hybrid model of AI-assisted development could mark the beginning of a new era in digital delivery.
Want to learn more about how we’re integrating GenAI into our UX design practice?
Reach out to Sean Fitzpatrick, RIVA’s SVP of Digital Experience and Human-Centered Design, to start a conversation.
Related Articles
