
Have you brought a Design System into your Sketch workflow yet? š„
You need to check out Cabana, and improve your Design Workflow in Sketch right here, right now!
As you may, or may not know, I created this lilā Design System for Sketch, that goes by the name of Cabana. I released V1.0 back in November 2017 (v2.0 has just been released), for personal use initially when working on either client projects or projects of my own to help speed up my workflow on a daily basis.
Here are my thoughts on what made me decide to create Cabanaā¦
Now. Iād come across countless UI Kits and the like in recent years, and yes, Iād been partial to grabbing the odd one on occasion, either for design inspiration, or for me to try and twist and shape it into something suitable for the project at hand. But each time I always (and Iām sure this applies to many other Product Designers out there) felt constricted by them. I canāt put my finger on it completely but it always felt like I was using too much of someone elseās Design and felt like a bit of a fraud using a UI Kit in that way, and that also the countless UI Kits out there are always designed for one kind of Industry or type of App (ie; FinTech, Social, E-commerce etcā¦) and if you want to twist it into something else then youāre spending waayyy too much time with it. The majority of UI Kits are overly stylised, and constrict you from the get-go!
I had become frustrated with starting from a blank slate every time when firing up Sketch to work on a new Project. Itās a strange balance I like to keep, and Iām sure many other designers can attest to. You like to come to each new project with your own creative juices flowing and not be restricted by starting off with a UI Kit, but you also donāt want to be coming in without the basic UI elements/components at the ready (ie; form fields, buttons, icons etcā¦) Re-creating these kinds of elements time and time again for each new project is a massive hindrance and siphons off some of those creative juices before youāve even got really going.
I wanted to build something that gave me the flexibility to explore different styles quickly, and customise them to match the project at hand.
The Designer in me really struggles with grabbing a purpose built UI Kit, adapting it slightly, and calling it my own work, and if I found myself just using a tiny portion of the Kit, I would come out feeling cheated for spending $58 for using some Form elements that had a pretty drop shadow applied to them. Iāve picked up these Kits in the past, and then theyāve just sat on my SSD gathering digital dust. Not cool!
That is one of the key reasons on why I went ahead and built Cabana. To give myself much more freedom when creating Artwork inside of Sketch, not feel restricted, speed up my workflow, and to not feel like Mr F. Raud.
Having Cabana at the ready for ooh nearly 10 months now has proved invaluable to me, and has not constrained my creative needs in any way, and looking at the feedback from the hundreds of users whoāve purchased the System in that time, it has proven invaluable to them also.

Cabana was never meant to be this Static (of sorts) System that you tweaked a little and was done with. It was meant to be much more than that. Something a User could take as is in its Vanilla form and create something for a Client, but also their own personal System on which they could tweak, add to, and adapt it into something much bigger and suited to them.

Iām just so humbled, and grateful, and inspired to receive great feedback from existing users on how it has helped them greatly in their daily Workflow when working on a project in Sketch. And itās always humbling to know that this little System that you created is being used on projects far and wide. Strike up the soppy music, a tear just fell from my eye.
Freelancers, Designer Agencies, and Educational Institutions such as USC (where Cabana has been introduced to some of their Students) are all implementing Cabana into their Design Workflow, and thatās a pretty awesome feeling!
Check out (a tiny portion of) Cabana in action, right hereā¦



Cabana is constantly evolving, and the latest version (2.0) is a massive update! Listening to existing users, Iāve tweaked, refined, fixed issues, and added so much more to it, to make it one of the best all round Boilerplate Design Systems there is. Want to see what was added/improved in 2.0? Well dear Sir/Madam, hereās a mighty long Changelog just for youā¦
If Changelogs are not really your thing, please scroll to those Testimonials below. Thank you for your understanding, and have a great day!
v.2.0
Aug 8th 2018
- Removed Arrow Emoji from Overrides as generally no longer needed due to Sketch default indenting for Overrides in Inspector
- Fixed wrong Typeface on Caption Text Styles
- Changed Font Family #2 Typeface from Open Sans to Roboto, to avoid weird issues with Open Sans not been found on some usersā systems due to naming issues
- Improved: Issue with bulk Text Style changes causing Sketch to hang for waaayyy too long
- Added 47 new Icons (Face ID, Fingerprint, Podcast, Coffee Pot, Soda, Folder Open, Folders, Graph Bar, Graph Line, Hiking Pack, Game Controller, Dress, T-Shirt, Book, Page, Bitcoin, Database, Stack, Inbox, Activity Rings, Fitness Watch, Leaf, Team, AirPlay Audio, AirPlay Screen, Chromecast, Medal, Trophy, Passport, Umbrella, Shopify, Squarespace, Medium, Meetup, Messenger, Product Hunt, WhatsApp, Trello, Closed Captioning, EQ, List, WiFi, Bluetooth, Dog, Pie Chart, Poll, Party)
- Updated Maestro and Mastercard Symbols (Color & Flat) to latest branding
- Alignment adjustments on Input/Text Area Symbol
- Reduced Text Size for Medium Inputs from 21 to 18
- Reduced Text Size for Large Inputs from 24 to 21
- Fixed issue with Text shifting around in Text Area Symbol on Resize
- Tweaked Icon alignment on all Button Symbols, so icon not as tight to left or right edge
- Slight Alignment Tweak to Chip Symbols
- Tweaked 0% Progress Bar so no Bar is actually visible
- Tweaked Light Grey Base Color so stronger contrast between Grey
- Added āPressedā Button State
- Updated: Light Grey Base Color & Text Style changed to a softer Grey
- Added āFocusedā State to Text Inputs
- Fixed: Missing States on certain Shape Fill Symbols
- Fixed: Pin to Top missing for Toggle Switch Symbol
- Fixed: Organised, and Renamed Layers correctly for Tab Symbols
- Updated: Renamed Tab State from Inactive to Disabled
- Added: Field Input (Default + Label)
- Added: 4 New Gradients (Indiana, Blue Steel, Pure Shores, and Plumber)
- Added: Gradients as Symbols. Can now be used on Buttons, Icons and moreā¦
- Removed: 80% Opacity from Gradient Layer Styles allowing more versatility on elements
- Added: Calendar Components
- Added: More Menu & Dropdown Components
- Added: Tag Symbols
- Tweaked: Spacing Measurements on Chip Symbols
- Added: New Progress Bar Symbol (Style Three)
- Added: Modal Symbols (Default, and Default + Image)
- Added: Placeholder Symbols (Aspect 1:1, and Aspect 16:9)
- Added: Card Symbols (2 Styles)
- Added: Video Player Component
- Added Chart Components (Donut Chart, Pie Chart, Area Chart, Stacked Area Chart, Stream Graph, Line Chart (Smooth), Line Chart (Sharp), Sparklines, Scatter Plot (Default), Scatter Plot (Bubbles), Bar Charts (Vertical), Bar Charts (Horizontal)). Charts available in Light, Dark and Gradient options
- Added: Map Component
- Added: Data Table Components
- Updated: Changed Success, Warning, and Error Base Colors to slightly softer shades
- Added: More Emojis to Pages, Layers etc⦠because Emojis still rock!
- Added: Range Slider (Single, Double, and Slider + Value)
- Updated: āPlease Start Hereā Page has had a nice visual upgrade
- Updated: Design System Demos page has some great new Concepts for both Desktop and Mobile, all created with Cabana in record time of course ;)
- Updated: Journey Demo has been given some fresh, colourful images. It was looking a little, erm, dreary!
- Updated: Components page now better organised for easier navigation and selection of a required elements
- Added: Brand Color Styles for Android, Hangouts, PayPal, Medium, Meetup, Product Hunt, Shopify, Squarespace, Trello, WhatsApp, and Messenger
- Added: Library Preview image
Crikey! Thatās a Changelog to the Max.
Hereās what a few awesome users of Cabana had to sayā¦
Cabana is one of the most well-organised, extensive (and sexiest!) design systems Iāve seen. The Sketch library is super easy to work with and personalise.
Cabana Design System will help you ideate faster, design cleaner products from wireframe to launch. Cabana is an essential tool for all designers.
The Cabana Design System is a well thought out and implemented tool kit which has helped us make our design flow more consistent and also helped us understand some of the more subtle and very useful aspects of Sketch. My advice is to take time to explore the whole system to understand how components are designed and then you can quickly apply your own styling and tweaks.
After the initial effort, this tool kit has speeded things up for us and has helped us manage configuration control and explain designs to our developer team. Great value when you consider the time and effort needed to create! Thank you.
š Want to greatly improve your design workflow in Sketch? Grab a copy of the Cabana Design System here.
Use the offer code MEDIUM25 to receive 25% OFF.

Thanks for reading the article,
Marc
Designer, Author, Father and Lover of Livinā Joyās Dreamer (Old Skool)

