How we use the Atomic Design Method in Figma (Figma file included!)
HTML-код
- Опубликовано: 16 окт 2024
- Frank explains how Atomic Design is used in Figma at Stijlbreuk.
Atomic Design method
bradfrost.com/...
Figma file used in this video
www.figma.com/...
Stijlbreuk
Website
stijlbreuk.nl/
Instagram
/ stijlbreuknu
Twitter
/ stijlbreuk
Create beautiful mockups straight from Figma using the file url with Hamok
hamok.io/
Twitter
/ frankroodnat
Great explanation and thanks for the Figma file. 👍
Super clear and complete explanation! This helped me a lot, thanks!
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
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 )??
Nice uitleg. Thanks en bedankt!
Great content and explanation. Keep up the good work! 🔥
Thanks! 🔥
is the shadows, grids, colors, typography, and more styles comes with buttons, input, tabs and so .. in the same level or not ??
Great video thank you
What's the difference between style guide and atomic design?
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)
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
Great video mate! Liked and subbed. A quick question though. How did you get your first job?
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
@@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.
@@jonboy3802 Yes I had the same idea for future video's! Seems fun.
thanks very useful
Glad it was helpful!
/ Frank
How did you link these components in to final design ?
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
nice
1:18 is this a joke or