How to create responsive iOS widgets with reusable elements

Welcome back to our widget tutorial! Today, we’ll learn how to create an adaptable widget template, starting from the background we made in our previous lesson. Creating flexible elements is key when working with widgets. That’s because your widget will appear in varying sizes and touchpoints across a user’s mobile screen.

In this lesson, we’ll be using Symbols to create elements that you can adjust for size, alignment, etc. This way, our elements will work as building blocks that you can easily replace or edit as your widget evolves.

Let’s get to it!

Let’s start with some prep work

For an iPhone app widget, you’ll need to create three Artboards with the following sizes (you can press A to activate the Artboard tool):

• 169x169px
• 360x169px
• 360x376px

Next, we’re going to create a template layer that we’ll reuse for all of these widget versions.

Start by adding a 169x169px rectangle to the smallest Artboard (you can press R to activate the Rectangle tool). Make sure the rectangle covers the entirety of the Artboard. Now, uncheck Borders under the Style section of the Inspector and change the Fill to the same navy blue color as your starry night background (we went with #161239).

Next, click on the + button next to Fills and add a linear gradient. Make the first gradient point navy blue and then lower the transparency to zero. Slide the gradient point almost all the way to the second point, and give the latter a lighter blue color. This will be the spot where we’ll place buttons later on.

Last but not least, click the + button under the Appearance section of the Inspector and name your new Layer Style “Template”. Create rectangles for the remaining Artboards. Then, select the Layer Style from the dropdown menu under Appearance to apply it to each of the new rectangles.

Using Symbols to create adaptable backgrounds

Now that we have a template, we can start building our widget from there. First, let’s go back to the starry night background we created last time and turn it into a Symbol. This way, you’ll be able to repurpose the same background for our different widget sizes. Simply select the Artboard and click on the Symbol icon in the toolbar.

For this exercise, we’ll keep our symbols organized neatly on a separate Symbols page, so make sure that you mark the “Send Symbol to Symbols Page” checkbox before clicking Create.

Next, control-click on any of the template rectangles we just created and select Mask. A mask is a layer that will clip any contents you insert to fit its shape, so you won’t have to worry about cropping the background. Go to the Corners section of the Inspector, select Smooth from the drop-down menu, and set it to 22. You’ll see that your rectangle now has rounded corners.

Head to the toolbar and click on the + button and insert the starry night background by selecting Symbols > This Document > Background. If necessary, reposition the background so that you can see the bright star you created last time.

Now, just repeat the same process for the other two Artboards.

How to create reusable text layers

For a widget to be useful to our users, we’ll need to add some information to it. To do so, let’s create a Symbol that can hold all of the text boxes we’ll be repurposing later.

Start by creating three text boxes with the following copy and stacking them up vertically — preferably at an equal distance from each other:

• Type
• Status
• Description

Don’t worry about the font or Text Style right now — we’ll get to that in a second. Next, select all three text boxes and click on the Create a Symbol button in the toolbar — you can name the Symbol “Details”. You’ll find your newly created “Details” Symbol within the Symbols page, which is where we’re heading next.

On the Symbols page, we’ll need to give the “Details” Symbol a background. Select the Symbol, mark the “Add background color” checkbox under the Symbol Source section of the Inspector and give it the same navy blue color as the starry night backdrop. This will help us visualize the text properly but the background won’t carry over when we add it to our widget later on.

Next, you’ll want to differentiate each of these text boxes by increasing or decreasing the font size. You can also slightly lower the opacity of some text layers to create different shades of white — though be mindful of readability. The only rule here is to make sure “Status” stands out from the rest as it will hold your widget’s primary information.

Bringing it all together with nested Symbols

It’s time to work some Sketch magic. We now have a background Symbol and a text layer Symbol. These will be our main building blocks to create our widget. While we’re going to focus on combining these elements, keep in mind that you can create Symbols from any other components you might want to reuse throughout your designs — such as icons or buttons.

Remember the three Artboards we created at the beginning? Let’s turn each of them into a Symbol. Then, insert your “Details” Symbol into each of them. Maybe you’re already wondering — don’t we have a Symbol inside of a Symbol now? And we do! Our background and text Symbols are now “nested” inside of each widget.

Nested Symbols give us greater flexibility when editing our Symbols. We can establish sizing parameters and make specific adjustments without affecting other widget Symbols.

In our next and final post, we’ll be taking a look at how to edit each component within our widget. So be sure to keep an eye out for that next week. 👀