Since Sketch arrived on the scene (and Figma moved in and ate its lunch) there has been a glorious movement towards designers working with tooling that aligns with what is actually deployed. The design assets that are exported from these tools are actually close to workable code.
This trend has been exciting to watch and developers world-over have rejoiced.
The gap has narrowed.
But what if the gap could be completely removed? Figma et. al. have done a brilliant job and taken us close to the finish line, but unsurprisingly, it’s the final mile that’s the hardest.
Exported markup and CSS from these design tools are valid, but not quite right. Developers still need to take the assets and reformat and optimize. It’s much much better than ye olde flat image files, but there is still work to be done and this work lengthens the product cycle as well as introduces implementation risk.
How is this achieved? When designers design directly in the browser!
I have found that the learning curve of a tool like Figma is no easier than that of learning HTML and CSS. With modern IDE tooling for browser refreshing, syntax prompts etc, it takes nothing for me to work directly in a single file to craft a design from scratch. The outcome of this is:
- I never have to wonder how difficult it will be to build something I design – cause I built it.
- The design assets I hand over to the development team are effectively functional components (they love this!)
- The designs when shared for review are “real world” useable. Very little imagination is needed by Product Owners etc to understand how well the designs execute on their vision.
As tech product teams continuously look for ways to simplify their workflows and ship better products faster, this kind of refocus of the role of design can lend some serious superpowers.
At least I think so.