Sketch Tutorial Series

Creating Responsive Components for your Design System: Carousel

Let me show you how to create fully Responsive Components within your Design System

Marc Andrew

Published in

Design + Sketch

6 min readDec 7, 2018

Yes. Although Atoms, Molecules and the like (that’s Buttons, Text Fields etc… for us regular folk) are the basic, core elements of any great Design System. The real fun begins when you start bringing those smaller components together to create full-fat, king-size Components with their many Overrides at your disposal. And in this short, but hopefully insightful Tutorial Series I aim to show you how I created many of the larger Components inside of my own Design System; Cabana. Taking those smaller elements; Symbols, and in turn Nested Symbols, and creating fully Responsive Components.

I’ll show you how I created the foundational elements such as Icons, Buttons, and Text Styles and constructed these little by little into full sized, Responsive Components such as Menus, Calendars, Cards, and more… throughout this Tutorial Series. Hold tight, it’s going to be informative with a sprinkle of fun!

Let’s take the example below which is included in the Cabana Design System. A simple, but highly versatile Carousel…

This Responsive Component is constructed from just the one Symbol, with a number of Nested Symbols inside of it (as well as the odd Text Style that came along for the ride too).

Let me show you how I constructed it. The various Symbols and Text Styles that made up its structure, and also enabling it to be fully Responsive…

Slide

Firstly, I started with the Slide element, which was basically taken from a Placeholder Symbol that I’d created previously.

The Placeholder Symbol simply comprised of a Rectangle with an Image Fill…

…and an Icon (I touch upon the creation of these in the 1st part of this Tutorial Series here) which was Fixed both Horizontally, and Vertically…

With my Placeholder Symbol created, I inserted it onto the page, and simply renamed the Layer to Slide.

And as you can see from the following image, I then had a handy set of Overrides to now use inside of my Carousel when required…

Left & Right Buttons

For the Left and Right Navigation Buttons for the Carousel, I inserted a couple of Button Symbols that I’d also created previously here, and then aligned them (using the 8pt Grid System) 16pt from the Left, and Right edges of the Slide Symbol.

Then, using the Resizing options, I Pinned the Left Button to the Left edge, the Right Button to the Right edge, and Fixed both their sizes Horizontally, and Vertically.

Indicators

For the Navigation Indicators I called upon a Symbol (Pagination) that I’d created previously. Let me show you how I constructed this versatile element…

This Symbol basically comprised of 4 Nested Symbols spaced 8pt apart from one another…

…and was comprised from 2 separate Symbols…

Pagination Dot/Small/Active
Pagination Dot/Small/Inactive

…which were simply 2 Ovals, 8x8 in size, and each with a different Layer Style applied, and their sizes Fixed both Horizontally, and Vertically.

Returning back to the Pagination Symbol, like I mentioned, I spaced the Dot Symbols 8pt apart from one another, and then from the Inspector panel, set one as the Active Symbol, and the others to the Inactive one.

Once I had those set up I grouped the 4 elements, and Fixed the new groups size Horizontally, and Vertically.

With that Symbol constructed, I inserted it into my Carousel Symbol, aligned it 16pt from the bottom edge, and Pinned it to the Bottom Edge also.

And if you take a look at the following image, you can see how versatile this new Symbol is. Where you have the ability to easily switch (via the Overrides panel) different dots from Active to Inactive and vice versa, and set the shape color as you so require. Awesome right?

Title

For the Title, which was taken from a Text Style that I’d created earlier (You can read about creating Text Styles here.), I simply aligned it 16pt from the top of the Indicators/Pagination Symbol, and then from the Resizing options, Pinned it to the Bottom edge, and Fixed its size Vertically.

And, erm, yeah, that was kind of about it really.

With my Symbol constructed, and all Resizing/Responsive settings, erm, set?…

…I then had a ridiculously versatile Carousel Component that I could drop into my design, resize with ease, and customise to the max with the various Overrides at my disposal. Happy time-saving times indeed!