Leave a Comment

Sketch Template Starter — Another Freebie

In a previous blog post I outlined the seven steps of my typical web design process. To further speed up that process I work from a Sketch Template Starter I put together. This freebie will help you to quickly organise your next project’s typography, colours, and other UI elements (responsive layouts, buttons, forms, etc) into a flexible, easy to use design system powered by Sketch’s symbols functionality, text and shared styles.

Sketch Template Starter

How does this Sketch Template work?

This Sketch Template Starter is completely customisable, and it helps me to quickly organise my project’s brand typography and colour pallets. First of all Sketch’s Shared Styles are used to organise the colour pallets, and Sketch’s Text Styles are used to organise the typography. In turn, these shared and text styles inform the design of the buttons and form elements which utilise Sketch’s Symbols functionality. In short, it means that you can edit everything from a single place — it will automatically be updated throughout your entire design.

What does it include?

  • Text Styles
    • h1—h6
    • Paragraph
    • Blokquote
    • Attribute
    • Each in black and white
    • Each for left, centre, and right alignment
    • 56 text styles in total
  • Colour Palette
    • Set up as Shared Styles
    • Primary – 5 shades
    • Secondary – 5 shades
    • Shades – 7 shades from black to white
    • 17 shared styles in total
  • Buttons
    • Static
    • Hover
    • Focused
    • Pressed
    • Disabled
    • Each with 3 styles of arrows
  • Form elements
    • Input field – 5 states
    • Select field – 5 states, each with 3 styles of icon
    • Radio symbols – 5 states
    • Checkbox symbols – 6 states
  • All symbols are resizable
  • Sketch Version: Created with Sketch 47.1 and newer

Sketch Template Starter
Sketch Template Starter
Sketch Template Starter

What else do I need to use it seamlessly?

How do you thank me?

Oh, there’s no need, really. I just hope this process helps you like it does me… or you could:

Buy Me a Coffee at ko-fi.com


Design tips, tricks, and freebies

Leave a Reply

Your email address will not be published. Required fields are marked *