I will admit as a UX designer I have never really been a fan of design tools. They are a means to an end, not an end in itself. I get in and get out, know or learn enough to get it to do what I need it to do, then get back to designing. For my money, biggest development in the history of design tools was the whiteboard…when you added the printer it was a game changer! We wore out the Panaboard at Emerson.
But I digress.. so to digress more, back in the day there was no need to tell your UI developer (and back in the day most devs HATED doing UI work, it was beneath their skill) that your dropdown needed a stroke of 1 px width #5b5b5e and drop shadow of blah-de-blip, yada yada, zip bing. There was only one drop down in Windows 3.1 and you get what you get. Your set of symbols was defined for you, your job as a designer was to choose the proper component and arrange them in the proper way, hopefully to solve some user problem.
Visual Basic then was the first design tool, since you could grab from the palette of UI controls, drop them on the screen, print it out and hand it to the developer. Who might then say, why don’t you just do it. From there, a slew of graphic design tools and presentation tools fit the purpose — tell me a designer who hasn’t gotten an MSPaint mockup from their product manager. Photoshop was the instigator of Killer Websites, remember? Just make your extravagant graphic as a bitmap and slice it to load in your table cells. MS Visio, Powerpoint, even Excel had GUI templates — and using Visual Studio for applications you could even build a front-end.
Web applications, HTML/CSS change the GUI forever — there are now infinite ways to graphically design a dropdown, poorly. (Turns out, the most usable designs are the ones that look mostly like Windows95 components–‘intuitive’ means they’ve seen it before..) With that came the specialty design tools — Omnigraffle! Sketch! MS Expression Blend (my personal favorite)! Balsamiq (still love it, but nobody takes it seriously)! And since none of these did exactly what you needed, you had to stack all the tools together, e.g.
- Sketch for mockups and symbols
- Abstract for version control
- InVision for clickable prototypes
- Zeplin for CSS inspect (dev delivery is a thing!)
- AxureRP for interactive prototypes (data, conditionals)
Each of them tried to add a little bit of the other, but never enough to do what you needed. Then Figma, the upstart, started us all off with a free trial (that still serves the purpose for a lot of things). Upgrade to the paid version and you get libraries (for shared styles and symbols – i.e. design systems), versioning, collaboration, etc. Cool. And you can share prototypes with the execs (click through, not interactive), and devs can inspect the code, whether you want them to or not (yeah, I never meant the left margin to be 11px and the right to be 10.5, I just expected you to figure it out.) So you could knock 4 of the 5 tools off your list.
Then Dev Mode. Hence the Doctorow reference. So used to be you had your workspace, then a side panel with 3 tabs for Design, Prototype, and Inspect. Visitors would just have the Inspect tab, so they could see arcane details of a shape like corner radius, color, font size, weight etc.. And devs used this so they could make the code (even copy CSS) just like your picture. Then at some point, I admit I wasn’t paying attention, the Inspect tab was moved to a toggle ‘Dev Mode’. Ok cool, I can adapt, I will mark things as dev ready and send out Dev Mode links and everybody is happy.
Until today, I get my first message from a dev saying ‘why can’t I see anything’. Ok, let me check. OK I see…enshittification. Add a new feature with lots of other pile-on features I don’t need or care about, and charge more for it. So now I gotta figure out how to tell our devs the new workarounds.
When Adobe announced purchase/merger of Figma, there was much wailing and gnashing of teeth. Also, much discussion on the business side of investors needing to get their money back — the ‘exit plan’. When the deal fell through (thanks Europe!) it was likely a good thing for both companies. But that means one less design tool competitor (bye Adobe XD), and more ‘monetization’ from Figma to charge licenses for what worked fine for free all along. Reminds me of InVision charged $500/yr/seat for DSM (design system manager) a glorified website for your design system. Then just as I wrote that line I found out InVision is gone.
But let me wrap it around; as designers we don’t need Inspect mode – we don’t need redlined comps, we shouldn’t have to define properties for devs. The design system does this. Build the components, have spacing and typography defined in the templates… DON’T MEASURE MY MARGINS! (I didn’t). So what we did with Visual Basic in the 90’s.
So. Oh well, shrug emoji. Let me close so I can watch my shows on Amazon Prime Video… Now With Ads!