Avoid Non-Sugar Sweeteners, WHO Advises

If you work on or work with a web design system in Figma, you’ve probably seen the conventional way of organizing a design system library…Within one Figma project housing the library:One file contains the foundation or style-guide (colors, type, etc.).One file contains the web components for light mode.One file contains the web components for dark mode.One file contains documentation needed for embedding into the platform you house documentation — I.E. Zero Height.

It’s straightforward. It keeps things organized for the design system’s users. It’s easy for product designers to pull these assets from the library into their Figma canvas. Easy-peasy.

Well…it’s easy until you get one of these terrifying and menacing alert banners at the top of your Figma canvas. You can get a range of banners shown below, which I like to refer to with the DEFCON scale.

That’s what happened to my fellow design system teammates and me within our file containing our light mode web components.We had branches that we could not merge in the main file, and couldn’t work in our light mode for web file without feeling like the file would self-annihilate.Thankfully, our design system team was already prepping for our next new version of the library, Version 2.0.0, and we could use it as an opportunity to see what is causing this file memory issue in our current library and what we can do to prevent it in our new library.