Optimizing the CSS-to-Sketch Workflow with Klepto
A custom design automator.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
Klepto is a Chrome extension with a companion Sketch plugin that allows designers to copy CSS font styles from live websites and paste them directly into Sketch as Sketch styles. It was created in collaboration with Blake Quigley during my time at Yext as a Visual Web Design intern. Klepto reduces the number of copied items from five, to just one.
Reverse Engineering Branded Typography
The Consulting Design team at Yext creates custom landing pages for Fortune 500 clients, from Taco Bell to NYX Cosmetics. This means that when you search for “Taco Bell near Union Square,” the first result will lead to a custom landing page for Taco Bell Union Square, designed and powered by Yext with information that is up to date and customized to that particular location. In order to design these subpages to match a client’s brand aesthetic, the team needs to pull client’s styles from their site into Sketch. Since not all clients have custom Sketch libraries, style guides, or even their own design team, the designers at Yext have to compile these styles manually, using the client’s site as a source of truth. At the beginning of every project, Yext designers strategically craft a style guide full of scavenged visual patterns from the client’s website or provided assets. The process consists of using Web dev tools to inspect elements, selecting the HTML element of the typographic component, and replicating all the CSS as a text style in Sketch—from font-family to letter-spacing. Klepto was born out of a vision that it is possible to automate this process, accelerating the team’s workflow.
This ambitious project was the first of many collaborations to come between design and developer interns at Yext. Its success exemplifies the symbiotic nature of design and software engineering; good design is powered by smart development choices and design accelerators. If you’d like to read more about Klepto’s syncretic design process and any future developments for this tool, check out the details on my portfolio website!
