Atomic design is a methodology for designing and developing user interfaces in a modular manner by putting the focus on building components rather than applications. It is popularly known within the design world and helps to build consistent, solid and reusable design systems.

1. Atomic design in React
An introduction

2. Riddle Me This
This Should Developers Design?
Should Designers Develop?

3. Designer + Dev not Designer vs Dev
https://www.gravitatedesign.com/blog/designers-and-developers/

4. Answer
Well at least, We should try to design the way we code!
OR
We should try to code the way we design!
No matter who is doing it!

5. What if
● UI rendering was 100% pure components?
● Or conversely, all business logic/state was elsewhere?
● What if HTML / ES6 / CSS all lived together harmoniously?
IT CERTAINLY WOULD BE EASIER FOR A DESIGNER TO CODE!
In a way that is free from disagreement or dissent.

6. Create design systems, not pages

7. Atomic Methodology
Think Chemistry

8. Atoms - Atomic Methodology
● the smallest possible components, such as buttons, titles, inputs or event color
pallets, animations, and fonts.
● applied on any context, globally or within other components and templates
● having many states, such as this example of button: disabled, hover, different sizes,
etc.

9. Molecules - Atomic Methodology
● Composition of one or more components of atoms
● Start for composing complex components and reuse some of those components
● Can have their own properties and create functionalities by using atoms, which
don’t have any function or action by themselves.

10. Organisms - Atomic Methodology
● the combination of molecules that work together or even with atoms that compose
more elaborate interfaces
● Start to have the final shape
● Still ensured to be independent, portable and reusable enough to be reusable in any
content.

11. Templates - Atomic Methodology
● Create relationships between the organisms and others components through
positions, placements and patterns of the pages
● Doesn’t have any style, color or component rendered (That’s why it looks like a
wireframe.)

12. Pages - Atomic Methodology
● navigate parts of the application
● where the components are distributed in one specific template
● The components get real content and they’re connected with the whole application.
At this stage, we can test the efficiency of the design system to analyse if all the components are independent
enough or if we need to split them in smaller parts.

13. Some rules
● The Atomic Design should have a file of variables and it must be imported by each
component;
● The atoms should be written without margins and positions;
● Only the molecules and organisms can set the positions of atoms, but these stacks
can’t have any styles of margins and positions;
● Templates have only one function: to set the grid of pages but never positions of
specific components;
● Pages render the components with a template defined and it’s here that the Atomic
Design will be connected to the rest of the application;

14. Top 9 reasons to use Atomic Design
1. Reusability
2. Easier to create style guide
3. Easy to understand layout
4. Code is more consistent
5. No focus on pixel perfect designs
6. More efficient, quicker prototyping
7. Easier to update and remove parts
8. More modular file structure
9. Less components overall
overall http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771

15. References
● https://medium.com/front-end-weekly/react-for-designers-3fbc7b6560dd
● https://github.com/danilowoz/react-atomic-design
● http://bradfrost.com/blog/post/atomic-web-design/