<workflow id="figma node.js style-dictionary git datadog" date="oct2021-apr2022"/>

The main project of my internship at National Public Radio as a part of the design operations team was a research into the possibilities of design tokens to simplify the handover of SVG icons from designers to developers. Establishing a new wokflow meant working around a complex architecture of the NPR's web assets, re-organizing how SVG icons are stored on the server, and developing a new design system for web icons and their colors.
This project is currently in progress and documentation is being constantly updated!

First things first: what are the design tokens?

• A system to cascade styles defined in one document (i.e., a Figma doc) down to all platforms with one (or maybe, 2-3…) clicks.
• Allows to organize a robust system in one place and integrate on different platforms using the same process and logic.
• Can help codify: colors, typography, grids, sizes, spacing, padding, media queries, radii, borders, and icons.

Philosophy behind the design tokens

An often-overlooked part of modern product design is the efficiency of designer-to-dev or design system-to-final product pipelines. With an increased attention towards user-facing design (which is undoubtedly super important!), many teams sacrifice designing a better process of the handover of design assets and interfaces. This is where design tokens can come into play, allowing a designer, upon completion of their edits, automatically send them into Git and cascade them all the way into a mobile or web app with a few automatization tools.

Why design tokens are super useful for a big org (like NPR)

• They bridge the gap between designers and developers, since the usage of the workflow doesn't require coding knowledge (accessibility of tech tools is important on all levels).
• They help to avoid any need for communicating with developers (unless you want to!)
• Since Style Dictionary can parse tokens for as many different platforms as needed, they open up potential for a single-source, easy-to-update design system (this part didn't at all make it into the MVP. One day!..)
• Many ways to organize styles and many use-cases (more on that below!)

SVG icons use-case

Originally, I was exploring design tokens for the mobile version NPR's listening service NPR One. However, when the web team for npr.org had run into an issue of a disorganized directory of SVG icons (many duplicates, inconsistent sizing and coloring, etc.), I realized that design tokens would be very well-fitted to solve it.
I figured out a system of storing SVG icons separately from their colors, and using a plugin DSync (credit to Liza Svitanko), built a system of packaging the SVG code and color information together.

Auxiliary work

In order to figure out the most effieicent structure of structuing SVGs, I partnered up with developers on the web team to conduct a comprehensive audit of existing icons and track where they are stored, the logic behind color variations, and calls from externals servers.

Since the project is in progress, this page will be updated on the regular basis.