The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketch

Joe Toscano⚡️
RE: Write
Published in
7 min readOct 8, 2015

--

TL; DR: Atomic Design using Sketch is the future of product design.

Walk with me

Brad Frost, the stunning human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in.

We’ve been making style guides, elemental guidelines, mood boards and many other tools to help make our designs easier to understand for years now. Similarly, developers have been using things like Bootstrap, Foundation, Bourbon and other, similar tools to make their life easier when it comes time to code. When we compromise and work together, life gets much easier for both sides. That’s what Atomic Design is here for.

Atomic design isn’t about designing a single instance or page, it’s about designing with the big picture in mind — it’s about designing the core of the system.

--

--

Joe Toscano⚡️
RE: Write

CEO, DataGrade; Author, Automating Humanity; Ft, The Social Dilemma; Contr, Forbes. Changing the world w/ a smile, design & some code.