In today’s fast-paced world, designers and developers often find themselves racing against time to deliver products. To ease the stress and, most importantly, get from design to final product faster, we have found a solution that combines the benefits of having a design system with AI design-to-code tools.

AI design-to-code tools help us build faster

While design-to-code tools aren’t something totally new, their capabilities are rapidly improving, thanks to AI. The code they generate is clearer and easier to work with, which has been a huge help for us—especially in Studio, our low-code tool. Here, we frequently develop widgets, which are small, self-contained units that display data, ranging from simple BMI calculations to more complex data like patient lab values.

However, these widgets are often created separately for specific projects and use cases, which can be time-consuming. This is where AI design-to-code tools truly shine: in no time they generate smaller pieces of code that don’t interfere with the overall development of our software. From a designer’s perspective, what could be better than seeing designs implemented so quickly? 

What is so great about design-to-code tools?

What have we learned about the advantages of these tools? Here are some key benefits that really stand out:

• Faster prototypes: Creating Proof of Concepts (PoCs) has never been quicker. We can get ideas off the ground in no time.
• Quick feasibility checks: It’s easier to see if a design is feasible right from the start. No more guesswork.
• AI-enhanced code:Thanks to AI, the code generated is not just smarter but also more practical and easy to use.
• Comprehensive framework support: These tools work with all major frameworks, making integration a breeze.
• Automation of repetitive tasks: AI helps automate the tedious and repetitive aspects of web development, freeing up time for more complex tasks.​
• Faster workflow adaptation: The whole process becomes more flexible, allowing developers to quickly regenerate designs as they change, making the workflow more iterative and efficient.​

Creating widgets in hours instead of weeks

Initially, we set out to test AI tools that could speed up our design processes. However, with our BDS design system and clinical visualisation system in place, we didn’t find AI tools that could leverage these systems efficiently. So, we shifted our focus to the coding aspect of our projects.

In collaboration with developers from the Studio team, we tested a plugin we found for our design software, Figma, called Builder.io. This tool allows us to quickly convert designs, that we do in Figma, into code, giving developers a solid foundation to build upon. Based on developer feedback, the generated CSS and HTML code was well-structured, which significantly speeds up their coding process. 

Now, we can build a widget in hours instead of days, benefiting both teams. Designers can iterate and test their designs more frequently, while developers have more time to focus on functionality and fine-tuning the widget. This leads to widgets that are not only more usable but also reusable.

From slow handoffs to quick turnarounds

Before, the process was pretty straightforward but often took way too much time. A project manager and analytic would come with a request or idea for a widget. Designers and researchers would take on the project and create the designs. Then came the handover for development, which frequently took days or even weeks due to complexity or a shortage of available developers.

Now, with the use of design-to-code AI tools, development happens much faster. Developers save time as they no longer need to worry about getting the right colors, spacers, typography, or achieving pixel-perfect designs—our AI tool handles that! It takes care of the coding, making the widget functional and ready for publication in our Studio Marketplace.

Overcoming AI limitations in UI and UX design

In today’s workflows, designers often rely on large language models like ChatGPT to help generate content, placeholders, boilerplates for documentation and handovers. However, when it comes to generating UI or UX ideas, our field is still too specific for these models to produce results we can actually use. There are a lot of limitations and additional context that AI can’t yet fully grasp. Plus, many generative UI/UX AI models can’t use existing designs or design system components, making their output even less useful.

On the bright site, AI tools are improving all the time, generating practical and useful code that serves as a solid starting point for further development. This allows developers to focus less on CSS and HTML and more on functionality—crucial for creating effective widgets for Studio.

Looking ahead, we are eager to explore more AI tools in our design workflows. With Figma set to release its own AI soon, which promises to leverage our Better Design System and generate ideas based on our UI components, we are very much excited about the future.