Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin

Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we're going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by all developers... even if you don't code.


The Atomics

  • "Atomic" is a browser-based timeline animation tool.
  • "Atomic Design" is a design methodology in which you design very small parts and combine them in larger and larger pieces to build a whole.
  • "Atomic CSS" is a system in which you apply styles directly through designated HTML classes.
  • "Project Atomic" is something for running containerized applications, like Docker? I dunno it's DevOps-y and above my head.
  • "Atomic Web Browser" is an old (looks abandoned) iOS web browser.

None of them have anything to do with each other, at least conceptually.