Create animated symbols

♪ ♪ Paul: Hi, there. I'm Paul, and I work on the SF Symbols app. Since their introduction, SF Symbols have been a huge part of what makes Apple platforms look and feel the way they do.

Symbols are consistent; there are thousands of symbols built into Apple's platforms, sharing common visual designs and behaviors. They can make apps and interfaces feel instantly familiar. Symbols are customizable; if there isn't a built-in symbol that suits your needs, you can use the SF Symbols app to create your own symbols with all the same powerful features as system-provided ones.

And of course, symbols are expressive. Symbols can communicate complex concepts in a small amount of screen real estate. They can convey ideas in a way that transcends languages. And they can make your app feel more alive and playful.

And now, with SF Symbols 5, symbols are gaining a whole new dimension of expressiveness with animation. And the SF Symbols app is here to help you explore this new dimension. Today, we'll go over how to use the SF Symbols app to test-drive the new animation effects, how you can create new custom symbols and update your existing custom symbols so they'll work perfectly with all of the new animation features, a new way of creating familiar and recognizable symbols based on your own custom symbols, and finally, how to make sure the symbols you use in your app will look great, even on older platforms. So let's get started by firing up the SF Symbols app and taking a look at some examples.

Our first stop on the tour is a new tab here in the sidebar. This is the animation inspector, and, as you might have guessed, you can use it to preview the new animation effects. Let's switch to the Gallery view to get a better look. And we'll grab one of the built-in speaker symbols to experiment with.

You can select any of the new animation effects from this pop up button. The Bounce animation is a great place to start. If you hit the preview button, you can see that the animation plays in the main Gallery view, as well as in the symbol row below it and the preview area in the sidebar, so you can see it in all the different rendering modes. Around the preview button, you'll see controls for configuring our animation. You can choose options like whether the symbol should bounce upwards or downwards, and whether you want the layers of the symbol to bounce separately or if you want the whole symbol to bounce at once.

When I changed some of these settings, the label under the preview area changed from “Automatic” to "Modified." When you're writing code for an app, every animation type comes with default settings. When you launch the SF Symbols app, those default settings are pre-selected for you, and you'll see the word "Automatic" here. When you switch to something other than the default, you'll see the word "Modified" here to let you know that you've changed the settings. You can click the reset button that appears here to get back to the defaults.

Once you've found a configuration you like, if you want to specify it directly in code, you can click this button to copy the name of the effect we'll need for the Swift or Objective-C APIs. But let's get back to checking out the new animations.

This speaker symbol also supports variable color.

So let's try out the variable color animation.

With the Cumulative option selected, the variable color layers activate gradually, then all fade out together. When we pick Iterative, only one layer activates at a time. And we can turn on the Reversing option to see how this configuration creates a different feeling.

So that's a quick look at the new animation effects. We've been using a system-provided SF Symbol to preview them, but as always, the built-in symbols are only half of the story. If you have custom symbols in your apps, the SF Symbols app can help make sure they're ready to share the animation limelight. Now, I've got some custom symbols from last year when I was working on an app to help me practice solving puzzle cubes with my daughter. This year, I've graduated to speedcubing, so I want to update my app to help me keep track of how long it takes me to solve a cube. Let's grab last year's custom symbols and start getting them ready for animation.

Here's the 3x3 cube symbol we made last year. We annotated it for Hierarchical and Multicolor rendering, and we broke the front face into different layers so we could apply variable color.

Because my symbol has variable color, it supports the variable color animation right out of the box.

I could use this for a loading indicator.

Let's look at some other animations.

Pulse would be great for when my solve timer is paused. But when I hit the Preview button, the whole symbol is pulsing, even though I have the By Layer setting selected. There's a new control in the annotation list here that allows you to specify which layers should pulse when you're using the By Layer setting. If none of the layers in my symbol are marked, the whole symbol will pulse. So let's mark all of the layers that make up the front face to pulse, and preview again. That's the behavior we want. This will look great when my timer is paused.

All of the other animations use motion, so that should be the next thing we check. If you have symbols that were exported from version 4 or earlier of the SF Symbols app, or if they're exported to be compatible with Xcode 14, they won't include motion information, and they will always move as a whole symbol in your apps. But let's see what happens when I'm exporting from this version of the SF Symbols app, version 5, for use in Xcode 15.

I'll go back to the Bounce animation and play it with my puzzle cube symbol.

That's a lot of motion! By default, every layer in a symbol will move independently when By Layer is selected. Now, I'm pretty excited about symbol animations, but this might be too much of a good thing. We can fix this with a new feature in annotation. You can now create groups of layers that can animate all of their sublayers together. I'll select all of the layers that make up the front face and add them to a new layer group.

Inside of a layer group, all of the layers still keep their own annotations and settings, but now they all move together.

Now there's less motion, but it still looks a little strange to have the different pieces of the cube moving separately.

So let's undo and select all of the layers of our symbol and add them all to a single group.

That matches the spirit of this symbol. The different faces of a cube don't really move separately, and they aren't really at different levels of depth in this drawing. By grouping all of these layers together, we've made sure that the cube will always animate as a single unit, even if the code requests by layer. Ultimately, you'll need to look at your custom symbols individually and decide what motion groups are right for each one.

Now, I mentioned earlier that one of the strengths of symbols is a sense of consistency and familiarity. This is an important concept to remember as you're working with your custom symbols. Here's another custom symbol I was working on last year. It's my puzzle cube, but it's been placed on top of a filled circle. This circular enclosure is a common design element in SF Symbols. There are lots of symbols in the built-in library that use a similar circular treatment, like this video symbol. And there are many other examples of this kind of reusable design pattern throughout the SF Symbols repertoire, like circular borders, or modifiers like slashes, or badges. The consistency of these treatments is one of the key things that makes SF Symbols instantly recognizable and familiar. Custom symbols should try to match these treatments to get all the benefits of that familiarity, too. So how can I make sure my custom symbols are consistent with the system? Well, I could look through the library of system symbols to find an example of a similar symbol and base a new drawing off of it. And I could look at how the symbol is annotated in each of the different rendering modes, and how it moves when animated by layer, and how it pulses, and how its variable color settings might change in this enclosure.

And then I could do the same thing for other common design patterns like other enclosures, or slashes, or badges. But that's a lot to remember. And I would rather use that mental space for remembering the fastest way to solve the top layer of my puzzle cubes. One of our goals with SF Symbols has always been to help make it as easy as possible for custom symbols to fit right in alongside system-provided symbols to provide that consistent, familiar experience. So this year we're super excited to introduce Symbol components. A symbol component provides artwork and behavior that looks and feels like a system-provided SF Symbol. Take one of your custom symbols, combine it with a symbol component, and you'll get a new symbol that, out-of-the-box, looks and feels like its built-in friends. Let's combine a few components with my trusty puzzle cube symbol to see how they work. I'll start by bringing up the context menu for my custom symbol and choosing Combine Symbol with Component. In the sheet that shows up, I can look through the library of components and choose which ones I want to use. There are enclosures, badges, and a slash component. We'll start with slash, badge.plus, circle, and circle.fill.

And that's it. You can see these new symbols have appeared in my custom symbols library, and they already look great. The plus badge is colored correctly for multicolor. The slash already animates separately from the puzzle cube behind it.

And the .circle.fill version is already set up to use a primary layer in hierarchical mode, but to erase through the circle behind it in monochrome. And it even preserved my variable color settings.

Depending on the appearance and design of your base symbol, you may want to make some additional adjustments, which you can do here in the sidebar where the annotation controls normally are.

For example, you might want to nudge the position of a badge a bit to avoid visual artifacts, or even move it to the other side of the symbol.

Or you may want to change the length of the slash to make sure enough of your symbol is covered.

Now, you'll also want to make sure your new symbol looks great in all of the different scales and weights that symbols support. With three scales and nine weights, that's a total of 27 different variations. But the good news is that symbol components are powered by variable templates, which take care of most of the work for you.

Variable templates were introduced in SF Symbols 3; you only need to provide three drawings in the Small scale: one each for the Ultralight, Regular, and Black weights. Then, as long at the bezier paths you used in each drawing are compatible, the system can mix your drawings together to create the remaining 24 possible variants. And if you ask me, getting 27 symbols for the price of 3 is a pretty great deal. Symbol components work the same way: you have control over the Small + Ultralight, Small + Regular, and Small + Black variations. There's a set of previews here at the top of the Gallery view so you can see your symbol in the three different weights and switch between them quickly. In many cases, you'll only need to make adjustments to the Regular weight, like I did when I made this slash longer, and the changes will be carried over to Ultralight and Black. But if you run into issues like overlaps in enclosures, or your symbol's shape needs different alignment, you can click the Override checkbox in the Ultralight or Black weights and make additional adjustments. I'll turn the scale my enclosed cube down a bit to give it some more breathing room. The system will take these new adjustments into account when automatically creating in-between weights like Semibold. And in fact, the system is doing even more work behind the scenes for enclosures like this. As the base symbol is scaled down to fit in the enclosure, the system is using the base symbol's variable template to apply weight compensation, increasing the weight and thickness of the symbol as its size decreases; this helps to keep it looking consistent with both its larger, non-enclosed version and with the circle surrounding it. And like many other parts of symbol components, you can do additional fine-tuning to the enclosed symbol's weight to get the final visual result you want. And that's how powerful symbol components are. They're a fast and easy way to create new symbols based on your existing custom symbols, with behaviors and artwork that match the system-provided SF Symbols repertoire. Remember that symbol components need to work with custom symbols made from variable templates, so that they can apply weight compensation if needed. This also means that any overrides of individual variants you might have in your variable template will be ignored when combined with a component. And finally, note that you won't be able to export an editable template from a symbol that was created using components. Symbol components are designed to take care of the drawing for you once you've made your adjustments, so you shouldn't need to manually edit them.

There are more than 40 components included in the SF Symbols app this year.

Before we wrap up, there's one more important area to consider. As you adopt new features, it's also important to remember that many people using your apps are on older platforms, and they deserve an amazing in-app experience too. We've redesigned the experience within the SF Symbols app to help you make sure that your symbols will look and behave how you want them to on all the platforms that your app supports; even older ones. When you export an editable template to modify a symbol's shape and structure, you'll now see a wireframe view, instead of the filled shapes that were previously shown in templates. Symbols that are optimized for motion often include shapes that are used to erase portions of other shapes during rendering, like this extra border around the exclamation mark badge. We found that it's better to focus on the shapes that make up your symbol during the drawing phase, and to wait until you're annotating your symbol in the app to mark which shapes draw color and which ones erase. This wireframe style in the template helps you do just that.

There's also a new Compatibility picker when you export a template. By default, you'll get the latest and greatest symbols, many of which have been redrawn for motion. But if you're targeting older platforms, the SF Symbols app will give you a template that better suits that platform. For example, if you're targeting SF Symbols 3, which corresponds to iOS 15 and macOS Monterey, you'll get a simpler drawing that isn't optimized for motion, because the layer structures we use for motion weren't fully supported in SF Symbols 3. And if you're targeting SF Symbols 2, which corresponds to iOS 14 and macOS Big Sur, you'll automatically get a static template, because variable templates were introduced in SF Symbols 3. The same concepts apply when you're annotating your custom symbols. By default, you'll have access to all the annotation features the app has to offer. But you can set a symbol to target a specific platform, and the app will help make sure your symbol is ready. For example, if I choose SF Symbols 3 or earlier, I'm no longer able to edit the monochrome annotation of my symbol, because monochrome annotations weren't customizable until SF Symbols 4. And finally, when your symbol is ready to be exported for Xcode, all you need to do is tell the app what version of Xcode you'll be using. The app will choose the best file format to export, and help make sure that the file will work properly when compiled into an app that targets older platforms. So that's how easy and fast it is to create a symbol that's ready for animation with the SF Symbols app. With the animation inspector, new annotation features, symbol components, and compatibility checks, you're just a few clicks away. It's actually a lot like my experience learning speedcubing. There's a lot of angles to consider, many different moving parts, and it seems like a ton of information to manage, but with the right tools, you'd be amazed at just how quickly... it all just comes together. Thanks for watching. ♪ ♪