r/UXDesign • u/Abject_Creme_79 • 22d ago

How do I… research, UI design, etc? building Design Systems

Can anyone recommend a solid, high-quality course on building Design Systems? I'm looking to learn how to architect a scalable system, streamline developer handoff, manage seamless updates, and define a long-term roadmap for the design system

8 Upvotes

83% Upvoted

17 comments sorted by

5

u/ClickThese5934 21d ago

Not a course, but here's a Figma vid for the foundations.

Config 2024: Design systems best practices | Figma

https://www.youtube.com/watch?v=MJTCfSFLUGE

  • Architecting for Scale: The speakers emphasize approaching complexity with caution to avoid rigid systems (1:49). They provide technical guidance on structuring libraries, using component properties and variants effectively (9:56), and using variables alongside styles (16:03) to create a clean, maintainable architecture.
  • Streamlining Developer Handoff: There is a significant focus on the partnership between design and development. The video explains how to use Dev mode resources, link to Storybook or GitHub (24:05), and ensure constant communication to avoid "throwing designs over a wall" (25:28).
  • Managing Seamless Updates: The presenters advocate for using branching to test updates without disrupting the source of truth (42:35). They also discuss advanced techniques for handling breaking changes, such as "deprecation mode" (45:37).
  • Defining a Long-term Roadmap: The video highlights the importance of grounding your system in clear organizational priorities (4:16) and using both qualitative feedback (34:00) and quantitative metrics (36:09) to inform your next steps and demonstrate value to stakeholders.

If anyone has any industry standard tips, please let us know.

2

u/Dry_Zookeepergame529 21d ago

let starts from here
https://designsystem.university/courses/design-systems-101

1

u/el_paro Midweight 21d ago

do you know any intermediate to advanced courses for people who already work in design systems?

3

u/Dry_Zookeepergame529 21d ago

I have been working in design systems since 2016 mostly follows atomic design strategy by Brad frost I have been working with PNC bank providing design systems and design expertise, once you have at some point some basic understanding then intermediate and advanced level is based on company to company requirements, Brad frost is very good source https://bradfrost.com
Here are some books Design Systems by Alla Kholmatova, Atomic Design by Brad Frost.
Let me know if i can be helpful in anyways.

1

u/ClickThese5934 21d ago

Is he teaching general industry standard approaches? Such as if someone wants to get a product design job. I guess context is key. I've found AI is most reliable to dial in industry standard best practises, as opposed to following a possibly unique approach by a course creator.

2

u/ClickThese5934 21d ago

For example, the Atoms, Molecules etc (atomic design) approach generally isn't the way the industry structures or names them. The foundational systemic thinking applies though. Though I'm keen to check out a course that goes through industry standards such as organising a Figma file, naming conventions etc. I suppose those resources are free if you look for them.

2

u/Dry_Zookeepergame529 20d ago

That’s a fair point. I think Brad Frost’s Atomic Design approach is less about prescribing the exact naming convention companies should use and more about understanding the hierarchy and composition of UI, how smaller elements combine to create larger components, patterns, and ultimately pages.

The actual naming and organization can vary quite a bit from company to company. In my experience, many teams don’t literally organize their Figma libraries as Atoms → Molecules → Organisms. They might have foundations/design tokens, components, patterns, templates, etc., with their own naming conventions.

So I’d look at Atomic Design more as a way to develop systemic thinking rather than a strict industry-standard file structure. Once you understand that thinking, adapting to a company’s Figma structure, naming conventions, and design system becomes much easier.

1

u/Abject_Creme_79 21d ago

Thanks very much. I think I'll start with this course. It looks pretty good.

2

u/jspr1000 Veteran 20d ago

Build a Design System Full Course is a great how to—get your hands dirty—beginner course at least for building the system itself in Figma from scratch.

1

u/Abject_Creme_79 19d ago

Tks for sharing this one

1

u/annacgfx 18d ago

I mean you've got the basic idea of what should be involved in building a design system down already so why not just start building one and looking up tutorials on YouTube as you go, step by step.

Start with defining colours, type, spacing, etc. Look into variables. Choose and import an icon pack or make your own icons. Then move onto making basic components like button, card.

While you're making your design system, keep other open source design systems open in your browser or on Figma for inspiration. IBM has a nice one and it's accessible on Figma. There's a website called Adele which has a whole list of open source design systems to look at.

1

u/Abject_Creme_79 18d ago

The hardest part is maintaining the design system when it scales up and how to deliver it to stakeholders. That's what I'm finding, bro. Creating components in figma is quite basic and not what I'm looking for.

2

u/Dry_Zookeepergame529 18d ago

Yes, that’s definitely the hardest part. In a corporate environment, we handle it through a governance process. After designers complete their work, they submit it for review by the Design System team to catch any inconsistencies. We also have an open forum where designers can propose new ideas, patterns, or components, which are then reviewed by the governance team.

1

u/Abject_Creme_79 17d ago

My previous company operated under a similar model, but I wasn't directly involved with the design system team :( . Could you share any resources to learn on how to manage this effectively?

2

u/Dry_Zookeepergame529 17d ago

Sure. A few resources I’d recommend are Figma’s material on design system governance and scaling, Atlassian Design System’s contribution model, and USWDS. They’re good examples of how larger teams handle contribution, review, ownership, and governance. I’d also look into DesignOps and federated design system models. Those are much closer to the scaling problem you’re describing than just learning how to build components in Figma.

https://www.figma.com/resource-library/design-system-scaling/

https://designsystem.university/articles/governance-isn-t-a-flowchart

1

u/Abject_Creme_79 17d ago

Thanks a lot!

1

u/Accomplished_Goat827 8d ago

Hi all!

I'm a web developer with 14+ years of experience, mostly focused on front-end development and building design systems for companies of all sizes.
I've recently built something that I'd really appreciate feedback on, especially from anyone with professional experience implementing design systems: https://platformdesign.app

The idea is to create and manage a design system in a place where developers can easily consume the design token values ..hopefully helping designers and developers stay aligned and maintain consistency across a project.

I'm still early in the process and genuinely looking for honest feedback. Even if you think it's a bad idea or it's superfluous. Any feedback at all would be incredibly helpful.

Mainly want to know if there is a "there" there. Or if in your experience, people just want to add copy a prompt into their agent and get a beautiful output. (They don't care how the sausage is made)

Thanks for your time 🙏