pattern library

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:

...most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart.

For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development work back into the next round of design.

Mark then describes how his team went ahead and open-sourced html-sketchapp-cli, a command line tool for converting HTML documents into Sketch components. The idea is that this will ultimately save everyone from having to effectively copy and paste styles from the React components back to Sketch and vice-versa.

Looks like this is the second major stab at the React to Sketch. The last one that went around was AirBnB's React We normally think of the end result of design tooling being the code, so it's fascinating to see people finding newfound value in moving the other direction.

Building & Maintaining OUI (Optimizely’s UI Library): Part 1/2

The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.

When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a designer to fully own and understand. With few best practices, organization of the CSS was always ad hoc—“type styles in this section, colors in that section”—and every company did it differently. But as web applications, and the teams building them, grew larger and more complex it became harder to manage ballooning codebases while maintaining consistency across teams and projects.