Level up your UI design skills Start learning Design Systems #productdesign #designsystem #tutorial

Learning to approach your designs using the Atomic Design methodology is such a game-changing skill.

This is the foundation of becoming a design systems designer which any team larger than 10 people will be running off of. You can't learn to design inside of a design system without first understanding how to structure your designs from an architectural level.

In this video I break down how Atomic Design works and how to break design components into elements that can be re-used across your entire ui/ux design.

Find me on socials:

------

Chapters:
0:00 Why Atomic Design matters
1:40 Atomic Design Method
6:30 Follow along introduction
8:18 Atoms
29:47 Molecules

You're Rad ❤️

[chirahjoe]

This is one of the best tutorials by far

[johntrabelsi]

AMAZING TUTORIAL. Learned so much thank you!

[cristiancamelli]

Hi Nolan! thank you so much for this valuable content.
Greetings from Argentina.

[DuarteAsher]

Hey Nolan, that's exactly type of content I was looking for! Thank you for making this! The only one thing, sometimes you go too fast and use shortcuts on your keyboard which are hard to follow, maybe if we could see what keyboard buttons you're pressing that would be very helpful! I think there should be an option to record which buttons you're pressing and show them somewhere in the corner

[jinn]

This is the kinda content we need. Booh yeah 🔥

[jonathanboice]

finally .... been saying this for a long time... many people thing a "design system" is just a patten library of bassoon and text, and so on... but misses everything else, like spacing, logic, templates, pages and so on...

[jofacoca]

thanks, very helpful, straight to the point!

[SuryaKarigar]

I've been using this technique as a developer. I love beautiful designs but can't design one that has fancy animations. Still, I love working in Figma and I use this method. This makes components super easy to manipulate after implementation. 😻😻 thank you for sharing.

[dimdespair]

Thank you Nolan for such watch worthy videos 🙌

[harshitagarwal]

This is such good content, looking forward to you making more such videos . Maybe one building a proper design system

[JaredB]

No don’t use atomic design for two fundamental reasons. Atomic language and categorisation is not intuitive and accessible. It’s not a naming categorisation system that maps and aligns to any industry standard front end library. Means your work doesn’t map and translate to any coding library so you’ll spend ages arguing with developers and development teams. This is why no one uses it anymore.

[slammer]

You're AWESOME!!! I like how you don't edit any occouring misclicks out. By doing that makes me aware of that later. PERFECT TUTORIAL for me :D

[TâmNgô-br]

Hi friend, could you please display the shortcut keys on screen each time you use them? It would be super helpful for following along. Thanks!

[mtc]

26:04 header 3 and header 4 is the exact same text size though Not sure if you made mistake here... also the 'trash bags' is in 16pt so might be a header 2 ..

[HarishSharma-vo]

Things you are just doing but ideally you should make users like us to understand.

[mtc]

14:29 also the properties setup also very confusing to me :( wish you can explain more about how we will be using this for?? and why do we need 3 properties I feel like the 1st property sounds useless?

[mtc]

14:09 what did u press to organise those icons in the component set so quickly? thanks!

[moonartist]

Hi, at 28:16, that segment chips switch on the right side does not appear, what am I doing wrong?

[karsonhallaway]

this tutorial was incredibly helpful! Thank you Nolan! I noticed that some of your frames included groups like the Next Shopping List Molecule. I guess when should we be using groups over frames or does it matter?

[moonartist]

At 40:47, I don't see the "Nested Instances" option in Figma, did they change it to something else?