Curious about the newly updated Design System Starter Kit for Sketch; Cabana?
Well, you’ve come to the right place!
Design System for Sketch - Cabana
Cabana is a Design System Starter Kit for Sketch that helps you create amazing products...fast.
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 -
Spec · 8-Point Grid
Before you start This guide is meant to help designers lay out UI quickly and consistently. It's particularly helpful…
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…
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).
Then, simply make your Color adjustments, and once you’re done, click Update Layer Styles to apply your changes.
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.
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 -
Tint and Shade Generator
Easily make tints and shades that match the output of Chrome DevTools, PostCSS, and Sass.
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.
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.
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.
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.
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.
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.
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.
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
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.
Here you will find a selection of popular Brand Colors to be easily applied to Brand (Social) Icons/Buttons for example.
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.
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.
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…
- Grey Semi
- White (70% Opacity)
- 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.
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).
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%
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.
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.
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 Shadow — 5
- 2nd Shadow — 10
…once you’ve inserted your HEX value, and then simply click on Update Layer Style as you change each Shadow Style.
The Styleguide comes in 2 styles; Dark & Light, enabling you to present your Styleguide in the best way possible.
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.
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.
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.
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.
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.
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.
Here you will find the foundations for the Cabana Design System.
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.
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.
The following is taken from the Sketch documentation…
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.
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.
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.
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.
Touching upon the Layer Styles included with Cabana. You will find the following -
- Blur Overlay
With the Blur Overlay you have 2 different styles; Dark & Light, with Blur Strength variants for each one.
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.
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.
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.
Here you can find the various Shadow Styles that you created previously on the Setup & Configuration page, and their varying Elevation options.
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.
Thanks for reading the article,
Designer, Author, Father, and Lover of sunshine when we get it (I’m based in the UK).