Producing a globally editable atomic design system with linked complex components and variants in Figma

Imac mockup with design system on screen

Date Completed

April, 2022

Overview

Everest is a growing fully remote design agency specializing in design systems and product design.

I referenced material design and popular design systems to organize the production of components commonly used in Everest's current client work in the Fintech space.

Working remotely with one other designer, I managed all aspects of design system production, selecting and adding tasks to Asana and tracking them through to completion.

Team Goals

Create the appropriate atoms allowing for global changes.
Create master components as nested atomic instances.
Maintain linkages with masters for all component variants.
Arrange atoms masters and variants for ease of use from Figma's assets and component panels.

Download Figma File View CSS component

Assets Panel Organization

The Design system for Everest was created with the goal of organizing the assets panel of Figma for speed.

Components are organized to display molecules grouped by category, for easy selection from the assets panel.

Performant component variant naming

Component variants are named with properties that display in the Figma component menu for quick selection and configuration.

Annotated atomic linked variant structure

To support global editing, atoms were created for use in molecules created as variants maintaining linkage.

Annotated variants for states and styles

To support fast selection of variant states and styles from the Figma component menu.

Auto-layout structure for responsive components

From atoms up to components, auto-layout is used to ensure all elements are fully responsive.

Component auto-layout structure in Figma

Reflections & takeaways

In the future, I would very much like to produce a design system in front-end code using Webflow. I like the idea of proving that this approach would reduce costs and improve quality. It would be great to see UI designers free to focus on patterns, consistency, states, and usability while leaving the issues of responsiveness and global editing to someone else.

Figma really isn't the right tool for producing CSS fidelity. A Webflow design system would draw so many aspects of interactive design fully into the design team while also speaking the preferred language of developers. With a system of components built in-code, you would also get a platform for interaction design and prototype user testing.