Design System tools & workflow for small teams.
By: Anna Arteeva
Tags: Product Design, Sketch, Design, UI Design, Design Systems

UI Library

Design System contains various layers — Atoms, Molecules, Organisms etc. Atoms and Molecules are Colours, Typography Styles, Primitive components such as Buttons, and it can go as far as Layout Grids and such complex components with pre-defined micro-interactions as Modal windows.

Terminology break:

Component is a reusable part of the interface. It is also called Symbol (Sketch terminology). Components can be infinitely nested within each other — Button can be pard of Navigation, Navigation -> Header etc. The same component may have different customizations, also called as States. Such as Button can be Default, Active, Disabled. Micro interaction -– components response to a trigger. It can be pressing a button, drag-and-dropping an element.

Often such atoms and molecules are agnostic of actual Product speciality. A button remains a button in a Hotel Booking app or a Trading Platform. It can be heavily branded, have sharp corners with stripped shadow, or be rounded with a neon gradient — different skins don’t change the essence. That is why it is common to use standard UI kits or even full-stack UI Frameworks such as Material UI made by Google. Some of them exist only as libraries for design tools, such as an Invision UI Kit or Prime Design System, some have all components developed with a variety of frontend technologies. It saves time not only to designers but also frontenders and surely helps them speak the same language.

Many design teams make a mistake to produce their UI kit from scratch by themselves. Building a UI kit library in-house nowadays is like inventing a wheel millionth time. Organizing all UI elements in a system is just a long and labour-intensive task. Well, first five times I did it was fun. Depending on the complexity of your Product and size of the team, the project can take months and still, by the time you finish, it is outdated. Good quality UI kits for Sketch have a sophisticated sizing and styling properties made by real Sketch wizards, which are a rare find among in-house UX designers. And last but not least, professionally made and tested UI libraries establish a solid quality bar.

On the other hand, if your product consists of a limited number of well-defined components, dragging a gigantic framework is unnecessary for both design and development.

Focus on what your team’s strength and competence, delegate the rest. The primary goal of a UX is to create the best solutions for user problems. Not having to worry about UI primitives frees up mental energy for a deep understanding of the industry and users.

Organisms

Let’s call organisms components that mean something particular in the context of a given Product.

Intercom describes it as a part of Full Stack Design System. Here are some of the examples of organisms they give:

Facebook: Friend, Post, Message, Event, Page, Group. Airbnb: Listing, Host, Guest, Trip, Experience. Slack: Team, Member, Channel, Message, Reaction, Thread. Intercom: Customer, Teammate, Message, Conversation, Article.

You can get wild with your organisms; they are real game-changers.

Environment Setup

Time to embrace the Libraries — they allow to link components (symbols), layer and typography styles between multiple files. Any Sketch file can be used as a library; any object can become a component. Layer and text styles allow to define and them all in a single file.

Think upfront of a file system that would reflect your team and company structure. If you work with multiple products, platforms, teams — you can group shared library files into a separate Sketch folder. What would be an area of usage for each library file? There can be a global library used across All files (e.g. Brand styles and elements), then iOS and Android libraries, then Feature Libraries etc.

Basic UI library

For our Product we use Material UI React Framework, so for basic UI we purchased a Material UI Sketch Library. There are many similar Libraries. Discuss with frontend team first; probably they already use a framework on their side. In thas case, the most effective is to find a corresponding Design Library for that framework. Otherwise, check out the options and pick one that fits your current state of design best.

Material UI, like any other UI framework, comes with specific hierarchy and naming for its styles and components. I highly recommend to embrace it to avoid confusion with double-standards. Developers would also appreciate it if you refer to Green as a Success Colour, and to Your Brand Purple as Primary. Take some time to understand the structure and logic of your Library, try to apply to your cases.

Start customizing, but baby steps first, the best is to customize the Library while applying it to real mockups. Start with standard Colours and Typography, then update essential UI components. Only edit existing components, do not add any new ones to this file. It should be as close to the original Library as possible, then in case if the Library is updated — it’s easier to adopt the change.

Here are guidelines on how to edit styles

..and master components

Cloud Sharing

Sketch Cloud and Sketch for Teams allow to store, organize and safely collaborate on files as they are automatically saved in versions. Not a massive change if you used something like Dropbox or Abstract, but it definitely became easier. Simultaneous collaboration on the same file is still not possible in Sketch but promised to come soon.

You can play with Library locally or upload your library file to Sketch Cloud, make sure connected as a library in your Sketch and Cloud Settings. You can test it by creating an empty file and see if you see it in your Symbols panel.

Product-Specific Libraries

Styles and components that are only specific to your Product, or parts of the Product, can be collected in separate libraries. Find the right balance how specific it makes sense for your setup. Don’t blow up a single library putting everything in it, but it’s also easy to get lost with too many specific files. Take into account how many designers/design teams work with each mini-library, how often libraries are used together. Experiment, you can split or unite library files later in the process.

Creating components — the smart way

I assume you are already familiar with the standard way to create Symbols in Sketch. I share a couple of tricks that help to create and organize your assets smarter.

How to keep related components together on the same page?

When a symbol is created in a standard way — select a group of Layers and Click “Create Symbol” — it appears on a Symbols page, and the selected layer becomes this Symbol instance. There are 2 immediate problems with this approach:

All symbols are dumped on a single page in random order. Instances are not necessary within a library file; they can be deleted

Instead, you can wrap the group layer in an artboard and convert this dartboard into a Symbol. This way, it immediately becomes a Master Symbol and remains in the current place. This approach does not only save time re-organizing symbols on the Symbol page and removing unnecessary instances but also allows to arrange them on multiple pages.

How to create nested components

Create a new library file or convert existing ones

There are two ways to start a library file:

create a blanc file where all components are collected; use existing files.

Let’s explore both approaches.

Creating a blank file makes sense if there are many existing instances same and similar components used in multiple product parts/design files. For example, at Checkout page, there is a Payment Method component that is used for many different Payment flows. We extracted this component into a separate library and gradually updated it in all files.

On the other hand, there is a set of specific feature component that you want to use in other files — parts of a product. Instead of dragging it into a separate file, it makes sense to it immediately inside the existing one, while converting the file into a library. This way, the existing file logic does not need to be changed.

Developers Handoff, User Flows, Prototyping

Sketch for Teams has recently added a long-waited Design Inspect feature, which allows retiring Invision and Zeplin kind of tools. Nonetheless, there is a little issue with it. Sharing working Sketch files might feel uncomfortable for both developers and designers. Designers can organize their files in a way, that doesn’t make sense to developers. They keep different variations of the thing they work on, collect references right in the working file, make notes irrelevant for other parties etc. Developers, on the other hand, would expect to see the same design assets organized differently.

How to keep assets separate from working files, while having a single source of truth?

Remember, that you can convert entire artboards into symbols? And any file can become a library. Artboard instances can be used in other files while been designed in a working file. It’s not only useful for developer handoff, but any other scenarios you want to reuse your views:

making interactive prototypes to share directly with testers;

mapping user flows including multiple features;

even for making modal windows with another artboard a background.

To create a file for a hand-off:

Step 1: Convert artboards with views you want to share into symbols Step 2: Make a file containing those artboards into a library, and enable it in Sketch Step 3: Create a new Sketch document Step 4: Paste necessary views from the parent library Step 5: Wrap each view into a new artboard Step 6: Upload it to Sketch Cloud, enable Inspect and Export Assets checkbox in the file setting Step 7: Share the link with your steakholder

Team Collaboration

When working with different teams, we need shuffle things around in different ways and welcome non-design people contribute. Miro is a perfect bridge between design and non-design world. It is intimidating or requires special skills; anyone can be quickly involved and contribute at any time, stakeholders are not afraid to break things while moving them around (like if they would get direct access to Sketch or Figma).

We typically run our brainstorming sessions, presentations, build user flows, product maps in Miro and “Big Picture” overviews in Miro. Especially now, in the era of remote working. Artboards can be exported directly from Sketch with a plugin. There they can be organized in a way, which fits a particular goal: a user journey map connect different part of products while skipping irrelevant responsive variations and states.