It's Time for a DevTools for Designers
Hi all, I&#x27;m the author of the article. Thanks very much for linking it here.<p>It&#x27;s very easy to fall back on entrenched opinions and unhelpful developer-vs-designer stereotypes, and see any call for a visual tool to be one to remove or demote code from the process altogether. That is absolutely not what the article states or is about.<p>I&#x27;m adamantly against canned solutions that make things easier for designers but harder for developers; rather, I want something that merges the power of code-centric tools with the speed and approachability of visual tools.<p>Basically: Visual Studio Code + DevTools + Codepen + a browser rendering engine + the stuff we use Gulp &#x2F; Grunt &#x2F; Browsersync &#x2F; Sass etc for on the command-line, but bundled into something useful for non-developers - with added GUI deliciousness that would obey good code rules.<p>Rather than just &#x27;draw anywhere&#x27; and getting all that FrontPage-y style rule nightmare, it might be more &#x27;define a grid, then draw a div into a grid cell, then either create or apply a class,&#x27; etc.<p>Interaction is definitely supposed to be part of this (something I did not go into depth with in the article) - defining states for sure, as well as animation.<p>One use context is creating a component library &#x2F; pattern library that will be consumed by several different user types. For instance, Material.io or the Salesforce Lightning Design System, IBM&#x27;s Carbon Design System, etc, intended for producing web applications.<p>Designers need a style guide, front-end developers or &#x27;designer-devs&#x27; want to see live examples with code snippets, other kinds of developers might want to know about data sources and where the variables are used in a particular component.<p>A visual tool should make it very easy to both create and edit such components, and maybe add a bit of metadata like &#x27;this component is recommended for use as the nav&#x27; and &#x27;it has these dependencies&#x27; - so you can more easily export it into something like Clearleft&#x27;s Fractal tool, etc. In the long run, such metadata might let an opinionated tool automatically snap things into place &#x2F; recommended source order to guide beginners, but always modifiable by developers.<p>And similarly, being able to open a library of components, see a &#x27;molecule&#x27; like a nav bar, then drill down to atomic components like ULs, buttons, see what the data placeholders are, etc - preferably also with some human-readable annotations.<p>(Obviously I am handwaving the complexity of actually doing something like this, but conceptually, it _ought_ to be doable.)<p>By its nature, I would want this kind of tool to promote understanding of CSS inheritance and modularity, so that it would lend itself to creating reusable symbol-objects, much as we are used to in Adobe apps and Sketch, and previsualize the changes to the cascade, or get warnings that &quot;x other classes depend on this, are you sure?&quot;<p>For instance, InDesign style palettes can roughly map onto text and object styles - your basic H1-H6, standard HTML styled elements. The missing part in Adobe is scoped&#x2F;modified or additive styles, but that&#x27;s just a conceptual step forward. In a code context, an &quot;H1, but inside a product grid&quot; style can decompose to BEM classes, and the app or tool should make this clear as we already do with Inspector computed views.<p>So just to clarify, what this really should do is help visual designers make the leap into becoming hybrid designer-developers (and vice versa) but if someone simply wants to use it to sketch things out freehand, regardless of end use or code quality, it should help them do that, albeit in an opinionated way under the covers.<p>As I allude to in the article, we don&#x27;t ask visual designers to write raw PostScript. We depend on the tools we use to author it correctly when we draw boxes or type text into our documents; the Web has added robustness. I&#x27;m not that worried about it producing spaghetti code.<p>Any visual tool should produce at least well-structured, readable code; lean towards making sure it&#x27;s standards-compliant &#x2F; uses best practices; but also is flexible enough to let you author it in any way that is suitable for your needs, so you&#x27;re not trapped in canned layouts or overly-prescriptive boundaries.