What’s new in SF Symbols 5

♪ ♪ Thalia: Hi, my name is Thalia, and I'm a designer on the Apple Design Team. In a moment, we'll dive into the new features and updates, but first, if you haven't already, make sure to watch the video from last year's WWDC. It's a good resource that will help get you up to speed and ready for what's in store this year. Today, we are super excited to tell you about Animation, an amazing new feature we introduced this year. We'll examine some techniques when drawing for animation. And last but not least, we'll walk you through all the latest additions in new symbols. Let's get started with Animation. Since its introduction, SF Symbols has transformed the way developers and designers create harmonious and consistent user interfaces across all Apple platforms. This evolution has been marked by a series of significant updates. Initially, SF Symbols featured Monochrome symbols. These provided consistency and created a sense of familiarity.

In 2021, SF Symbols became highly versatile by offering additional rendering modes: Hierarchical, Palette, and Multicolor.

And last year, in 2022, Variable Color was introduced, allowing symbols to convey different strength levels or communicate a sequence over time. SF Symbols has always aimed to make symbols more expressive, motivated by the need to create user interfaces that are functional, visually appealing, and engaging. That's why we are delighted to present to you Animation, a new way of adding vitality, movement, and dynamism to your interfaces.

You can choose from a collection of different configurable animation presets, each with its own unique characteristics. These work on all symbols, in all scales, and all rendering modes, making symbols more customizable than ever before. Before we take a look at the different presets in the library, there are a few concepts you should be aware of. First, there is the notion of the relationship between symbol layers and animation.

As a quick reminder, each symbol in the library has a unified layer structure that defines it. Ensuring that its layers are arranged in the correct order is important, because it helps determine how color is applied to them. So as you can imagine, layers also play an essential role in how a symbol animates.

By default, a symbol will animate by layer. This means that each layer will animate one at a time, making the symbol's choreography have clear and precise movements. On the other hand, you can choose to animate the whole symbol if you find that there are scenarios in which you prefer all layers to move at once. Next, there is the concept of space in animation. This space refers to the dimensionality the symbols use to create a sense of depth when movement is applied to them. These planes are not visible, but they help us understand how symbols move and interact, making animations feel more engaging. So let's visualize these planes like this: the middle plane is the plane that sits in the center of the three-dimensional space. This plane is a reference point for positioning and moving symbols. The front plane is the plane that is closest to the viewer. Symbols positioned in this plane will appear larger. And the back plane is farthest from the viewer. This plane defines the extent of the dimensions in which the symbol interacts. Symbols in this plane will appear smaller.

Symbols use these planes based on directionality. Depending on the type of animation, a symbol can move through the planes in various ways, such as up and down, or down and up, or it may even go entirely out of the viewer's sight.

With these ideas in mind, let's now look at the new animation library. This library consists of unique presets, each of which are configurable. There is Appear, Disappear, Bounce, Scale, Pulse, Variable Color, and Replace. Let's learn more about them.

Let's start with Appear and Disappear. The Appear animation is used when a symbol is introduced in the interface. It is a visual effect when an element gradually emerges into view, unveiling a symbol and capturing attention. On the other hand, Disappear is the opposite of Appear and it is used when a symbol is removed from the interface. This helps provide visual feedback, like when a person needs to be notified about an element that has been deleted or removed. Next is Bounce. This type of animation is characterized by a fast, elastic-like movement that simulates an object bouncing, and it can be applied in many different ways. It can help provide feedback by letting a person know that their interaction with the symbol was successful or by letting them know that an action has taken place. It can help reinforce the concept that a symbol is trying to convey, making it appear more playful. Or it can create a sense of energy, making a symbol feel more interactive and engaging. Let's look at this example. This slider represents a continuous range of brightness levels, from the minimum level on the left to the maximum level on the right. The symbol sun.min and sun.max on either side of the slider helps to visually convey its function. So when the slider is dragged all the way to the right end, the bounce animation takes place. This is a great way of offering visual feedback, informing that the screen has reached its maximum brightness level.

Next is Scale. The Scale animation provides visual feedback by changing the size of a symbol, either by increasing its size, or scaling up, or by decreasing its size, or scaling down. This effect can confirm that an action has taken place or it can draw attention to a symbol by highlighting its importance. For example, a symbol will increase its size for a brief moment before returning to its original size, giving some visual feedback that the interaction with the symbol has been acknowledged. On the other hand, if the symbol scales down and then returns to its original size, it gives the impression of it being pressed. This mimics the behavior of a physical button and helps us understand when an action has been recognized. This is great if you want to make your interfaces have a more tactile feel in response to a person's actions. Let's look at this example of the use of the Scale animation. When a person hovers over the folder, the Scale animation takes place, increasing the size of the symbol. This action persists in its scaled up state, helping provide focus to the symbol. When moving on to the next symbol, we will see the same animation taking place, now shifting the focus away from the folder and into the list.

You might wonder when it's best to choose between Bounce and Scale. Bounce communicates that an action has occurred or that an action needs to take place. Scale, on the other hand, can provide focus or feedback when an item is selected. In addition to that, this effect is also stateful, meaning the scaled state persists until the effect is removed.

Now, let's learn about Pulse, which is the animation effect that conveys ongoing activity by changing its opacity.

Depending on the symbol's design, Pulse can really take advantage of the use of a layer in a symbol, reinforcing the idea that it is trying to convey. Let's review this example together. This symbol represents a person sharing their screen. To subtly communicate ongoing activity during a session, we could choose to pulse the whole symbol. Or, to take full advantage of this feature, we could choose to pulse only the shape that represents the screen, providing clearer and more precise information while the action is taking place. Here is the example in context. You can see how we can reinforce the idea of screen-sharing by having the symbol pulse, helping us communicate ongoing activity while it plays continuously until a condition is met. In this case, when the FaceTime call ends. Next, let's take a look at Variable Color. As we saw earlier, Variable Color conveys varying levels of strength and relies on color to communicate a state of a symbol changing over time. This year, Variable Color is also part of the animation library with two different ways of representing the feature.

One is Cumulative, and the other is Iterative. Cumulative highlights the layers one after the other while keeping its previous state. This animation is a great way of representing the Wi-Fi symbol enabling a wireless connection. Iterative, on the other hand, highlights the layers in a sequence, but one at a time, which is an effective way of representing the Wi-Fi symbol searching for available networks. Take a look at this example in the menu bar. The Iterative effect is applied to the Wi-Fi symbol, and in addition to that, we have a reversing option, which is another type of configuration that we can select when choosing Variable Color, making the highlighted layers reverse to its original point, immediately starting the sequence once again, until the action is interrupted.

And finally, there is Replace. Replace is a type of animation where one symbol is swapped with another, and it is used to communicate changes in the state of a symbol, indicating a shift in functionality. You will be able to decide which symbol will be replaced and which symbol will it be replaced by. As with all the other presets, Replace can animate a symbol by layer, which is the default, or with the whole symbol. In addition to that, there is the notion of directionality.

There is Down/Up. Now let's slow down the animation a bit so we can analyze it. A symbol moves downward, disappearing from view, followed by a new symbol appearing with an upward motion. This creates a smooth transition between the two symbols, with one being replaced by the other in a dynamic manner, usually following a person's input. Another example of the use of directionality is Up/Up. Let's reduce the speed. The symbol moves upward, disappearing from view, followed by a new symbol that appears in a steady upward motion. This creates a sense of a forward progression, allowing us to represent events unfolding in a seamless manner. Here is another example: upon initiating an action by interacting with the play symbol, it immediately transitions to the pause symbol, signifying that pausing is the next available action.

Let's take a closer look at the three main symbols in this interface. These are the symbols for the undo arrow, the redo arrow, and the document with a clipboard representing the Paste action. Pay attention to these symbols. When we select the word "Hello," some of the symbols are immediately replaced by others. Now we have the scissors representing Cut and the documents representing Copy.

This helps us understand what are the next available actions that we can take once the word is selected. All these new presets can serve as a communication tool between a person and the interface and have a crucial role in enhancing the user experience, but it's important to work on achieving the right balance between attention-grabbing animations and a functional interface, so that the experience doesn't result in something overwhelming. So always aim to prioritize functionality and keep your intended goal in mind. With the introduction of animation, there are some aspects of drawing that you need to be familiar with when designing your own symbols. Last year, we introduced a new innovative way of drawing symbols with whole shapes. This means that symbols have additional layer information, making designing and drawing custom symbols faster and easier than before. Let's dive into an example together. I'm working on an app that will encourage kids to develop their artistic skills. This candy bear will help kids learn about color, so every time a task is achieved, I would like the symbol to animate with the Bounce effect. This will be a great way of promoting continuous learning while engaging with the kid. Let's review the steps I took to design this symbol.

Symbols are essentially vector drawings. So to create this, we will define the design of the symbol by drawing a path as a completely enclosed shape, drawing the bear's body, face, and ears.

Next, we will draw its paws and some offset paths, which we will use as erase layers. We need to visualize how we want the symbol to move, so in this case, both the paws and the erase layers will be in the foreground as separate layers. That way, we can add some depth to the animation, making the symbol more dynamic. And our design is ready. Next, we'll bring it to the SF Symbols app. Here, we will annotate the layers with either Draw or Erase. With Draw, selected layers draw paths, while Erase removes paths in the chosen layer, affecting how the symbol is rendered. Annotating the symbols in this way will allow us to have the desired results.

Next, let's pick a fun color for the Multicolor annotation. It will give it a playful touch. By the way, if you're interested in learning more about the SF Symbols app and how to create your own animated symbols, I highly recommend checking out Paul's talk, "Create animated symbols." He's got some great insights to share. Back to our symbol. Take a look at it in action, with a variety of different animation presets. I've slowed down the speed a bit so we can see the details. By showing the symbol's additional path information, we can make sure the transitions are nice and smooth when it is in motion. This helps us see parts of the shapes that were previously partially hidden. You can still animate symbols without using erase layers, but as you will see, there's a big difference. When you draw a symbol with erase layers, it improves the symbol's choreography, giving it precise and accurate movements. On the other hand, symbols without erase layers might work well in a static state, but they lose depth and liveliness when in motion. That's because the shapes don't flow smoothly together. They lack continuity and cohesion, creating an underwhelming visual experience. What is really powerful about this method of drawing with erase layers is that it is not only faster, as you have to deal with less complicated steps in the process of drawing and interpolation, but also, it's the most effective way of unlocking the full potential of animation. And if you plan to use animation in your custom symbols, make sure to review them. You may need to adjust the paths, as these may not perform as desired when a symbol is in motion. Next, let's see some of the new additions to the SF Symbols library. We have expanded the Automotive category with symbols like steering wheels, car seats, and seated figures. And we have new symbols in the Gaming category, with arcade consoles, arcade sticks, and different types of buttons. There are new symbols representing the different types of EV plugs.

We also designed new Weather symbols, like moonrise, moonset, and rainbow. And we have many new objects to choose from. There are over 700 new symbols, making SF Symbols a library of more than 5,000 unique symbols. If you want to learn all about the new additions and the fantastic animation presets, you can find the new beta version of the SF Symbols app in developer.apple.com/sf-symbols. With SF Symbols 5, symbols reach new dimensions of expressiveness.

Thank you for joining today. I hope you enjoyed learning about what's new in SF Symbols.