Level up your UI design skills Start learning Design Systems

[@chirahjoe1239]

This is one of the best tutorials by far

[@radnolan]

Thank you so much! I do try!

[@dimdespair8974]

Thank you Nolan for such watch worthy videos 🙌

[@radnolan]

My pleasure!

[@jinn7821]

This is the kinda content we need. Booh yeah 🔥

[@radnolan]

Ohhhh yesssss got any video ideas for me?

[@Konguitto]

Amazing class 🙌🏽👏🏾✨

[@harshitagarwal6523]

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

[@radnolan]

Hey, thank you so much! this means a lot.

[@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...

[@BigSamStudio]

Thanks - I learned a lot!

[@slammer3559]

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

[@radnolan]

Gotchu!! That’s all part of the process, you know?

[@PreekMedia]

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

[@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.

[@TâmNgô-b6r]

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!

[@jz1244]

great stuff!! 👏

[@radnolan]

Thank you 🙌

[@HarishSharma-v1o]

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

[@raisulrana2134]

it great tutorial. need more please!

[@radnolan]

More to come!!

[@farishhubiyan482]

Detaching those instances at 6:45 was brutal 😭😭

[@radnolan]

😂😭😭😭

[@HarshitKumar-y5c]

Those are some good looking icons. What iconset you are using?

[@JaroslavJahelka]

Hi man, I appreciate your recommendation of Atomic Design by Frost. However, I think this approach might be a bit outdated now. Nowadays, we see atoms as composed of smaller parts like colors and typography. An evolved version includes ions (sub-atomic parts / tokens), atoms, molecules, organisms, complex organisms, and species.

[@quangminhnguyen7834]

Hi, could you recommend any books or videos I can learn more about the new approach you’ve mentioned in your comment please?

[@JaroslavJahelka]

@@quangminhnguyen7834 1. Extending Atomic Design / Brad Frost 2. Atomic Design 2022: What we can learn from Eames and other design giants

[@muhamadsaeedd]

+1​@@quangminhnguyen7834

[@UXpretender]

Can you explain the keyboard shortcut + what you were achieving at 6:54? Looked fancy

[@radnolan]

Soo when you're selecting a frame or group, you can press Enter to select all contents inside. If among those contents, there's a sub-group or sub-frame, pressing Enter again will also select the stuff inside and so on. Then if you press Shift+Enter, it will go the other way. So if you select an element inside of a Frame/Group, and press Shift+Enter, it selects the parent!

[@staciii]

@@radnolan this saved me so much time 😭 thank you

[@husienadel]

Thanks for Great content but I need diff approach as I am in first make design systems from typography, colors..etc then design with it I feel like strange and limited when I make this

[@l.b.6569]

Hi, thank you for this video. Could you add, as an overlay somewhere on the video, the keys you are using (e.g., Command + Option + G)? This could help a lot to better understand the shortcuts and the overall use of Figma. Thank you so much.

[@radnolan]

Hey I will think about doing this in future! Thanks for the recommendations

[@الف-ن4ر]

Thank you for such watch worthy videos. Listening you way back on tiktok, Big fan, wish i can work in your team in future anytime,

[@radnolan]

Thank you for supporting the content!

[@k16e]

Can I link to this video as a reference to an article? Thanks, Nolan!

[@radnolan]

Hey you can! What’s the article!

[@peterpastor2816]

hey brother i was hoping if you can do best way to design tables on mobile? no one doing it

[@radnolan]

Ahh wow that's such a good topic! I actually have filmed up a video on how to make really good tables, but didn't talk about mobile sooooo going to need to add a section for that. Stay tuned!!

[@mahmoudjoma9387]

Me and you are just alike, we both won't get UI3 anytime soon! 😩😩 Big fan of your work Nolan, I just don't get the icon separation step, they're all atoms of the same nature/group and they should belong to the same Icons component, you may have to make a new variant to apply the grouping you made by divided them into. Wouldn't that be more consistent and easier to maintain?

[@radnolan]

Yooo I got it now after I filmed this video 😎😎 But yeahh I’ve done icon atoms in a few ways but I’ve always found once the product is like full large scale product, it’s harrrrd to find the one you’re looking for in a dropdown select. That’s why I try grouping my icons by intent and then maybe group the groups in another component. So you could select what the intent is, then the select the exact icon. Started doing that at my last startup and it saved me

[@LostAccount404]

Just came by to leave this comment: Your title says "start learning design system" and your thumbnail says "dont learn design system. learn atomic design" ehhh so whats right now?

[@radnolan]

Lolll think I went a little too far with the clickbait, huh? What I’m trying to say is that learning design systems is a huge undertaking, but it all starts with systematic design choices using a method like atomic design. So you shouldn’t go learn design systems instead start with atomic desingp

[@yega3k]

I was a bit confused by that lol

[@Lissandro_Silva]

Hi Nolan, thanks for this, this is very helpful! Just one question. Towards the end of the video, 44 min, you say if you copy the component (list) and then select the list (and press shift + enter?) and then control + shift + r it will replace the list. However, when I copy the component and press control + shift + r nothing happens (im on Mac). So if I try command + shift + r it actually replaces but just the first item of the list (and delete the rest), can you advise?

[@radnolan]

Heyyy for the list items, I believe you’ll need to select each of them individually then do the CMD+shift+r. That will replace all of them. To mass select like that, grab the parent frame and press enter and you’ll select everything inside

[@JaredB001]

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.

[@ngaji_it]

Totally agree

[@yega3k]

I’m only 8 mins in but I don’t see how this approach is a problem if you want to use front end libraries. How is this an issue again? (Or if have a link to an article breaking this down, that would be nice) Also, are these libraries you’re referring to, perhaps, too opinionated?

[@quangminhnguyen7834]

What should I learn instead of atomic design?

[@fenryrthegunner]

Thank you! I see it exactly the same way

[@catmenot7143]

This seems to touch on more of the fundamental aspect of it (the theory as it may) NOT the actual 1:1 code.

[@DesignDen673]

Hi Nolan, Do you hire/work with freelancers? How do I get in touch with you?

[@radnolan]

Hey shoot me a dm on insta!

[@jonathanboice]

But also say, design systems does not allow for the replacement of UX! a design system does not have the human phycology understanding that you need to understand the "why" you placing what you are, where you are, to achieve what goal..

[@floyd1411]

hmmmm somebody likes Crypto.. (not judging)

[@radnolan]

I can either confirm or deny haha

[@lingdong1709]

My UI interface is new version, and some features are missing