Image for post
Image for post

Sketch Tutorial

Getting Started with Cabana 3.0 for Sketch

Taken from the official Cabana 3.0 User Guide

Marc Andrew
Aug 15, 2019 · 16 min read

Curious about the newly updated Design System Starter Kit for Sketch; Cabana?

Well, you’ve come to the right place!

Here is the official User Guide included with Version 3.0. Enjoy…


Please take the time to read through this guide before using Cabana. Doing so will enable you to get the very best from this amazingly powerful, and versatile Design System/UI Starter Kit.

Also, if you’re working as a part of Team, please remember to distribute a copy of this guide to your Team Members also.

Ok. Here we go…

Cabana uses the 8pt Grid System

Cabana uses the ever-popular 8pt Grid System (8, 16, 24, 32, 40, 48, 56, 64 etc…) on all Symbols, and Components to help you lay out your UIs quickly, precisely, and consistently.

I chose to use the ‘Soft Grid’ approach inside of Cabana, where you simply measure 8pt increments between individual elements throughout your design. You can find more information on both the ‘Soft Grid’ and ‘Hard Grid’ approaches at the links below.

Now, there are a few instances where I may have opted for a 4pt measurement due to the size constraints of a very small Symbol, or Component, but for 99.9% of the Symbols, and Components used inside of Cabana I have stuck to 8pt increments rigidly.

Like I mentioned, you can find further information on the 8pt Grid System at the following links -

Setup & Configuration

On this page, and as simple as it may look, is where you can style a large portion of the Design System to suit your project needs.

Let me show you…

Colors

Base Colors, Tints & Shades

When you decide to change the Colors, and any of their corresponding Tints (Light, Lighter, and Lightest) or Shades (Dark, Darker, and Darkest) you can do so by simply dragging your cursor across your chosen Color (ie; Primary), this in turn will select not just the Fill style, but also the Border style at the same time (and you will see these both referenced inside of the Inspector panel).

Image for post

Then, simply make your Color adjustments, and once you’re done, click Update Layer Styles to apply your changes.

Image for post

To change the Tints (lighter variants) for, example your Primary Base Color, copy the HEX value from your Base Color, insert it into the Fill option for the Tint, then select the HSL (Hue, Saturation, Lightness) option, and simply tweak the Saturation (S), and Lightness (L) options to your preferred Tint.

Image for post

The same process applies to the Shades (darker variants).

Now, a tool I use to make the whole Tints & Shades process even quicker and one that I highly recommend, can be found at the following link -

You can quickly, and easily produce Tints & Shades by simply pasting in your Base Color HEX value, which in turn will produce perfectly computed Tints & Shades for you.

Image for post

Then select which Tints & Shades you would like to use inside of Cabana, and simply copy back across your chosen HEX (Tints & Shades) values, which you can then insert into the relevant Fill options, and Update.

Image for post

Greys & Black

For the Grey tones, like the Base Colors above, you can use the service I linked to, or, and due to the fact there aren’t as many options, simply adjust the Fill Colors for each Grey Tint and Shade inside of the Inspector until you have your preferred choices.

Image for post

For Black, simply make the required Fill color adjustments inside of Sketch.

Remember once you have made the adjustments, to click on Update Layer Style to save your changes.

White & Opacity Variants

As well as offering the standard White, there are also varying Opacity Levels of White available to you.

Image for post

These are perfect for when, for example, you want to insert an Icon over the top of a Color or Image, letting you easily allow as much, or as little of the Color or Image to leak through. This works great when paired with the Typography (70% Opacity) style which I’ll touch upon in the following section.

Image for post

Quick Note: When you insert Color Fill Styles into your design, you will see that there is also a ‘No Style’ option at the top of your available choices, and this is perfect for when you want to completely remove the Fill Color from an element.

Image for post

Gradients

Cabana includes a small selection of subtle, modern Gradients to use within your designs.

You will see in the Inspector fly out menu that you can also set the angle of the Gradient between Left to Right, or Top to Bottom.

Image for post

As well as the standard Gradients, you will also find an option labelled ‘Overlay’, which includes the following -

- Dark Bottom Shade

- Dark Top Shade

- Light Bottom Shade

- Light Top Shade

Image for post

The Dark Bottom Shade, for example, can be used where you may want to add Text over the top of an Image, and this option allows a much better Contrast between the Image and Text.

Again, like the Base Colors previously, you are more than welcome to adjust these to your own personal preference from the Inspector Panel, and then click on Update Layer Style once you’re done.

Brand Colors

Here you will find a selection of popular Brand Colors to be easily applied to Brand (Social) Icons/Buttons for example.


Typography

In the Typography section there are a multitude of Text Styles suitable for both Desktop and Mobile Design, as well as styles specific to Inputs, and Buttons.

Image for post

In regards to the Inputs, and Buttons Text Styles, the way these differ is that they are set to Vertical Alignment in the Text Inspector, which means that when you change the Font to your preferred choice, your Text will still stay vertically aligned inside of Inputs and Buttons, and help avoid misaligned text elements due to varying Font Line Heights.

Image for post

All of the available Typography options in this section also have their Line Height set so they perfectly align to a 4pt Baseline Grid, enabling consistency throughout your design.

If you feel the Line Height is too tight, or too loose for certain Text Styles then please feel free to adjust the Line Height option in the Text Inspector, and then click on Update Text Style.

The same applies to the Character Spacing. Tweak to your personal preference if required.

The Typography choices inside of Cabana include the following Color options…

- Black

- Grey

- Grey Semi

- White

- White (70% Opacity)

- Primary

- Secondary

- Tertiary

- Green (Success)

- Red (Error)

…and also include the following Alignment options…

- Left Align

- Center Align

- Right Align

To have the Typography options correspond to the Base Colors that you set previously in the Colors section, simply copy across the HEX value of that color (ie; Black, Grey, Primary, Secondary etc…), and then select the corresponding block of Text Styles, add your HEX value to the Fill option in the Text Inspector, and then click on Update Text Style.

Image for post

The Typography choices available as standard are -

  • Inter (Font Family #1)
  • Oxygen (Font Family #2)

My personal preference is to use Font Family #1 for Headings, Buttons etc…, and Font Family #2 for Body, Small, Caption text etc…

You can use the Text Styles however you like of course, but I created all Styles for each Font Family so you can easily swap and change between the 2 as you see fit.

To update a Font Family to your preferred choice you can simply drag your cursor across all the Text Styles (ie; Font Family #1), choose your preferred Font from the Text Inspector, and then click on Update Text Style(s).

Image for post

You can choose to update all the Text Styles (ie; Font Family #1) at one time, or you can simply just choose a specific block of Text Styles (ie; Font Family #1 (Primary)). It’s entirely up to you, and depends on which Text Styles you’ll actually want to use on your project.

Quick Note: The Titles for reference (ie; Font Family #1 (Black)) are locked so don’t worry about inadvertently selecting them when you select the blocks of Text Styles. You can zoom right out and still select the blocks quite easily.

To insert a Text Style simply navigate to the Toolbar, click on Text Styles, and insert one from there (ie; Headline-1 > Font Family #1 > Left > Black > Bold).

Quick Note: Why only Regular & Bold options you might ask?

When I built Cabana, and having worked with countless Fonts, I’ve come to realise that not every Font Family has a Semi-Bold or Medium weight for example, or they do have one, but not the other, and by offering those options, and then for you to choose a Font that doesn’t offer one of those Weights, Sketch will automatically default that to a Regular style which in turn just causes you, as the user, massive headaches.

So I decided to keep it simple and opt for the standard Regular and Bold Font Weights which all Fonts have (or at least 99.9% of them do). Of course, you’re more than welcome to add in extra weights yourself if required.


Elevation & Shadows

You have 4 Shadow Color variants inside of this section…

- Light Shadow

- Dark Shadow

- Primary Shadow

- Secondary Shadow

… with 6 Elevation variants included for each…

- No Shadow

- Shadow 20%

- Shadow 40%

- Shadow 60%

- Shadow 80%

- Shadow 100%

Image for post

You will find these different options inside of your Layer Styles panel, and you can easily choose the level of Elevation, and Shadow Color from there, or simply choose the ‘No Shadow’ option if you want to remove the Shadow completely from an element.

Image for post

In the Inspector Panel you will see that each Shadow variant has 2 Shadows attached to it. And again, you’re more than welcome to tweak the Colors, Alpha, Blur etc… for these, or simply leave them at the Default settings.

Image for post

The Dark Shadow option is perfect for when you’re creating a Dark themed design, and want to have Shadows that are still subtly visible on top of a Dark background.

For the Primary, and Secondary Shadow styles, copy across the HEX value from your existing Primary, and Secondary Base Colors, select each of the Shadow squares, and then inside the Fill panel insert your HEX value into each of the Shadow options. Just remember to adjust the Alpha (A) settings back to…

  • 1st Shadow5
  • 2nd Shadow10

…once you’ve inserted your HEX value, and then simply click on Update Layer Style as you change each Shadow Style.

Image for post

Styleguide

The Styleguide comes in 2 styles; Dark & Light, enabling you to present your Styleguide in the best way possible.

Image for post

The majority of the Styleguide is ‘auto-updating’, as in, changes you make to the Colors, Typography, and Shadows on the Setup & Configuration page will be instantly reflected here.

There are of course certain elements (ie; HEX codes, Font Names etc…) that you will need to adjust manually, but most of the hard work is done for you already.

Please feel free to add, or remove items in the Styleguide, and adapt it perfectly to your own preferences.


Components

On this page you will find a large assortment of many commonly used UI elements (Components), most of them pre-designed, to easily drop into your next project.

Image for post

Some of them are Full, Stand-alone Symbols, and some are a combination of existing Symbols, but both varieties are easily customisable via the Overrides panel in the Inspector.

The Components on this page are presented on both a Dark & Light Background, with the only main differences between them is the usage of Shadow Style (Dark or Light), and/or choice of Text Color (Black or White). Presenting them this way enables you to quickly grab the Component of your choosing and insert it into the design you’re working on, be it either Light or Dark themed.

Also, most of the Components here are extremely versatile and can be tweaked to your personal preference from the Overrides panel in the Inspector. And if you find a Component does not exactly suit your requirements, simply Double-Click on it, where you can then edit the Symbol Master on the Symbols page, and adjust accordingly.

Image for post

All Components featured on this page are Fully Responsive, so you can quickly, and easily resize them to suit your current project.


Built with Cabana

Well, simply, this page is a quick demonstration of the power of Cabana, and gives you a brief insight into what is easily created using this Design System/UI Starter Kit.

Image for post

If you’re new to Sketch, or UI Design in general this is a great place to start and see how certain UIs are created, and also to see how powerful Cabana is when creating UIs similar to those shown.

Feel free to dive on in and pick apart the examples, tweak them via the Overrides Panel, see which Symbols were used to create them, and just have a good play around.

Image for post

Every element you see here is created via a combination of Cabana’s Text Styles, Layer Styles, and Symbols.

Simple as that really.

Quick Note: The ‘Built with Cabana’ examples shown on this page use the Bootstrap Layout Grid https://getbootstrap.com/docs/4.0/layout/grid. You’re more than welcome to stick with this Grid System throughout your projects, or you can simply change it to your preferred Grid System via View > Canvas > Layout Settings.


Symbols

Here you will find the foundations for the Cabana Design System.

Image for post

Every Component that you see on the ‘Components’ page is built from the Symbols found here.

Any changes you make to the Colors and Typography on the Setup & Configuration page will propagate automatically through to your Symbols here.

You can leave this page as is, as it is more than powerful in its default form with no customisation from yourself, or you can jump on in and modify certain Symbols to tune them more to your liking or preferences, it’s entirely up to you.

Certain Symbols are Nested inside other Symbols, so changes you make to the base Symbol will propagate into the Nested variant, for example with the Calendar/Day Symbol, if you decided to tweak this Symbol and change the wording from SUN to SUNDAY, this will propagate into the Calendar/Days Symbol where it is Nested, and you will see the changes updated there also.

Image for post

Quick Note: If you’re new to Sketch, and Symbols, please tread carefully on the Symbols page, as modifications to Nested Symbols can break things quite quickly. Always make a backup if you’re a little unsure on what you’re doing.

When Scaling and Resizing Symbols that you’ve inserted into a project I find it best to use the Scale option Layer > Transform > Scale. Using this method, as opposed to just resizing things with the Resize Handles, keeps properties such as Borders in proportion to the Symbol itself, and avoids any unnecessary visual anomalies.

Using Symbol Overrides

The real power of Symbols lies in the Overrides, and Cabana has them in abundance!

With a Symbol inserted, and selected on the Canvas, you will see a list of Overrides appear in the Inspector, enabling you to easily, and quickly customise elements to suit your current design.

Image for post

The following is taken from the Sketch documentation…

Focusing Overrides

When you have a Symbol instance selected, you will see all the overrides that are available to you in the Inspector. But you can choose to adjust specific overrides by selecting them in the Canvas or via the Layer List.

When a Symbol instance is selected, a highlight will appear when hovering over the overrides. Clicking one will focus the override inside the Symbol and isolate the override in the Inspector. You can also focus an override directly in the Layer List by clicking the disclosure triangle next to the Symbol instance’s name and choosing from the options. You can also Control-click an override in the Layer List to reveal options specific to it.

While an override is focussed, the Symbol instance layer will remain selected, so any actions such as moving and duplicating will apply only to that layer.

Nested Symbols

When a Symbol contains another Symbol, that is now nested. With overrides, you can swap out any nested Symbol, via the pop-up button in the Inspector with any other Symbol that is the same size, no matter if it belongs to the document, or to a Library.

You can also choose to display ‘None’, effectively hiding that Symbol from certain instances.

These nested overrides mean that you can have fewer Symbols that are similar, and have more power and control over individual instances.

Text

You can override the text layers in Symbol instances either in the Inspector, or in the instance itself on the Canvas.

To edit a text Override in a Symbol instance on the Canvas, double click on the text layer, then type or paste your new content.

To edit a text Override in the Inspector, look for the text layer’s original contents in grey in the override field. Type into this and hit enter to apply your override. Clearing the field will reset the text back to what has been defined in the Symbol master.

Additionally, you can click the Data icon, to the right of the layer’s name in the Inspector, to automatically apply your chosen data source to the override.

When you update the text contents, its total length may change. As a result, Sketch will automatically move any trailing layers on left or right aligned text, and respect the distance between it and the end of the text layer so you can fully take advantages of Symbols and overrides, no matter your design.

To prevent a trailing layer’s position to update when editing a text override, simply lock the layer by Control-clicking it, and choosing “Lock Layer” from the shortcut menu.

Images

Any image layer, or shape that contains an image fill in a Symbol can be overridden. You can select Choose Image… to add an image from your computer, or drag one onto the image preview to the right.

Like text, you can also apply an image from a data source as an override by clicking the Data icon next to the image layer’s name.

To remove an image override, click the image preview and press the Backspace key.

Text & Layer Styles

Overriding a Text Style allows you to swap the style of the text layer with any other style in your document, or Library. Perfect for being able to change a text’s color if you defined two similar text styles.

Similarly, you can also override a Layer Style in the same way, by choosing a saved style from the pop-up menu.


Layer Styles

Touching upon the Layer Styles included with Cabana. You will find the following -

- Blur Overlay

- Border

- Fill

- Gradient

- Shadow

- State

Image for post

Blur Overlay

With the Blur Overlay you have 2 different styles; Dark & Light, with Blur Strength variants for each one.

Border

The Border Style has a selection of Border Colors that you created previously on the Setup & Configuration page, and are most commonly used on Text Inputs and Buttons.

Fill

The Fill Style has an assortment of Fill Colors that you created previously on the Setup & Configuration page. You also have the Brand Colors here also, as well as the option to choose ‘No Style’ if you want to remove the Fill Color completely from an element.

Gradient

Here you have a selection of Gradients to use inside of your design, as well as custom Overlays which are commonly used on top of Images.

Shadows

Here you can find the various Shadow Styles that you created previously on the Setup & Configuration page, and their varying Elevation options.

States

The States Styles found here are most commonly used for your Text Inputs & Buttons.


Want to Design UIs Better, Smarter, and Faster in Sketch?

If you want to greatly improve your Design Workflow when working with Sketch, my ever popular Design System can help you in a really big way.

Use the offer code MEDIUM25 to receive 25% OFF.

https://cabanadesignsystem.com

Image for post
Image for post

Thanks for reading the article,

Marc

Designer, Author, Father, and Lover of sunshine when we get it (I’m based in the UK).

Design + Sketch

The best collection of articles, tips, tutorials, and…

Marc Andrew

Written by

Designer. UI & UX articles at https://marcandrew.me Created Cabana Design System for Sketch https://bit.ly/cabana-sketch & Figma https://bit.ly/cabana-figma

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Marc Andrew

Written by

Designer. UI & UX articles at https://marcandrew.me Created Cabana Design System for Sketch https://bit.ly/cabana-sketch & Figma https://bit.ly/cabana-figma

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store