Design-to-Code: Five Tools, One Old Dashboard, Zero Miracles?

The dream is simple: you design your user interface, click a button, and voilà, the code is ready. No more hours spent translating pixels into lines of code. It sounds like paradise for anyone wanting to launch a product fast, or for those who just despise front-end work. But reality, as it often does, is a bit more... complicated.

A person named Hadil on dev.to decided to put this promise to the test. They took an old, somewhat clunky and outdated SaaS dashboard and used it as a guinea pig. The idea was to see if five popular tools, claiming to turn designs into code, could live up to their hype. Spoiler alert: not quite.

Hadil started with Figma, creating the outdated dashboard's design. Then, this file was fed to five "magical" converters: Anima, Locofy, Plasmic, TeleportHQ, and DhiWise. The goal was to generate React or React Native code, to see how autonomous these tools really were.

The truth is, none of these tools produced usable code out-of-the-box. All five required significant manual work to fix the code, optimize components, and make it even remotely decent. DhiWise, for example, generated React code that still needed a lot of modifications to be functional. So, the "magic button" turned out to be more of a "button that gives you a lot of homework."

Yes, unfortunately. Automated design-to-code conversion is still a minefield, especially with complex or dated interfaces. These tools can provide a starting point, much like a bricklayer bringing bricks, but they won't build the house themselves. The expert eye and hand of a developer are still needed for a clean, functional final result.

This test, published by Hadil on dev.to on May 24, 2024, shows that the promise of seamless, complete transformation is still far off. For now, "design-to-code" is more like "design-to-code-that-needs-fixing." Maybe one day we'll have the magic wand, but today, front-end code still demands human sweat and tears.