Crystal Design System

The Figma design system we created has been amazing to speed up design work. I did a bunch of the original structure and then moved into an architect/reviewer role. Tiffany Trinh on my team did the lion’s share of the work. We iterated numerous times, especially when Figma added new functionality such as Auto Layout. At first, we (Tiffany!) used auto-layout too much, and then we figured out the right balance.

The UX of a Design System

It’s actually very similar to designing an application. You make personas (of designers) and look at use cases. Your goal is to allow them to make applications rapidly with as few new components as possible. They should drag things from Figma assets and then make overrides or use variants. The interactions should be built in and every component should be resizable for maximum flexibility.

Here are some screenshots. Contact me for a Figma file to look at the details.

The Figma Design System
Example Page
Homemade Icons by Alexis!

The end result was a beautiful interface with lots of room to add features without making it crowded.

The team did an excellent job and set the standard for my future endeavors.