“Designers shouldn’t ALSO have to code!”
This is a refrain I hear a lot. Some designers feel working with code is too complex; others that it is exploitative. They are not wrong. But prototyping is a transformative practice with profound implications for design. Contributing to a prototype opens new ways of communicating with users and other stakeholders, all in the universal language of the web.
Designers can’t just leave the room
There is too much at stake for designers to close the door on prototyping. What we need are no- and low-code tools that meet designers where we are at.
Designers are very interested in these tools, too. According to this uxtools.com survey, after Figma, the next 4 tools that designers are excited about in 2023 are no-code web builders or prototypers.
And the truth is using these tools is no more difficult than the complex interfaces we already rely on: Figma, Illustrator, Photoshop, etc. Adobe’s user guide for Photoshop is nearly 1000 pages long! Even Jira is a hot mess of features and workflows. As designers, we use immensely complex tools all the time.
A seismic shift
The list of no- and low-code options keeps growing (Webflow, Framer, Penpot, Blocs, Bootstrap Studio, WordPress, UXPin, and many, many more); It is part of a seismic shift happening in design to break down silos and bring product and engineering closer together.
Where these tools fall short for me is that they don’t support true co-creation between product and engineering. Many try to improve handoff, or to limit handoff drift. Very few attempt to eliminate handoff altogether, which is my goal.
But the time has come. The tools we need to work as one team are actually being built RIGHT NOW. It’s exciting.
Design Tokens
One of the elements in this industry shift is the framework for atomized design being developed by the W3C design tokens community group. Design tokens are a way to build and share digital designs. It will enable developers and designers to work in the tools that they prefer while contributing directly to a shared final product. Per their first roundable notes, a number of the most popular design tools are interested in or already working towards implementing design tokens.
“Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies.”
W3C design tokens community group
I want to share an up-and-coming tool that is embracing design tokens in order to build truly shared tooling for devs and designers.
Review: Drimz
Though still under development, Drimz.io is offering a different way to do product design. This is a no-code tool for designers, but what sets Drimz apart from others is their seamless integration with developer workflows. I recently got a behind the scenes look at how the project is developing and what their vision is for bringing design and dev teams closer together.
(note: this is not a sponsored review, I have zero interest in paid content. If I sound like an excited fan it is because I genuinely am. I think this tool will make the job of building products easier and help me eliminate handoff from my workflow.)
Drimz uses design tokens, which offers a new feature I have wanted in my workflow for a long time: the ability to validate design code as you go to ensure backend compatibility. All this without touching a line of html or css. As co-founder Tom Nipravsky put it, “With Drimz, designers are not managing classes or css. They are managing the design.”
Drimz outputs JSX and uses a CSS-IN-JS method. The major benefit, as the Drimz team put it, is no more “managing tons of .css files spread across the codebase.”
Another helpful collaborative feature is that developers are alerted if they call a class that doesn’t exist, and can easily see and track what updates the design team has pushed to the project.
When a designer publishes work from Drimz it is immediately available for developers to pull into their tool of choice via CLI. You can also pull your project’s existing repository into Drimz for designers to work on. Drimz explained “Both flows allow the code to merge to design and then back to code, so both the developer and the designer can benefit from changes and collaborate.”
“This is one of our main differentiations from other tools — the bi-directional capability that manifests at both a collaborative and technological level.“
Tom Nipravsky, Drimz co-founder
Other tools I have tested are a one-way street. For example, with Bootstrap Studio you can export and edit the code directly, but you cannot then re-import into BSS. And there are many prototyping tools like Penpot, where you are not contributing to the real product, just a simulation, so it is a walled garden only for designers. With Drimz, they are specifically building a tool that allows designers and developers to co-develop the end product.
One feature I would love to see as part of Drimz is a “low fidelity” mode. Working in high fidelity too early in a project gives the impression that things are done and kills discovery. In Drimz, your design can have multiple themes (which they call token sets). I envision a default low-fidelity token set with overriding styles and JS, such as a monochrome palette, a basic font, and replacing images with grey boxes. I would use this theme when I need to focus stakeholders on functionality or basic design elements like content hierarchy. I can see how a Drimz theme could facilitate that task without disrupting other design or development work.
I love how Drimz is elegantly balancing the needs of designers and developers as they work toward their beta release, and I look forward to seeing more. They are open for early access signup now: https://www.drimz.io/. A lot of exciting core functionality is still in the pipeline, but if there is enough interest, maybe we can nudge them to make their open beta available sooner. I am definitely looking forward to testing it with my team.
What have you tried?
This is an exciting space for innovation. Are there No- or Low-Code tools you are testing, or thinking of trying out this year? Are you co-creating with product and engineering? Reach out, I’d love to hear about it and share ideas.