Atomic design system

Better system for creating better websites

About methodology and why we should use it!

Atomic design system

Better system for creating better websites

About methodology and why we should use it!

What is atomic design?

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

Atoms

Atoms are the basic building blocks of matter.

Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Molecules

Things start getting more interesting and tangible when we start combining atoms together.

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape.

Templates

At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

Code - atom

import styled from '@emotion/styled'

const StyledInput = styled('input')`
  color: grey;
  font-size: 16px;
  font-family: inherit;
`

export default StyledInput
import styled from '@emotion/styled'

const StyledInput = styled('input')`
  color: grey;
  font-size: 16px;
  font-family: inherit;
`

export default StyledInput

import styled from '@emotion/styled'

const Text = styled('p')`
  color: black;
  font-size: 16px;
`

export default Text
import styled from '@emotion/styled'

const Text = styled('p')`
  color: black;
  font-size: 16px;
`

export default Text

Code - molecule

import styled from '@emotion/styled'
import Text from '../atoms/Text'
import StyledInput from '../atoms/StyledInput'

const TextInput = ({text, ...props}: ITextInput) => (
  <div>
    <Text>{props.text}</Text>
    <StyledInput {...props} />
  </div>
)

export default TextInput
import styled from '@emotion/styled'
import Text from '../atoms/Text'
import StyledInput from '../atoms/StyledInput'

const TextInput = ({text, ...props}: ITextInput) => (
  <div>
    <Text>{props.text}</Text>
    <StyledInput {...props} />
  </div>
)

export default TextInput

Code - organism

import {Controller} from 'react-hook-form'
import TextInput from '../molecules/TextInput'
// ...
const TextInputQuestion = (props: ITextInputQuestion) => (
  <FancyContainer>
    <Controller
      control={props.control}
      name={props.name}
      defaultValue={''}
      render={(renderProps, inputProps) => {
        // Maybe magic ✨ here? Who knows!
        // Possibilities are endless!
        return (
          <FileInput
            {...renderProps}
            {...inputProps}
            {...props}
          />
        );
      }}
    />
    <FancyHr/>
  </FancyContainer>
)

export default TextInputQuestion
import {Controller} from 'react-hook-form'
import TextInput from '../molecules/TextInput'
// ...
const TextInputQuestion = (props: ITextInputQuestion) => (
  <FancyContainer>
    <Controller
      control={props.control}
      name={props.name}
      defaultValue={''}
      render={(renderProps, inputProps) => {
        // Maybe magic ✨ here? Who knows!
        // Possibilities are endless!
        return (
          <FileInput
            {...renderProps}
            {...inputProps}
            {...props}
          />
        );
      }}
    />
    <FancyHr/>
  </FancyContainer>
)

export default TextInputQuestion

Code - template

import Header1 from '../molecules/Header1'
import TextInputQuestion from '../organisms/TextInputQuestion'

const HomePageView = (props: IHomePageView) => (
  <Container>
    <form onSubmit={props.form.handleSubmit(props.onSubmit)}>
      <Header1>My super form!</Header1>
      <TextInputQuestion
        control={props.form.control}
        name='firstName'
        title='Please enter your first name'
      />
      <TextInputQuestion
        control={props.form.control}
        name='lastName'
        title='Please enter your last name'
      />
      <button type='submit'>Submit</button>
    </form>
  </Container>
)

export default TextInputQuestion
import Header1 from '../molecules/Header1'
import TextInputQuestion from '../organisms/TextInputQuestion'

const HomePageView = (props: IHomePageView) => (
  <Container>
    <form onSubmit={props.form.handleSubmit(props.onSubmit)}>
      <Header1>My super form!</Header1>
      <TextInputQuestion
        control={props.form.control}
        name='firstName'
        title='Please enter your first name'
      />
      <TextInputQuestion
        control={props.form.control}
        name='lastName'
        title='Please enter your last name'
      />
      <button type='submit'>Submit</button>
    </form>
  </Container>
)

export default TextInputQuestion

Atomic design system

What is atomic design?

Atomic design system

What is atomic design?

Atoms

Atoms are the basic building blocks of matter.

Molecules

Things start getting more interesting and tangible when we start combining atoms together.

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Templates

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Code - atom

Code - molecule

Code - organism

Code - template