Improving Design to Dev Pipeline

Goal

Figma Design System Code Generation

Hypothesis

If our enterprise design system is refactored to leverage variants, variables, auto-layout, as well as StoryBook and Code Connect, then the handoff gap between designers and developers will be bridged.

Result

More sensible Figma components, composed component syntax in dev mode, and more.

Summary

‍

When I joined my current team, the design system hadn't been updated since 2020. It was unbelievably outdated. The inner sourced library was on Angular Material ver 6.

I began the hard task of refactoring the entire Figma library to utilize variants rather than slash naming (the good ole' days,) to leverage auto-layout, variables, and establish the use of Figma's Code Connect API.

I also found passionate engineering peers to build with.

‍

Process

‍

Find Passionate Front End UI Engineers → Branch DLS Library → Million Meetings → Merge Figma Library → Get Dedicated Sprint Time → Impress Executive → More Time → Merge Library → Advocate for Benefits of Changes→ Assess Breaking Changes → →→→→→→→→→→→→→

‍

Current State Design/ Dev Workflow

‍

Design Systems for enterprise apps are exceedingly complex. What I have found is that many teams just use theming in their apps but not our shared component library. Currently referential not prescriptive.

‍

Current State: Designers work is referenced, color matched, QA’d. Design System acts as referential because design system used across frameworks and tech stacks. Code generation is not feasible.

‍

Ideal State: Design System is prescriptive; providing organisms and interaction patterns to engineers and designers reduces time spent on easy path features. Wholistic alignment on components and patterns allows for code generation.

Design System

‍

We have a robust 170 component design system that is decently mature with a robust set of design tokens, atoms, and molecules.

Figma Components

Atomic and Molecule equivalents of Angular Material
Few custom components
Organisms created and maintained in other files
Across solution areas, organisms and interaction patterns are created but not contributed back to Design System
Components not continually updated to match updates in Angular Material.

‍

170 component design system including things such as: navigation patterns, input fields, data grids, alerts, toasts, etc.

Measuring Design System Adoption

The enterprise design system ensures a consistent look and feel across our product suite as well as gives designers and teams a place to start from when designing.

‍

Refactoring Design System Components

‍

Essential to making the Figma design system easier to use was refactoring components to utilize variants, auto-layout, and variables. The following examples are just some of the components that have been refactored.

‍

An example of some documentation for Chips and the Chip Inputs.

Figma Code Connect

‍

Figma's Code Connect is revolutionizing the way out teams interact with our UI designs. Rather than just seeing HTML and CSS information, composed syntax is readable within Figma's Dev Mode.

This small change is speeding up the way engineers find and use components as well as saving them time typing out cumbersome component names and properties.

‍

Inner sourced Component Repository - Atlas.UI

‍

Our data visualization color tokens and the custom breadcrumb component.

Measuring Adoption

‍

Every month, my teammate runs a script that tracks how many repos have Atlas.UI listed as a dependency. Some of these apps only use 1 component others use many. Many of the app use both Atlas.Ui and Angular Material themed like Atlas.UI.

‍

StoryBook

‍

We are in the process of implementing StoryBook in both our Inner-sourced Component Library and in any front end UI repo. The following StoryBook has been implemented in my product CareTend. We are following atomic design principles and the LibAppContainer (Top Nav,) is being shown. My product is "One App," but really many small apps strung together in a centralized container. This is how users can navigate between those smaller applications.

‍

‍

GitHub Figma Code Connect

‍

We are in the process of connecting our shared components to their respective GitHub Repos. This will provide our developers composed syntax right in the Figma Design.

‍

An image of a Master component and the code connect code viewable in Dev Mode.

‍

An Image of the Code Connect generated boiler plate connecting our GitHub component to the Figma Master Component.

‍

An instance of the lib-hdr being used in a Figma design.

‍

Future State Design/ Dev Workflow

‍

WellSky's UI Theme and Design System details easy path software UI; Allows designers and developers to spend more time on complex use cases and exceptions.

When Google Material and Angular Material update, it creates a chain reaction for updates down stream.
Clear process that allows for innovation. Reduces confusion. Impact of design scales considerably.
WellSky Apps are homogenized so that resources can be invested where needed. Onboarding cost is lowered and tribal knowledge disseminated.

‍