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

Joe Toscano⚡️BlockedUnblockFollowFollowing

Oct 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.

How do I Atomic Design?

Atomic design means creating a system of pieces that can come together to create elements and templates we can reuse over and over again.

Atoms

Atoms are the absolute fundamentals of our system. Atoms include color palettes, fonts, individual elements (i.e. headers, paragraphs, buttons, etc.) and anything else that combines with other atoms to create a molecule.

Molecules

Molecules are the pieces we build with atoms. Although they require atoms, molecules are more along the lines of the lego blocks we will be building with, over time. Although some will get complex, simplicity is key here.

Molecules include things such as form fields with a label or a table with headings and data columns.

Organisms

Organisms are where we begin to see the interface come together. By combining molecules we can build more complex, but repeatable, pieces of our product.

An example of an organism might be a header nav that includes a logo, nav links and a search field or sign up button.

Templates

Templates are essentially our wireframes. By combining multiple organisms, we really begin to see the big picture of what we’re building.

If a high fidelity deliverable is not necessary, this is the point where we could very easily start developing our system in code.

Pages

Pages are the high fidelity version of our templates. The design above would be considered a page. This is where even the design inept can understand what we’re building.

Pages aren’t always necessary, but who doesn’t love pretty visuals?

Why Sketch?

Although Sketch may not yet be the power house that Adobe Illustrator or Photoshop are, it is still an incredible tool when working by the Atomic Design methodology.

Organization

Sketch is the sexy love child of Adobe Illustrator and Photoshop. There’s no denying that Sketch is young but it’s still very powerful and, beyond that, it’s also incredibly easy to pick up and use.

Not only can you do basically everything you’d ever need to do without having to find and pull out tool boxes buried in menus with multiple levels, you also have the increased organization that comes with layers.

If you’re not organizing properly, you’re probably losing money on your design process and just haven’t realized it yet. Check out the follow-up I wrote about how and why I organize so well!

Modularity

Sketch is great for Atomic Design because of how easy it is to make things modular. Not only do you have great organization with layers, similar to Adobe Photoshop, you can also make modular elements. In Sketch, these elements are called Symbols.

Creating a symbol allows you to change all of the styles on one element and watch those changes occur to all similar elements, across your file.

To start, design your element as you’d like it to be.

Next, highlight it and click the Create Symbol button in the tool set up top.

ProTip: To make elements with text into awesomely modular symbols in Sketch, make sure you also check the Exclude Text Value from Symbol box in the tool set on the right.

To do this, first you have to select the text within the symbol. If you don’t do this, you won’t see the option in the tool box on the right.

Now you can drop the symbol anywhere and change the inner text without changing the text in every other similar symbol used across your design.

If the inner text isn’t something you’re planning on being different across items, don’t worry about this step. But just know it’s there and it’s incredibly handy.

Any time you want to place one of the elements you’ve created all you have to do is click into the Insert dropdown menu, find the Symbols option and pick the symbol you’d like to use from the dropdown.

Converting to code

Now that we’ve created our design, it’s time to export our elements to code.

Export to code

What’s better than modular symbols? Exporting your designs directly to code. That means you designers don’t have to learn to code and you devs don’t need to learn how to break down design assets. Although you should.

To get the code for your elements you first need to make sure they are either grouped together appropriately or turned into symbols. After that, it’s as easy as right clicking on the element and selecting Copy CSS Attributes from the dropdown

All you have to do from there is copy and paste the code into your favorite text editor.

Make sure you’re careful of any necessary vendor prefixes as well, because they don’t come from Sketch. Otherwise, make sure you use a package to handle it.

HTML

Just like a Bootstrap or Foundation template, we now have our elements styled and all we have to do is add a class to the element in our HTML.

The move from here is to make an elements HTML page, that will only be seen by the development team. Here we can create a page of our elements with the appropriate class applied so we can see how they look in browser, across screen sizes.

Brad Frost and Dave Olson of Pattern Lab have created an awesome example of what this looks like. Check it out.

Using templating languages

Bonus points for those of you that have graduated onto templating languages and CSS such as swig, jade, haml and any of the many other languages available today.

Many of the organisms we designed will become partials once they get converted into code.

So you made it through

Now you can pretend like you know something about science. And to some extent, you do. Atomic Design is the science of high quality design.

By creating modular, repeatable elements and patterns we can exponentially speed up our design and development process. Not only by how fast it is to build but also how quick it is to make changes across the system.

Spend a little more time thinking through your core and gain an incredible amount of time back as the process unfolds.

To read more about why and how I do things this way (Hint: Save time and money), check out the follow-up I wrote.

Resources

Shoutouts

Make sure you follow Brad Frost, and check out what he and Dave Olson have been working on at Pattern Lab.

Shout out to Dalton Mag for creating the beautiful Precision Sans font!

Download Sketch 3 today. At least use the free trial period!

Lastly, special thanks to my good friend and fellow BDW alumn Nick Stevens for introducing me to the Atomic Design methodology. Hope you heal up well from your accident and feel better soon!!