Skip Navigation
Illustration done in Sketch showing creation of a widget

How to create responsive iOS widgets with reusable elements

Learn how to create adaptable backgrounds and reusable text layers for your widgets in Sketch.

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

Pro tip: Name the Artboards after their sizes so it’s easy to identify them later.

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).

You can always add more colors or gradients by clicking the + button under Fills.

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.

Feel free to play around with the shade of blue and the gradient’s dimensions.

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.

Our widget is coming to life thanks to the rounded corners and the starry background. That being said, you might need to readjust the size of the background depending on the Artboard.

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.

Screenshot of details Symbol with a three stacked text boxes

Don’t worry too much about spacing and text sizes. You can always adjust them later to better fit your different widget sizes.

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.

Screenshot of details Symbol with a navy blue background

Text Styles work in the same way as Layer Styles, which we created earlier.

Pro tip: If you want to save these Text Styles for later, click on the Create button under the Appearance section of the Inspector. You’ll be able to give your Text Style a name before saving. Check out our documentation to learn more about using Text Styles.

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.

Of course, we’re not quite done here yet! Next time, we’ll teach you how to edit the Details Symbol so it looks great no matter the widget size.

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. 👀