Difference between Atoms, Components and Patterns in a Design System!

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
I'll walk you through the different levels, from atoms to components, and show you how they are used to create a component. I'll also discuss the concept of global and local atoms, and how patterns and templates fit into the hierarchy.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design/designsys...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
--------------------------------------­---
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#productdesign #designsystems #figmatutorial

[@altamashkhan5870]

Thank you so much chethan for absolutely amazing video on the topic

[@shibly95]

Supperb content Chetan. Fortunately, I learned about components and auto layouts from you video 6 months ago and designed an full mobile application by creating advance level components. As a result, I'm feeling like, I know these things already and I'm picking these up so fast.

[@rishabh117rules]

Hey there! Could you please share your approach on creating advanced components or learning about components and auto layout? I'm struggling to comprehend and implement them despite watching several videos. I would be immensely thankful if you could provide some helpful pointers. Many thanks!

[@DesignPilot]

Checkout my Design Systems Course. Link in description

[@user-cr6cu2cy8g]

11:15 You're contradicting yourself here, an atom has to be the lowest level, so by definition an atom can't contain another atom. I'm not fan of this nomenclature but -with your logic in mind- that could be called a Local component, since it contains an atom.

[@worksmart8166]

Hii chetan sir🙋‍♂️, i am new and beginner, i feel your all videos are important and valuable. Please can you guide me which order i need to follow in your videos

[@DesignPilot]

If your looking to learn design systems, then visit learnproduct.design/design systems.
If you want to learn more about product design then take up learnproduct.design
If you want to reply on UA-cam, then checkout my Mega Product Design Course for Beginners on UA-cam

[@malavikakrishna9559]

Thank for making this video Chetan. Can you please also let me know me if there is a best practice in organising the layers panel (left panel). Does the industry expect us to name every layer?

[@DesignPilot]

Not at all

[@RaufunNur]

Greetings sir❤

[@user-eu2yb3ls4y]

21:35 Chethan, wouldn't an atom (global or local) have to be the lowest level element in the hierarchy? Doesn't that mean that, in this particular case, the "Label" would be a component no matter what?
Thank you!

[@cherry-lp8yq]

the player consist of an icon and a (the slider taps) so it should be a component not an atom right?

[@DesignPilot]

True. That was a mistake from my end

[@sachinnegi2924]

Hey Chetan. How this approach can be more useful and easy to implement the the traditional Atom -> molecules -> organisms -> templates approach?

[@DesignPilot]

Sorry, I don’t understand your question

[@sachinnegi2924]

@@DesignPilot I am asking that is this approach is same as the atomic design approach(brad frost one) or is a different approach?

[@DesignPilot]

@sachinnegi2924 It’s the same but with a slight variation. As long as it works for your product, it’s fine

[@sachinnegi2924]

@@DesignPilot got it thanks 🙏

[@user-cr6cu2cy8g]

This is still highly theoretical, even if it's presented in a "practical" way. You still get into sub-atomical particles (text layers -or styles, which are basically tokenized-), and basically renamed molecules into components. The global vs local thing is a bit weird if you try to pair it with the atomic analogy, since atoms are independent from their molecules (so there's no such thing in nature as a local atom), your local atoms would be more like radicals. If you're going to stray away from a theoretical frame of view, then stray away completely from it. You might want to go with Patterns > Components > Elements > Tokens, or something like that, but in the end there will always be theory behind that.
But I digress, what I mean is that, by nature, a design system won't be able to escape from theory; theory is what brings logic and the systemic nature of it.

[@DesignPilot]

Absolutely. This is one of the videos of a very big course where I share the practicality.
The current methods and explanations online are too theoretical for beginners to understand. The idea of the video is to simply it so that they can build upon that knowledge when they read about theories online and practice on their own.

[@another.designer]

- Good Stuff for real.
🙌If you have knowledge, let
others light their candles in it.
- Margaret Fuller