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 using Sketch is the future of product design.”
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 isn’t 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’s 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.
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.
Pro tip: 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.
“Atomic Design is about designing the core of the system.”
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’re 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.
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.
“Atomic Design is the science of high-quality design.”
Using templating languages
Bonus points for those of you who 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.
Resources
This was originally published on Medium.
