Designing Widgets

Creating a Widget

You need to understand the core features of your App, pick the most valuables specialties and transform them into Widgets. A Widget can work with iPhone, iPad, and Mac, so you need to choose the right context and the platform to develop your Widgets.

Designing a Widget

A Widget must be glanceable, relevant and personalized. This means that it has to be concise and have a main purpose for the user. It needs to summarize a core feature of the App and the design has to be clear. Widgets can support different sizes, make sure to choose the ones that make more sense for your app and your users.

Glanceable

You need to show the most valuable information that will interest your users. Make sure that the information you display is easy to understand in the minimum amount of time.

Relevant

The information you will put in your widget has to be valuable for the user, something that will aid the user's day in and day out activities.

Personalized

A Widget is like your custom made personal board. The more freedom you can give the users to choose between the size, information, color of the widget, etc., the better.

Widget Styles

There are three types of styles - fill, cell, and content. Fill style works better when you want to target a particular piece of content. Cell style is when you need to group different content, a good example is the files app Widget. And content style is when you need to show different data types like the stocks, your daily schedule, among others.

Multiple Widgets

You can offer multiple Widgets so that your users have more options in the same size and they can choose the one that fits better according to their needs and layout.

Widget Size

There are three sizes for a Widget - small, medium and large. You don't need to support all the sizes but try to support as many as possible. Remember that content is the focus.

Widget Customization

You can design your Widgets in a way that allows the user to configure it even further. Let's take the weather app as an example. By default, the weather app will show you the forecast of your location but you can edit the Widget to show you a specific location.

WidgetKit API

There's a specific WidgetKit API that helps developers build Widgets across different platforms like iOS, iPadOS and macOS. This framework is for SwiftUI and simplifies the creation of Widgets for developers.

Creating a Widget Extension

Apple made a Widget Extension template that you can access form Xcode. It is the first step to creating your Widget. Something you should remember is that a single Widget can contain multiple types of widgets, giving all kinds of options to your users. To learn more, you can refer to Apple's documentation. We also have a section in our SwiftUI course where we teach how to design widgets.

Further information

There are many exciting guides and videos in Apple's Human Interface Guidelines that explain the Widget's development and design process in detail. Videos like Design Great Widgets and Meet WidgetKit are perfect to start working on Widgets.

Prototyping Widgets in Principle

For this exercise we will use Figma and Principle. Let's start with opening our Figma file. Here, you will notice that we have some examples of widgets.

Now, we are ready to import the assets from Figma to Principle. To do so, go to Principle and click on import in the tab bar. Then, select the Figma tab and click on Import Page. Select Group 1 which includes all the widget cards. Then in the left side bar, select scroll for the vertical dropdown.

Check the box named Clip Sublayers. Then, reduce the area of action so it can be similar to the size of one widget.

Next, let's add some drivers to all our widget images. Select all the assets inside Group 1 and in Drivers, select the Scale option.

It's time to focus on the timeline. In the left side bar, change the value for scale from 1 to 0.9 for all the widgets except for w1. For w1, add a keyframe on Scale with a value of 1 because this is the first widget that will show up.

Move the timeline until the 164th frame. For w1, we will change its scale from 1 to 0.9, at the same time change the scale for w2 from 0.9 to 1. Also, add a keyframe to w3 so it can be ready for the transition. Please repeat the same steps for each one of the widgets sequentially. Each one of the steps will be performed in the following keyframes: 328 - 492 - 658 - 821 - 985 - 1150

Conclusion

Making a widget for your App will enhance the user experience; remember to keep it personal, to create a connection between the user and your App. Also, it needs to be relevant and informational. The widget needs to show just the things that matter to the user. The right information at the right time.