May 31, 2018

New School Design Tools – The End of Design Specs

The hushed words “Spec Sheets,” “Design Guide,” “Style Book” and other such utterings heard around the hallways, and conference rooms incite waves of quiet panic in all designers leading to finding a dark supply closet for the ceremonial gnashing of teeth and wailing of despair.

And then the nightmare starts. And never stops. Days and weeks laboring over red lines, callouts, minute measurements, state diagrams, pixel rulers, corner cases and highly designed glossy style guidebooks. Only to have outdated specs, inaccurate measurements, or new functionality undocumented.

But this year, that nightmare officially stops. I’m here to announce that indeed, technology designers, you do not need to make specs anymore!

In the day and age, intelligent automation has come to the rescue. Specs for engineers can be generated AUTOMATICALLY. With auto-specs, you just roll over the design and see all layout specs and styles - even the CSS snippet can be created automatically.

Cool, right?!! Of course, it is – product faster to market and designs more accurately implemented. Hard to argue with that value prop.

So let’s take a short tour of a few new tools and services that have rescued us from ‘spec hell’ and made it easier and faster to hand off to developers, who can get precise measurements, copy CSS snippets, download assets and more!


The Sketch phenomenon continues its supremacy as the battle for the ultimate design tool has been won (at least temporarily) by Sketch, knocking out Fireworks, Photoshop, Illustrator, and finally Omnigraffle, as the UX designer tool of choice. Lacking the artistic detailing capabilities of the Adobe suite, it makes up for it in the simplicity and friendliness of the UI with the unmatched exporting capabilities to almost anything on earth.

Adobe XD

Adobe’s all-out attempt at recapturing its core market of designers, XD has gotten rave reviews from almost everyone that has used it. One small problem, it’s a design tool on its own island. Adobe believes in the Apple strategy of single tool ecosphere.

Zeplin combines a fun and friendly interface and amazing syncing ability. It’s like magic, you just click a button on your Sketch designs and off they go into the auto-spec generator magic machine.

Instantly, your engineers have all the specs of your design 100% accurate and universally accessed. The downside is the technology is still getting iterated so there is a lot of hit and miss and needed functionality still.

Invision Inspector

Invision has been paving the way for disruptive new design experiences for more time than you think, cornering the niche of the designer’s workflow and collaboration toolset. Building on that success, Invision has launched its auto-spec tool, CraftManager, which syncs to your designs and produces all the specs your engineers need to know.

Remember those good ole’ days of trying the build and maintain a complete brand book, style guide, or design system spec? Oh, those fond memories.


Welcome to tools like Frontify, which instantly generate online style guides with only the most minimal information from you. Maintaining is more comfortable, and because it’s cloud-based, there is always only one “single source of truth”.

Enter a new generation of tools that try to combine design, prototype, and collaboration into a single tool. Take Framer – a one stop shop design environment that allows high-speed and friendly configuration of all manner of connected devices.

Brought to you by the good folks at Facebook, Origami is part of a new generation of mobile design tools that take the concept of a prototype to the next level. Not for the faint of heart, the system allows a tech-savvy designer to build an object-oriented interactive prototype which mirrors actual mobile app functionality. Origami is truly the king of mobile prototyping tools. With the interaction design so faithful, implementing it with engineers goes silky smooth.

These tools are in the vanguard of a new generation of platforms that are making the design process more fluid, more connected, and giving our products a higher quality. Would love to hear the methods and tools you are using! Send a note my way.

Jeff Williams is a Product Strategy & UX Design Lead at Xinn.