Atomic Sketch
An interdependent UI pattern library template based on Atomic Design
As a designer of user interfaces, it is nearly impossible not to know two things: Sketch and Atomic Design. For a long time, the features offered by our favourite UI design tool were missing suitable possibilities of integrating Brad Frost’s design methodology into our design workflows. After Sketch released two major feature updates during the last year and Craft is doing its part to make Sketch a prototyping tool, I was curious to find an interdependent pattern library template based upon Atomic Design. As I found none, I began to make it myself.
About Atomic Design
Atomic Sketch is a UI pattern library that follows the structural understanding of Atomic Design, brilliantly established by Brad Frost. If you do not know what Atomic Design is, I suggest you take a short read at
http://bradfrost.com/blog/post/atomic-web-design/.
Briefly said, Atomic Design teaches that every interface of a website, app or anything similar consists of atomic elements, e.g. buttons, input fields or typography. These atoms can be used as standalone elements or combined to create larger and more complex elements called molecules, e.g. a search field, a teaser and so on. To create even larger elements, atoms and molecules can be combined to form organisms, e.g. a teaser grid, a header or a footer section. Leaving the analogy of chemistry behind, atoms, molecules and organisms can be used to create whole templates of web or app pages, following the visual appearance of mid-fidelity wireframes with placeholder contents. Finally, every template can be filled with real content and then transformed into a page.
To technically implement such a library, it has been necessary to write HTML, CSS and programming languages until now. For a design team, it does not come very often that everyone knows how to code and implement an interface. Thus, when the currently most popular design tool Sketch published the last feature updates in spring and summer this year, allowing nested symbols and intelligent scaling of objects, I decided to build up a UI pattern library template in Sketch.
Purpose
The main purpose of this file is to be as fast as possible when creating mid-fidelity wireframes and creating prototypes with them. Providing a library with pre-built standard elements simplifies the process of creating flows of interaction as quickly and early as possible. In my usual case, I would have already made a paper prototype and received first feedback from lean hallway testings in the street. Then, the next step would be to enter digital prototyping.
The second issue this file aims to solve is the waste of time when designers rebuild structures of something that has already been built when switching from mid-fidelity to hi-fidelity prototyping. Having one file that contains an already validated design and elements that can be upscaled to a visually finalized appearance, saves you a lot of time – and your clients a lot of money. Designing should be fast and flexible instead of slow and rigid.
Fly the X-Wing, not the Star Destroyer. ;-)
How To Use The File
As the first step please download the file here:
The best way to work with this file is probably to use it as a starting point in your design process and then adapt the library to your own individual needs.
If you want to add a new element from your library to one of your artboards, just click on the „insert“ button which should be at the top left corner of the window if you have not personalized your Sketch UI. Just go through the folders, select the desired elements, and if available, its state. You can then add it to your artboard and adapt its size to match your layout.
To check where you can find which element, everything can be found on the Page „Pattern Library“, but also in „Symbols“.
On the page “Devices” you can find a selection of the most common devices for your designs. Every screen has a pre-defined layout grid, with six columns for smartphone sizes and twelve columns for larger screens. You can, of course, adapt all grids to your needs.
As soon as you start prototyping with Craft, you might notice that it is not possible to select a single button if it is part of a larger molecule or organism. In this case, it might be helpful to right-click the object and then select „Detach from Symbol“. Sketch then dissolves the enclosing symbol, but still leaves the inner elements intact and making them available for linking.
Structure of the File
Some prototyping tools like Axure RP or UXpin already offer pattern libraries, but in terms of usability or offline accessibility, many designers prefer to use the frequently updated design tool Sketch which can easily be enhanced by InVision’s prototyping plugin Craft.
If you have ever worked with Sketch, you surely noticed symbols and styles. Both are design instances used to create reusable objects that can be changed in one root element, thus changing every instance used on the artboards and in other symbols. If you have previously worked with Adobe software, symbols are similar to smart objects on Photoshop and typography styles are more or less the same as in InDesign.
As mentioned one of the last major Sketch updates made it possible to create nested symbols (same as symbols in symbols). In Spring a second major feature update introduced intelligent resizing which made it possible to define the way elements in groups or symbols behave when being resized.
Having worked with this pattern library on some projects, I have come to the point that the following structure works quite well when it comes to balancing between pre-built design element and flexibility.
Level 0: Fundamentals
Adding a further layer under the structure of Atomic Design might seem a bit strange, but it made the file easier to use. So I consider colours and icons, not like actual elements, but more like basic attributes of elements. Colours can be used everywhere, for backgrounds, texts, strokes etc. For icons it made the use of the file much more consistent, being understood as equivalents to wordings and text contents rather than atoms. Following the chemical-physical analogy of Brad Frost, I called this level Fundamentals for the moment, but I am not sure if this is right because colours, for example, resemble more universal forces like the laws of physics. However, I am open to new suggestions on how to describe this.
Level 1: Atoms
As proposed in Atomic Design, atoms display all UI elements that carry one unique functionality. I mainly aligned the selection with what HTML can provide to a user, but there are some that do not come from coding but still serve one unique purpose in an interface, e.g. tooltips, toasts, handles for Drag & Drop and notification bubbles.
A lot of these elements have different states or variations from which the designer can choose. And notice that text and image content can be overwritten in the right-sided panel in Sketch!
Level 2: Molecules
From here, the number of elements decreases, but in future, this will hopefully be put to a broader selection.
Every molecule is built to offer exchangeable content, e.g. button states can be changed.
In general, it can be said that molecules cover all UI and content elements that are at an intermediate level of complexity, such as tab bars, teasers, dialogues, but also table columns.
Level 3: Organisms
For the moment, this level contains very few elements. The reason for this is that I find it difficult to see the sense in providing pre-built organisms, as this level of designing often depends on the project you are working on and the features and content that should be displayed. Undoubtedly, every product design uses organisms in their templates, but often they are derived from the individual approach and feature set of the product.
Nevertheless, some elements for global navigation have been placed here and further things will be added in future iterations of this file.
Level 4 & 5: Templates & Pages
Templates and pages are the actual output of a design process, so I decided not to include these levels of Atomic Design into the Sketch file.
What next?
This file is meant to be a contribution to the community that may use, enhance and work with it. Thus, it is to be extended in future steps, based on your feedback as designers and your experiences with the file. Please feel free to send your opinions about the structure, wording and missing elements. I will gladly iterate the Atomic Sketch to make it more useful and more of a tool to an efficient design workflow.
Please consider that this is the first version and far from being final. Rather it should be enhanced by the further experiences that we make with it in daily work.
Also, I plan to try out and use the new library feature in Sketch, but I do not think that it would be useful to offer a global, unadaptable Atomic Sketch library to the community, as it is the nature of a pattern library to be adapted to the needs and frame of the specific product family. Nevertheless, the library feature in Sketch could be useful to organize design elements within a team of several designers working on the same product. Also, the iOS UI Design library that is offered in Sketch as soon as you installed the update is an excellent extension to the Atomic Sketch pattern library template when in need of native UI elements for your designs.
I hope you will enjoy working with this template.
For sending me your feedback or just getting into touch, please drop a line under:
contact@oliver-jahn.com
Have fun.
https://creativecommons.org/licenses/by-sa/4.0/
For the creation of this file, I used the already existing Atomic Design file „Atomic Design Template by Nolte2“ with non-interdependent symbols by Danko Tantegl and an icon set „440 Free Icons“ created by Catalin Fertu.
https://www.sketchappsources.com/free-source/2160-atomic-design-template-sketch-freebie-resource.html
https://dribbble.com/shots/1634821-440-Free-Icons
Thanks to:
Brad Frost, Danko Tantegl and Catalin Fertu
Changelog
February 24, 2019
Adapted file to new override features of Sketch 53.
Defined overridable attributes of symbols.
Added colour names in drop-down selection.
Merged black, white and primary colour icon sets to one set with an overridable, more flexible colour setting. Default colour is black and can be changed to any colour in the layer styles.
Added calendar to molecules.
Changed button states “selected” to a clearer look.
Added tertiary button states “hover” and “selected”.
Fixed bugs in naming.
January 31, 2018
Added “Autosuggest”, “Newsfeed”, “Contacts”, “Graduate”, “Add as contact” and “Remove as contact” to icons
Added primary, secondary and tertiary buttons with text and icons, video placeholder, more process bar states, chat bubbles and spinners to atoms
Added input field with button, input field with select and button, input field with select, a teaser with text and user, small and large user preview, chat preview and more slider states to molecules.
Added top bar with search field and chat input bar in default and active state (incl. keyboard) to organisms.
Fixed bugs in naming and order of layers.
November 3, 2017
Basic version containing standard UI and content elements, such as buttons, input fields, typography etc.
👋🏾 Get to know the people and ideas shaping the products we use every day. Subscribe to Noteworthy — the product & design newsletter written by the Journal team.
