HashiCorp

Cultivating designer-developer collaboration through education

Design system maintenance, advocacy, and progression is not just driven by tactical component work; educating designers around the strategies and methods used to build applications and realize their design vision in code is vital to scalable applications and understanding the lifecycle of a design system.

Project type

Project role

Tools

Project timeline

6 weeks

Supporting educational content and guidance for consumers is not a foreign concept to design system maintainers. The design system team often has eyes throughout a product organization and helps to connect the dots across different projects, which naturally leads to the facilitation of educational efforts geared towards individual contributor

This project kicked off a series of educational initiatives spearheaded by the HashiCorp design system team with a number of core focus areas:

Up-leveling designer skills with the tooling they use on a daily basis
Facilitating the translation from design to production code and understanding the more technical side of the product implementation
How to use the system, when to break components, and the composition of multiple components together into larger patterns

This project focused on the translation of Figma (and other design tools) to code and understanding where to make the extra effort for an engineer to ensure a seamless translation to production code.

Here's where I come in

In this project I was responsible for the end-to-end delivery of an hours worth of educational content broken down into easily digestible chunks, handling the ideation and writing of content, creation of shareable presentation decks, filming and producing the talent (aka, me), and editing into a format to be consumed by designers and managers in our internal education platform.

Through the lens of how a static design tool like Figma works and translates (or doesn't translate) to code, I focused on:

Understanding the document object model (DOM)
Layout modes and the box model
Responsiveness and reflow

There's a natural progression to this content:

Familiarity with the DOM is essential when designing and building anything on the web
Understanding how the DOM is manipulated visually with the box model and CSS layout modes
Visualizing how DOM nodes reflow and stack naturally (and unnaturally) in the DOM as the viewport changes in dimensions.

However the most important part of this course is understanding when it's time to get out of Figma and into the browser; use the tools for what they are intended for rather than forcing them to do things that won't benefit the product roadmap and waste your time.

Here's a brief supercut of some of the standout concepts from the course.

Deliverables

The tangible assets and deliverables for this project spanned a multitude of content and media consumption types:

Core video assets for each progressive concept, including an introduction and conclusion, resulting in five sectioned videos.
Presentation decks walking through the content to be used both in the video content, and in a shareable format for future reference.
Figma mockups and example UI's based off of the representative examples.
Code samples building upon what was covered in Figma to draw parallels between engineering and design disciplines.