I work for a web studio. Back in the day, we didn't design all of our websites in house. One of our biggest clients would send us designs and we would build them. In the old days, this resulted in a catastrophic amount of back-and-forth, often pushing development to the eleventh hour and being a huge pain in the ass for everyone.
At some point in the background, the philosophy of Design Systems took off in the thoughtosphere. My boss and I took notice, and decided to incorporate the philosophy into our work. Since we weren't designing these sites from the ground up, we couldn't implement the approach traditionally, so we came up with our own process. Long story short, it sped up our entire team's workflow three-fold, I shit you not.
The Problem
Initially, the webpage designs that our developers were being given consisted of flat, full page compositions, and the individuals creating these designs weren't specifically web designers. There was no indication of interactivity, no direction for responsiveness, and the designs were rife with inconsistencies that would have been fine in print design, but couldn't fly in the medium of the web. We worked this way for years and suffered.
My boss and I couldn't do anything about the way information was being given to our team, but we could do something about the way our developers saw it.
UX Intake
We invented a new role. We called it UX Intake, because this is the person who receives the page designs from the non-web designers and runs them through the process of turning a flat design into a Design System. This requires an understanding of the original designer's intent and a deep knowledge of how websites are made.
This person is a translator between languages, a UX designer for which the target user is the developer. This person is me.
How to deliver?
Functionally, what we needed was a template. Plenty such things exist out in the web, specifically for design systems, but nothing quite fit the bill for our situation. It needed to be native to figma, and in order to be truly successful, must be incredibly easy to use for everyone involved: the UX designer doing intake, the project managers who need to handle requirements, and crystal clear for the developers reading the designs.
System for Systems
I devised a series of figma components, customizable for every usecase, perfectly resizable using autolayout, and just enough component variables to fit our usage, and no more. It took a few months of trial and updates, but we were able to implement this tool into our workflow to create super clean design systems that were incredibly easy to build and edit.
