Every design project can benefit from a well-thought-out style guide. Use this tutorial to build out a UI kit and simultaneously create a custom (and reusable) library for rapid prototyping.

Whether a Sketch expert or new to Sketch, designers are finding it a valuable resource for their design toolbox that can save a lot of time. Though not every designer chooses to do so, creating style guides in Sketch can make it even more of a time-saver.

A style guide not only helps keep things consistent but also allows updates to elements like colors and icons across multiple documents with a lot less hassle. This tutorial walks through the step-by-step process of creating a style guide and UI kit and will give designers a better understanding of Sketch symbols, referencing a Sketch library for their designs, and confidence in the organization of their design assets.

Creating Your Sketch Style Guide

“A style guide is a comprehensive ‘living document’ that keeps track of all the repeating elements for a project, from branding rules down to the amount of beveling for call-to-action buttons,” according to UXPin. A style guide can include anything from simple visual elements to vocabulary and approved imagery. This tutorial covers organization, colors, icons, fonts, text styles, and assets.

Step One: Organization

  1. Create a master folder to hold sketch files, plugins, and other necessary assets like fonts and iconography. (Plugins will be discussed at the end of the tutorial.)
  2. Start a new Sketch file and name it “Clientname Library.” For example, if your client is Toptal then your file should be named “Toptal Library.”

Creating a style guide with Sketch

Step Two: Colors

If colors have been already selected, the next step is to convert your colors into symbols.

  1. To do this, make squares of the same size and change their colors accordingly. Click “Create Symbol” and save these elements using the color/@color-name labeling system. Color/@pink, color/@background-gray, or color/@FFFFF are examples of proper labels. Naming conventions are important in keeping a style guide organized, so a format for everything should be established and adhered to from the start.
  2. Once complete, add them to the style guide page.
  3. Save the color swatch in the documents section of your color palette.

Converting color blocks to Sketch symbols

Helpful shortcuts: R - rectangle tool, T - text tool, alt - measure distance.

Sketch symbol colors should also be added to the document color palette

Save the color swatch in the documents color palette.

Step Three: Icons

Turning icons into dynamic symbols allows their color to be easily changed to any of the colors saved in Step Two above. This means that after an icon is placed into a design, the color can be changed through a simple dropdown menu, called an ‘override,’ using the ‘Inspector’ to the right of the canvas.

  1. Save the icon as a symbol (stick to .svg for the asset type if possible).
  2. Go into the symbol page, find the icon, and mask it with a default color from the colors previously saved. To do this, overlay the color symbol on top of the icon and click “Mask” in the toolbar (or right-click and select “Mask” from the pop-up menu).
  3. After the icon is masked, remove the fill by unchecking the checkbox under the “Fills” section in the Inspector.
  4. Organize the icons in the style guide page. In the same section, it’s helpful to specify the color for active and inactive icons, plus any other important color specifications.

Saving icons as Sketch symbols makes them easier to manipulate

First, make the icon a symbol.

Changing colors of masked Sketch symbols

Next, create a mask with the previous color symbols.

Colors can be changed with the "Overrides" dropdown

When needed, change the color of any icon with the Overrides dropdown.

Step Four: Text Styles

Once fonts have been chosen, it’s time to specify text styles: H1, H2, H3, H4, H5, body, links, captions, labels, etc. A good reference for web typography is this blog post by Typecast.

  1. Choose the size, weight, character, and line spacing for as many styles as necessary.
  2. Write out a word (“Type Something” automatically appears when you press T, the text tool) and format it to reflect the style details chosen.
  3. Click “Create new Text Style.”
  4. Organize the text styles in the style guide page.

Specifying type styles in your Sketch style guide keeps everything consistent

Creating text styles keeps your UI style guide consistent.

Step Five: Assets

Now for the fun part. It’s time to combine all the previous steps to create some assets. If assets have already been created, for consistency, it’s best to recreate them using the text styles, icons, and colors you have already chosen. For example, there could be many different colors of gray within the working design document that a design hasn’t accounted for, so recreating the asset will guarantee the consistency of the chosen color. Don’t forget to keep naming consistent, and be sure to add assets into the style guide page as they are created.

Here are some suggested assets to work on:

Buttons

  1. Make these dynamic symbols, just like the icons, by masking the button in the default color and removing the fill.
  2. To keep the text centered at all times, span the width of the text box to be the same as the button and center the text.
  3. To ensure consistency, be sure to use the saved text styles.
  4. Save these elements as symbols using the button/button-name naming system.
  5. Use the override feature to change labels and colors.

Search Bars

  1. Apply resizing constraints to the search field, and icons and text used within the field itself.
  2. Don’t forget about applying text styles and colors previously saved in your document color palette.
  3. Save this element as a symbol using search as the title, or if you have different types of search, adhere to the labeling system such as search/standard and search/no-icon.

Radio Buttons and Checkboxes

  1. It’s possible to have a symbol within a symbol, and a good way to test it out is to create intelligent radio button and checkbox assets.
  2. First, make the button asset itself. Save this element as a symbol using the checkbox/selected and checkbox/deselected as an example labeling.
  3. Now create the input. Add placeholder text next to the checkbox symbol and then convert the entire asset to a symbol. Since this is now an input, it is suggested saving the asset as such, so a good label would be input/checkbox/selected and input/checkbox/deselected.

Step Six: Use the Style Guide!

Doing all of this work to create a style guide is only useful if it actually makes a project run more smoothly. Once all the assets have been created, it’s time to apply the library to the document being designed. In Sketch, go to “Preferences ‐> Add Library…” and add the library document.

Applying a Sketch style guide to future documents

Once you’ve added a library to your project design file, you can access the library and its symbols in the symbols section. You’ll notice the iOS UI Design library that comes with Sketch as a library option, as well as the library that was recently imported.

Style guide assets can be accessed as Sketch symbols

You can find all of your libraries in the symbols section of your design document. You can add and remove as many libraries as you'd like.

If you want to update a symbol, double-click on the symbol itself and your library document should appear. Once you’ve made the changes, go back to the design document and click the update button in the top right corner.

Sketch symbols can be easily updated across documents whenever the library is updated

"Library update available" will appear in the top right corner in Sketch.

Sketch will show an alert when symbols can be updated

When Library updates are available, a modal will display the symbols that have changed in the Library. Clicking "Update Symbols" will approve the changes.

Bonus: Importing/Exporting Text Styles

Text styles don’t get saved with a library, but the Shared Text Styles plugin for Sketch solves that. Once you’ve downloaded the plugin, go to the library document and then to the menu: “Plugins ‐> Shared Text Styles ‐> Export…” Save this file in the same folder as your library document. Then, in your design document go to the menu again: “Plugins ‐> Shared Text Styles ‐> Import Text Styles…” and import the file you just saved. Your text styles will appear.

Saving text styles requires an extra plugin

Bonus: Importing/Exporting Color Palettes

Similar to text styles, document colors don’t save over with a Sketch library, but the Sketch Palettes plugin solves that. Much the same as above, export the palette using “Plugins ‐> Sketch Palette ‐> Document Colors ‐> Save Palette” and import it with “Plugins ‐> Sketch Palette ‐> Document Colors ‐> Load Palette.” Remember to save it in the same folder as your other library documents.

Bonus: Fonts

Craft by InVision is a suite of plugins that take the Sketch software to the next level. Craft allows you to replace images with stock photos, prototype and sync to InVision, create libraries, and more. If Craft is downloaded, hit “cmd-shift-c” in the document and a stylesheet will generate. The fonts will be listed here.

Craft from InVision brings a host of additional features to Sketch

Following the six steps outlined above will make both large and small design projects run more smoothly and the end result will be more polished. If they’re unique or very specific, the style guide, Library, and UI kit can be used for one client, or for many projects if standard UI elements are being constantly created, such as wireframes and prototypes. Devoting time, in the beginning, to create these Sketch UI components properly will save a lot of time down the line, and potentially across many projects.

• • •

Further reading on the Toptal Design Blog:

Understanding the Basics

What is a branding style guide?

A branding style guide serves as a reference for any design assets created for a particular brand in terms of visual design elements (fonts, colors, logos, icons, etc.) to keep things consistent across designs.

About the author

Yvette Solorzano, United States
member since March 30, 2017
Yvette "Yves" has years of experience in design—ranging from print, web, and the in-between (branding, UX, architecture). Currently, she works full-time designing smart design solutions for her clients. She has a minimal and clean design aesthetic while pushing the boundaries of creativity and innovation. A trained developer, Yves' current languages are HTML and CSS so she can bring her designs to life. [click to continue...]
Hiring? Meet the Top 10 Freelance Sketch Experts for Hire in September 2018

Comments

Ruslan Voroshchuk
Awesome article, Yvette! Thanks for the great guide to the style guide at Sketch ))
Yvette Solorzano
Thanks Ruslan! I'm happy you enjoyed it :)
Ahsan Idrisi
On the spot, explained it very well Yvette. Loved this style guide stuff
Polly
I like all the ideas above that makes the flow to be more efficient! :-) Sometimes I am confused when I create all the icon, text, color and asset symbols at the first stage, I keep change on these symbol settings or even keep to add NEW symbols during the design process. Then I have created many and many symbols which just have a little different between symbol and symbol. Is it all right to do these?
Adham Dannaway
Some good tips, pretty sure that Sketch Library's now support text and layer styles.
Rômulo Bastos
Awesome content, Yvette. Thank you!
Yvette Solorzano
Thanks Ahsan! I tried to make it easier for everyone
Yvette Solorzano
Hey Adham! Exciting stuff. I'm looking forward to expanding the tips and tricks as I learn them myself
Yvette Solorzano
With pleasure Romulo!
Yvette Solorzano
Hi Polly! What are you confused about exactly? You will most likely end up with a lot of symbols. The point here it to create uniformity when you design - plus speed up the process so you don't have to recreate the components everytime
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Yvette Solorzano
Designer
Yvette "Yves" has years of experience in design—ranging from print, web, and the in-between (branding, UX, architecture). Currently, she works full-time designing smart design solutions for her clients. She has a minimal and clean design aesthetic while pushing the boundaries of creativity and innovation. A trained developer, Yves' current languages are HTML and CSS so she can bring her designs to life.