What do you think of static design tools?

Designing in the browser is all the rage. 'Should designers code' is a long running meme. What do you think of the static design workflow that is very common in the agency world from a development perspective?

Especially the last couple of years the landscape for design tooling got pretty scattered. We have at least 5 major tools: Sketch, Figma, Adobe XD, InVision Studio and just recently Framer X launched.

If you design something for yourself, you go straight into the browser or first explore some options in static design tools? It's not really about which tools is the best but is there still a place for these tools in the design workflow?

Comments

[Joe Strouth]

It's rare that my first design concept is the final design. As a result, I have to iterate and explore to improve it. This is a lot easier to do by dragging rectangles around than it is to code new components. Writing code first constrains how far I can diverge from my initial design, due to the work required to refactor, which constrains the possibilities.

If your content is coming from an API, then changing the design might mean altering endpoints, http requests, templates, and more. I look at it as 'measure twice, cut once' - but with design as measuring the lay of the land and the implementation as the final cut.

I have nothing against throwing together a sketch in the browser, but if your design is meant to last, I think it's worth it to spend time in a medium unhindered by code.

[Danny de Vries]

At what point is 'dragging rectangles' around enough? When is it time to go to code? Whenever I feel like I have my main idea in a design tool I iterate further in the browser. And where do sketching and wireframes fit in your workflow?

[Joe Strouth]

When is it time to go to code?

When the design is approved by the people who need it - through user research and/or conversations with stakeholders. As soon as I'm getting signals that it's likely to meet the project goals.

where do sketching and wireframes fit in your workflow?

I almost always do rounds of sketching with pen and paper before jumping into Figma. Certain things need to be ironed out before drawing rectangles

• prioritized list of tasks that this screen needs to enable
• prioritized list of the on-screen elements needed to enable each of those

Sketching helps me figure out selection, placement, and order without the complexity of colors, typesetting, etc. Figuring it out one layer at a time, rather than needing to manage and rework everything with each iteration

[Danny de Vries]

I used to think things had to be designed with a tool like Sketch or Figma before moving on to design. However, with things like Docz and Storybook, it just doesn't make as much sense to me anymore.

Indeed for small 'basic components' I don't really see the need for recreating those components withing sketch for every project. I assume most people use a boilerplate or Sketch Library of some sort.

Designing UI components like buttons and forms is simply easier to do in code, and once it's done, there's no need to do double the work.

What about digital designers on your team that don't know how to code and a design tool is their only medium to express themselves?

The fact that I can't design a button that has 16 pixels of padding around whatever text I put inside it in any of the top design tools right now is absurd to me.

Haha! There are plugins (such as paddy) that can do this.