DS Design system

Figma design system for digital products

THE BRIEF

Integrating design system concepts, insights, and methodologies with AI to create a comprehensive Figma design system template.

MY ROLE
THE TEAM

I conceived, planned, and combined existing design systems into one that fits my ideal workflow up to this point. You can look through the Figma file here.

  • Product designer
APPROACH

After reading numerous articles on design systems and taking several design system courses, I set out to create a more polished version of my latest design system. I aimed to eliminate elements that were functional but difficult to scale, too restrictive, or cumbersome. Additionally, I wanted to incorporate ChatGPT into my workflow for practical use.

EXECUTION

A sous chef prepares the ingredients and tools before cooking begins. This ensures smooth kitchen operation, reducing stress and errors during busy service times. Product design is similar. By preparing and solving all the small problems (and there are plenty of those), a team or product designer can focus on the larger issues that arise.

Managing complexity is the biggest challenge. I utilized Atomic Design for the overall structure, down to the UI components level.

A design system isn't just a UI kit; it has a purpose beyond reusable components. It must be guided by principles specific to the company's mission, the core beliefs, brand vision, and product's value to the end-user. There is a hierarchy, and the design system has a place within it.

A color system is more complex than it initially appears. It needs to be comprehensive enough to fit every use case, yet flexible enough to allow for creative wiggle room. But there are rules of thumb that are tied to cultural, emotional reactions.

Typography, while complex, is linear. It needs to cover every use case, allowing designers to choose from a range of sizes and weights. If necessary, a new class can be created and added.

Drop shadows, icons, layout grids.

One button to rule them all. A single button asset component that fits all uses, controlled through the Figma side panel.

Input fields: All components are built using the Atomic Design methodology, controlled through the side panel, and integrated with the color and typography systems.

Figma's local variables, introduced in 2023, were a significant upgrade to local styles, which previously were insufficient for comprehensive color use.

As far as how I utilized AI, I am creating an eBook on this topic, to be released soon.

CONCLUSION

While not perfect, this was a good step forward. It tied together concepts that were previously disparate. My usage of Figma variables and layer naming conventions became much clearer. I considered adding dark mode, but it's so far removed from the brand colors that it seemed pointless. A designer needs to decide on the brand color, tweak the variant colors, ensure they work in the UI, and then create the dark mode version. It's worth trying in the next version.

What now?

I feel like I could recreate this from memory at this point, which was one of the intentions of the exercise. Moving forward, I plan to add sample interfaces that dynamically change when editing brand colors.

User-agent: * Disallow: /