Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools:

We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience.

One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer’s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what’s to come.

Matthew then looks at how this combination of code and design has been improving his own design process, specifically on the “story cards” that appear on the homepage of the WSJ:

A tiny bit of NodeJS fills in the cards with live data from the WSJ.com home page. I can make small changes to parts of the component and see how the system reacts in a matter of seconds. This multiplicative process means that small changes have a huge output, making my designs much more comprehensive in the process.

I really can’t wait to see how our design tools are evolve. It’s a thoroughly exciting time to be a designer that’s interested in code.

Direct Link to Article — Permalink

The post Designing With Code appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2PkGXyy
via IFTTT