Are Design tools holding us back?

I recently read this article called Design tools are holding us back. It made me think, and that’s why I’d decided to share my opinion.

My name is Daniel Hodvogner and I’m a lucky/unlucky front-end developer who is involved with UI/UX design since my university years. For a long-long time, I thinking about how can we create design tools that are convenient for designers, and also helpful for the developers. Tools what enable teams to rapidly implement new designs, which can become part of a modern development pipeline.

Core concept

Coding and Design they have a very different mentality and focus.

While coding HTML/CSS, we focus on readability, transparency, reusability of the code itself, not just the visual outcome what our browser will render from our code.

Oppositely when we design we have to focus on the on-screen information architecture, the general look and feel, we have to create visual hierarchy and consistency across the whole application.

So, how we try to replace our current design tools? By creating new applications which are capable of visual design (with or without the box-model) and generate HTML/CSS. This raises a few concerns on my side:

What’s wrong with the generated code?

Experienced front-end developers can write tight well-optimized HTML. Keeping the DOM un-heavy is optimal for the browsers to render the pages faster and, it also helps them to maintain the code with ease. Not to mention usually they are the experts whose figure out how to separate the application into (web)components but keep in mind these components usually very-very different from those what you have in your design system!

With generated CSS code I only have one issue: We don’t use CSS anymore. In modern front-end development 99.9%, we use SCSS or a similar superset language what can be transpiled into CSS. During this process, the browser-specific (aka: -webkit, -moz) attributes generated automatically (so we don’t need to care about them anymore) unused selectors are removed to decrease package size and improve load speeds and let’s not talk about media queries, mixins, variables and other tricks.

Design handover and version control

In my “idealistic” dream tool design handover is not needed anymore, whenever the design is changed it automatically reflected into the front-end code and vice versa. To be honest I don’t have much experience with tools like Framer or Webflow which promise of achieving something like this but with the rapid evolution of front-end framework trends, I’m sceptical that any of these tools will be able to keep up and deliver on such promises. And they can be seamlessly integrated into any modern development process without creating new and unnecessary maintenance and changes in the development pipeline.

And let’s not forget about our developer friends. They will surely add a lot of framework-specific extra attributes, elements like *ngFors v-fors all over our generated HTML. They will remove all our placeholder elements and put loops everywhere “destroying” our well crafted and representative state of our screens. Let me ask the question: How these changes should be reflected back into your design?

Also, how can we showcase to our clients our awesome solution to that nasty edge case what would need 16 duplicated artboard in a Sketch prototype, with these new “design to code” software?

I don’t know the answers, maybe I just lack the experience, so please feel free to share yours if you have any and I also promise when I find the time to mess around with them more I will update this article (or write a new one).

Conclusion

Unfortunately, I don’t have the “correct answer”, I’m not able to share the best practice or talking about revolutionary new industry standard. I also struggle in my work to find the balance and the most effective way to support my two roles in my own team.

As a well-experienced developer, I like better writing the front-end code myself and let my colleges fill the rest more “back-endish” stuff (states, services etc.) I also like to build SCSS system on my own with clever mixins and multiple variables to help to maintain both the codebase and the visual consistency in the long run.

On the other hand, when I design, I need the freedom of Sketch. Quickly grouping stuff together, rearranging the whole screen multiple times, creating multiple layouts, iterate quickly and with a few clicks — and many duplicated artboards — create inVision prototypes to help me back up our ideas when I explain them to our clients.

With the upcoming web components and microframeworks, a lot could change in the future, but currently, I don’t see any viable next-gen tools what could drastically change our ways of designing. I believe we need close collaboration between the designer and developer community to work out new solutions, maybe new technologies that can seamlessly integrate into a typical development pipeline, and will bring the design process to a whole new level in the future.