| HN Mirror

Great question. Figma is leaps and bounds closer to giving designers tools that work like code, but it still has a long way to go. My wish list design tool is something that has the creative flexibility of design canvas, but the power of clean, performant code. Truthfully I think it'll require evolution both in the design tools space, but also the HTML and CSS specs.

For instance, in Figma we've only had a reliable way of adding something simple like button padding (where you can create a reusable button that will expand as you type a longer label) for a year. There have been plugins that did it before that, but they weren't reliable. This is crazy when you consider you've had the ability to add padding to a box in CSS for decades. At the same time, try doing a complex layout in HTML/CSS, which requires you to learn about flexbox, floats, position, and/or CSS grid. Compare that to the ability to just draw a box, move, scale, and rotate it in a design tool.

So I see design tools and browser tools converging over time to allow designers, engineers, even product managers a layer of abstraction over interfaces that feels much more intuitive, with less duplication. Right now, I have components in Figma that mirror components we use in React, though this is usually manual effort which is also a bit crazy. I don't really count WYSIWYG editors as having figured this out yet, since they produce garbage code in my experience.