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: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#productdesign #designsystems #figmatutorial

Пікірлер: 21

  • @altamashkhan5870
    @altamashkhan5870Ай бұрын

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

  • @shibly95
    @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

    @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

    @DesignPilot

    Жыл бұрын

    Checkout my Design Systems Course. Link in description

  • @user-cr6cu2cy8g
    @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
    @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

    @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 KZread, then checkout my Mega Product Design Course for Beginners on KZread

  • @malavikakrishna9559
    @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

    @DesignPilot

    Жыл бұрын

    Not at all

  • @RaufunNur
    @RaufunNur Жыл бұрын

    Greetings sir❤

  • @cherry-lp8yq
    @cherry-lp8yq3 ай бұрын

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

  • @DesignPilot

    @DesignPilot

    3 ай бұрын

    True. That was a mistake from my end

  • @user-eu2yb3ls4y
    @user-eu2yb3ls4y8 ай бұрын

    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!

  • @sachinnegi2924
    @sachinnegi29249 ай бұрын

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

  • @DesignPilot

    @DesignPilot

    9 ай бұрын

    Sorry, I don’t understand your question

  • @sachinnegi2924

    @sachinnegi2924

    9 ай бұрын

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

  • @DesignPilot

    @DesignPilot

    9 ай бұрын

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

  • @sachinnegi2924

    @sachinnegi2924

    9 ай бұрын

    @@DesignPilot got it thanks 🙏

  • @user-cr6cu2cy8g
    @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

    @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
    @another.designer Жыл бұрын

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

Келесі