UI/UX design is the heart of software development as that is what the user interacts with. Studies show that 89% of users churn because of bad UI/UX. Even though the acquisition failed, Adobe’s announcement in 2022 to buy Figma for $20Bn was groundbreaking as it would have marked the biggest private exit ever. It showed the relevance of UI/UX design as one of the most transformative industries for the future.
Building software with great UI/UX has become easier over time. However, today, we still need developers to simply translate the designs into code. No-/low-code tools have been trying to turn designers into developers.
No-/low-code tools, limit the flexibilities and thus the success of design. These tools work with pre-made components that can only be tweaked in a certain, limited scope. As designers don’t have full control over every pixel on the screen, they can’t build the best possible design and thus keep “living” in design tools, like Figma. Once the designer finishes the design, the developer implements this design in code.
The future is design to code automation. ****As designers are already living in Figma and companies have their design systems in Figma, they are unlikely to switch to no-/low-code tools with limited design capabilities.
In June 2023, Figma announced its dev mode which turns Figma into a collaboration platform not only for designers but also for developers. The goal was to automate design to code but Figma had to pivot:
“We imagined [Figma’s] Dev Mode as a way to automate design to code. […] Developers didn’t always find the code useful. In practice, it’s very hard to come up with code that works for a diversity of needs and frameworks. So, we pivoted.”
*- Emil Sjoelander, Software Engineering Manager, Figma
- Jake Albaugh, Developer Advocate, Figma*
The processes of software teams are too unique for a unified, holistic design to code automation model. What is needed are specialized models for certain operations. Also, developers don’t trust the generated code and want to understand it. While 82% of developers already use AI tools to write code (Stackoverflow), only 3% say that they highly trust the accuracy of these tools. Thus, the best approach is to use AI to assist the developer, not to replace them (yet).
<aside> 💙 Widgetbook is already trusted by the developer community: Developers don’t trust AI code generators. Widgetbook’s open source package is already a default tool in the Flutter community which is recommended by the Flutter team at Google. Our review platform Widgetbook Cloud already has the first paying customers and 5k+ organic signups.
</aside>
Developers use our open-source package to replicate their Figma design system in code and allow their entire team including designers, product managers, and QA testers to verify if they met the Figma design requirements. Currently, Widgetbook detects UI changes, and software teams manually reject or accept the newly added or changed widgets (right) in a side by comparison to their Figma design (left). By accepting or rejecting the implementation, Widgetbook users are training a Review AI model that will soon automatically verify if the code matches the design.
As we learned from Figma above, “it’s very hard to come up with code that works for a diversity of needs and frameworks”. We make this possible. As Widgetbook is deeply embedded in the design and developer workflows of companies of all stages, from startups to enterprises, we understand the team’s unique processes. Our Review AI model is also steadily improved by users accepting or rejecting the code. Thereby, the model is customized to the needs of the individual software team.
Our user-centric Review AI trains our Code Gen AI. Through our open-source package, Widgetbook is already deeply embedded in the codebase of thousands of developers. We thus quickly have a large database for how developers want to have Figma designs implemented in code. Our Review AI model will automatically verify if the generated code by our Code Gen AI matches the design AND aligns with the developer’s expectations on how the code is written.