Hi, I’m a frontend designer. Think of me as a developer for your design team.

In one form or another I’ve been working with design systems for nearly 10 years. This began with pattern libraries and tooling at Inkling as we scaled our book production. A few years later at Optimizely I consolidated their inconsistent user experience into a set of simply-styled HTML components for use in their products. My most intensive work in this space, however, was as a founding member of a four-person Design Systems team at Thumbtack. With a 2018 rebranding as our starting point we built Thumbprint, a now mature combination of platform-agnostic design tokens, an icon library, components on multiple platforms, and robust documentation. Among my biggest contributions were researching and authoring its long-form entires, building and socializing our functional CSS library Atomic, and leading the effort to create a responsive image component that integrated with our image service.

One of the most satisfying aspects of my work is finding new ways to make designers (and sometimes developers) lives easier. To do this I’ve built a number of Chrome extensions and plugins. Pointbreak, for example, solves a long-standing problem of developers inevitably widening and narrowing their browsers to check layouts at various breakpoints. A second tool inspired by a presentation from CSSConf founder Nicole Sullivan is called CSS Dig. Among other things it scrutinizes website CSS to find color, type, and spacing values that are candidates for consolidation. And with growing popularity of Figma and their plug-in architecture, it’s now easy to add custom functionality for users. In addition to the annotation plug-in shown above I built a content generator to supply designers instant access to hundreds of Thumbtack’s category images.

In may cases a simple website with some custom interaction and data will do the trick. At Thumbtack the Brand team had created new illustrations but with no easy way to reference them for developers. To track them I had our designer enter the image IDs into a spreadsheet, using it as a database to generate a list of the illustrations. Additionally, to preview how images would render at different sizes and aspect ratios, I build an image viewer. It includes all the options our image service provides and the URL can be shared by anyone in the company to ensure they are rendering as expected. And the Thumbprint Icon library, a non-public part of the Thumbprint Design System, is another example of building a UI to help users find icons and the code they needed to use them. There are many other examples of web tools I’ve built featured in Building Inkling’s Digital Books post.