Styleguide and Handoff - Learn Sketch

Principles

Design principles are a set of guidelines that explain what matters to the team and company values when designing products. What is the purpose? What kind of experience do you want to bring to your users? What is the look and feel you’re aiming for? All these guidelines will impact how your team is solving the problem when building the product.

The design principles from Apple’s Human Interface Guidelines is an excellent example for guiding people when designing for iOS. Apple-HIG

Typography

Typography is a fundamental principle for consistency. It is recommended to stick with two typefaces or less, and limit the number of font sizes to keep the textual content legible and clear.

We can define Text Styles in Sketch so that it is easy to change typefaces and sizes across the designs. Start with Headers and the Body text, and then expand from there.

Craft Library

You can use Craft Library to manage your Styleguide. Create a new Library in Craft and then save it to your cloud services so that your teammates can use it. With this, the team will always have an up-to-date Styleguide.

You can go to Typewolf, Typ.io, Typecast, Font Flame, Fontjoy or FontPair to look for ideas for pairing fonts. For font sizing, you can read more in A More Modern Scale for Web Typography and Contrast Through Scale.

Colors

Colors help establish a visual hierarchy, a sense of familiarity and unity to the design. A good color system will help designers choose colors based on the context and focus more on content.

There are three subsections in Colors: Base Colors, UI Colors and Object Styles. Base Colors cover the brand color and primary call-to-action color as well as actionable texts like links and buttons. UI Colors cover different states of validations, warnings, alerts, successes and more. Object Styles cover the border width, border radius, shadows, etc.

Icons

Icons can help communicate with less texts. But overusing it will make the design overwhelming, so it’s good to state where and when to use icons.

Grids and spacing

The grids, columns, rows and margins are invisible elements in the design. Taking care of these will make your design look more balanced and have consistent negative spacing. Proper use of white space can emphasize the importance of the content.

8 Point Grid System

If you’re working with the 8 Point Grid system, you can change the Nudging value in Sketch Preferences.

Tools for making a Styleguide

Craft Library is the most prominent among all the tools out there. It even can share Text Styles and Layer Styles with other designers, unlike Sketch Libraries which only works with Symbols. If you already have an existing design but don’t have any Styleguide, you can use Craft Library to create one instantly. From there, you can find and fix the inconsistencies by syncing your styles.

Lingo

But Craft is not the only tool that let you create and manage Styleguides. [Lingo] is another app that can achieve similar results, and the workflow is almost identical. The main difference is that Lingo has a native macOS app that lets your team access the library anytime, anywhere.

A better handoff

The handoff from design to development is a much simpler workflow thanks to Craft Sync, Zeplin and Sympli that are made available for Sketch users. These tools will automatically generate the specifications of your design once you sync them to the platform. Developers can select the elements and properties to inspect. Also, they can export assets from those tools if you’ve set Make Exportable. This makes your Styleguide extremely useful, and everyone in your team, including the developers, will be kept in the loop.

Invision Inspect

Using Craft Sync is as easy as one-click. Once you’ve created a project in InVision, go to Sketch and select the Artboards that you want to upload to InVision. Click the Sync icon. Once it’s done, head over to the InVision website to view the project. InVision Inspect will let you grab the texts, properties, and also some basic Swift code if you’ve set the project as an iOS project.

Zeplin

Zeplin works the same way. However, they have a native macOS app. Once you’ve synced using the Zeplin Sketch plugin, your Artboards will be uploaded to your Zeplin project.

Sympli

Sympli has an advanced feature which works with Android Studio and Xcode to let developers implement the design faster. The upload process is just as simple as using the Sympli plugin. It has the version tracking with visual highlighting of changes between design iterations. This automated design handoff process is streamlining the communication and collaboration amongst your team.

BACK TO

Exporting Assets

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

ePub

Assets

Subtitles

Learn Sketch

Introduction to Sketch Basic Tools