Super clear and complete explanation! This helped me a lot, thanks!

Great explanation and thanks for the Figma file. 👍

Great content and explanation. Keep up the good work! 🔥

@StijlbreukNu

2 жыл бұрын

Thanks! 🔥

Nice uitleg. Thanks en bedankt!

Great video thank you

Been using Atomic Design in a few projects now, and we had quite a lot of discussion with the team on what would go where. Organisms are still very vague and we are sometimes unsure if something should stay a molecule or is big enough to be an organism. Same with templates.| Also, we had some discussion if Fonts and Colors are actually Atoms, or more of a "Foundation" (or Quark) and how far we should actually go with turning things into atoms. With a "slider" for example, you could say that it's a molecule consisting of a gutter, a knob and maybe a label. But it feels small enough to be considered an atom as well. Lastly, what direction you should go too in Atomic Design. Should you come with a concept, make some elements and break them down into smaller and smaller atoms (which makes creating components a bit of double work), or do you go from Atoms to Molecules exclusively

@StijlbreukNu

2 жыл бұрын

Hi! 1. Organisms for me are fairly large elements like forms, navigation bars, sliders with content cards. They are like the final step of a section before putting them in your page. 2. Using quarks makes sense from a hierarchical point of view. On the other hand, Brad Frost describes atoms as 'the most basic building blocks of your website', so i'd assume there is no lower level below atoms. But in the end you and your team are going to use it so I would not worry where/what everything exactly is, as long as everyone follows the same rules. For me, the power of atomic design lies in structuring components based on a certain ruleset. And then define combinations of atoms, molecules and organisms that are very common, in that way they are re-usable for new projects. For example: A navigation bar most of the time consists of a combination of links, a logo and often a search bar. Knowing those atoms are often grouped together, you can make that navigation bar once and re-use it by updating your atoms when you start a new project. 3. When I start a new project I duplicate my standard scaffold file which already has a collection of atoms, molecules and organisms that are very common. Then I sketch some ideas out on paper or in Figma (in playground). When the concept is clear enough I start thinking about the most logical way to combine atoms molecules and organisms. I hope I answered your questions, if not let me know :) - Frank

icons with typography and color, those three styles we used to make button ! so now there in the same level ( Atoms )??

thanks very useful

@StijlbreukNu

Жыл бұрын

Glad it was helpful! / Frank

Great video mate! Liked and subbed. A quick question though. How did you get your first job?

@StijlbreukNu

2 жыл бұрын

Thank you! I did not have a job right away after graduating. After a small vacation, I created my portfolio website and then I basically applied to a lot of companies, a couple of them invited me for an interview. One of them was Stijlbreuk, which ended up being a very good match :) / Frank

@jonboy3802

2 жыл бұрын

@@StijlbreukNu thanks for the response man, much appreciate it. Would you like to make a video with a review of your subscribers' work? If yes, it would be my pleasure to share my latest mobile app design. Very interesting to know a professional's opinion.

@StijlbreukNu

2 жыл бұрын

@@jonboy3802 Yes I had the same idea for future video's! Seems fun.

Hey very well explained! I have a question, for user who do not have an upgrade of Figma, is it still feasible with only 3 pages per team file ? (And also without team library)

@StijlbreukNu

Жыл бұрын

It's going to be tricky when you are limited to only 3 pages, however you can easily follow the same structure in you design file without actually using different pages. / Frank

is the shadows, grids, colors, typography, and more styles comes with buttons, input, tabs and so .. in the same level or not ??

nice

What's the difference between style guide and atomic design?

How did you link these components in to final design ?

@StijlbreukNu

2 жыл бұрын

I just copy and paste the components (atom/molecule/organisms) in the final page file. If they're linked correctly they'll update automatically once you update atoms/molecules/organisms. - Frank

1:18 is this a joke or