Overview

Design System Strategy (for web)

Design system

Code

Version control

Objectives

Create a file strategy in Figma for the new release of the Forge UI Design System (Version 2.0) that allows for easy scalability, hand-off to developers, and general consumption of the library.

Completion

March 2023

Pain points

Current Design System structure

In one Figma project housing the current web System:
  • Foundation file (also called a style-guide)

  • Light mode - Web Components file

  • Dark mode - Web Components file

  • Documentation file (integrated with third-party)

Problems with current file structure

  1. Figma file memory issues

We cannot merge branches due to maxed out files with little available space.

  1. Figma design & Storybook code parity

Figma property names are not consistent with Storybook control names.

Toggle in Figma

Toggle in Storybook

  1. No established release cadence

We publish the Figma design system ad-hoc with no notice to our users.

Figma files

What was contributing to the Figma file memory?

The following issues were found in an audit of our Light Theme for Web Figma file:
  1. ❌ Housing too many components in one file

Storing everything that makes up the Design System isn't sustainable as the System matures.

  1. ❌ Hiding layers in the master component

Hidden layers do not appear in the UI, but do impact file memory that will also trickle to adopter files.

  1. ❌ Including nested elements in the library

The atomic elements are not the final component & take up space in the Figma file.

  1. ❌ Housing one omni-complex component

Complex components impact Figma performance since one component may be storing over 100 variants.

  1. ❌ Offering near duplicate components

Components with minor differences are taking file memory to display the same element.

How I fixed each Figma issue

Each was addressed and fixed in the new 2.0 version of the Design System
  1. ✅ Splitting the Design System into chunks

The System was grouped into the core library, UI patterns, & data visualizations to better space all offerings.

  1. ✅ Auditing and deleting all hidden layers

Hidden layers were audited for as components were migrated from 1.0 to 2.0 Systems.

  1. ✅ Creating a 'Nested Elements' Figma file

The Nested Elements file houses the atomic build of the core components, & wires into the core library file.

  1. ✅ Breaking up one large component

Components such as a button were broken into many components based on component type.

  1. ✅ Combining near duplicate components

Figma properties were added to components to store previously separated components as variants of each other.

The new Figma file structure

In one Figma project housing the new web Design System we have:
  • Foundation file (also called a style-guide)

  • Nested elements file

  • Light mode - Web Components file

  • Dark mode - Web Components file

  • Data visualizations file

  • UI Patterns file

  • Documentation file (integrated with third-party)

Key takeaways

  1. Light Theme - Web component file memory decreased from 0.87GB to 0.35GB

Before:
After:
  1. Component pages in the core library are organized & easy to sort through

Before:
After:

Parity

Design and code are not one-to-one

Figma designs & Storybook code for Forge UI were audited for parity; areas of improvement were necessary to prevent future confusion for our team and adopting teams.

  1. ❌ Color tokens aren't consistent between Figma and Storybook

When atomic elements do not match, there will be confusion in dev hand-off.

Tokens in Figma

Tokens in Storybook

  1. ❌ Inconsistent property and control naming across design and code

Differences in naming conventions can also lead to confusion during dev hand-off.

Global Header in Figma

Global Header in Storybook

  1. ❌ Components supported in Figma are not supported in Storybook

No way to tell what components in design have fully supported code ready to be used.

Dropdown component available in Figma

Dropdown component not available in Storybook

Creating better design & code parity

Figma designs were enhanced to better match what was supported in Storybook.

  1. ✅ Color tokens in Figma were modified to match Storybook tokens

Colors in Figma were given greater intention in usage with the modified names from Storybook.

  1. ✅ Component properties in Figma were modified to better match Storybook controls

Component APIs were added in Figma to show any differences between the applications.

  1. ✅ Status indicators were added in Figma file to show which components were code-ready

Allows for easy analysis of what needs to be developed and what is ready to be used.

Releases

The Design System has no release cadence

Publishing the System ad-hoc and unscheduled causes negative sentiments of System adopters and less usage rates.

  1. ❌ Infrequent & unscheduled releases are a roadblock to designers

When atomic elements do not match, there will be confusion in dev hand-off.

  1. ❌ There is no version control; causes conflict design & dev

Adopters incorporating Design System updates can lead to dev-handoff confusion for feature teams.

  1. ❌ No publication description within each Figma update

Not using the version history in Figma means I have no idea what happened in the update.

Establishing a release cadence

Scheduling Design System updates is necessary for better communication and adoption rates of feature teams.

  1. ✅ Align updates with the product increment (PI) calendar

Schedule Figma publications with the sprint and PI calendar year to set System expectations.

  1. ✅ Use semantic version control

Differentiate updates between bug fixes, regular updates, & major updates.

  1. ✅ Maintain a change-log in the main file to have an easy to read version history

Allows for easy analysis of what needs to be developed and what is ready to be used.

Conclusion

Here's to version 2.0 of the Forge UI Design System

This project was tedious in finding resources to help form the right strategy for the new version of the Design System. 

It was rewarding to see what causes the nuances of Figma file memory issues, as well as what works well for other design systems.

Check out my Medium article on this strategy

The article addressing this same topic called "Organizing a web design system for scalability in Figma".

paschalallie@gmail.com

Connect with me

Copyright © Allie Paschal.