SF Symbols 7 的新功能

Hi, I’m Kelsey, a member of the Apple Design team. And today I’m excited to share all the new updates coming to SF Symbols. If you haven’t already, make sure to watch last year’s WWDC session, “What’s New in SFSymbols 6” As it’s a great resource for getting up to speed and ready for what’s next. Before jumping in, let's quickly review how symbols are designed and constructed, which is a crucial piece to understanding some of this year's new features.

Each symbol is meticulously designed and crafted to convey an idea or feeling that is instantly recognizable. These ideas are then translated into a design, beginning with a single vector point and creating a continuous path that starts to take shape. With each vector point and curve, the line is guided with intention, defining the character and contour of the form.

Every curve and angle must feel deliberate, balanced, and visually communicative.

Let's focus in on the arrow. A symbol is not just a path with a visible outline, as this does not allow for the subtle details that make symbols great.

Instead, it's constructed from carefully outlined shapes, allowing for precise control over proportions, negative space, and visual weight. This ensures clarity, consistency, and a more refined, intentional appearance.

Some shapes are created with two different paths, oriented in opposite directions, that enable each individual path to refine its appearance, and is an important piece to defining the way these paths can animate. Let’s jump into what’s new this year to learn how these details are crafted into our latest experiences. We’ll start off by introducing Draw, which includes brand new animation and rendering presets. Followed by our updates to Magic Replace, which we have made even more capable this year.

We’ll introduce gradients and learn how they were applied across symbols and rendering modes before diving deep into annotating your own custom symbols.

And lastly, we’ll wrap up with the updates to our APIs. We’ve got a lot to cover, so let’s get started. This year, we are excited to bring Draw to SF Symbols A new set of features inspired by handwriting that enables symbols to expressively draw along their defined path.

With Draw, we’ve introduced two new animation presets. Draw On, which animates the symbol on screen, and Draw Off, which animates the symbol off screen. These presets take advantage of the symbol’s layer structure and can be integrated into your experiences to help emphasize relevant moments through animation. Draw On and Draw Off support the existing playback options, like By Layer, the default option, where each path draws with a staggered starting offset. If you’re looking for a quicker more immediate effect, you can animate with Whole Symbol, which draws all layers together, where each draw path starts and ends at the same time. Or you can leverage our brand new playback option for draw presets, Individually, that draws each layer one by one, waiting for the previous layer to finish before starting the next one. Leverage this option if you are looking to be more intentional, drawing attention to individual movements. We’ve designed Draw to be flexible, allowing each symbol to define how it is drawn. For example, wind draws left to right to convey motion, whereas this Arabic character draws from right to left, matching its writing direction. Additionally, some symbols can draw from their center, like this symmetrical symbol. Understanding the available draw directions will be helpful when annotating your own custom symbols, which we’ll touch on a bit later in the session. Some symbols are more complex, like arrows, which are composed of two shapes that behave as one. Draw even supports these composed shapes, allowing the arrowhead to travel with its path. This movement can help reinforce the meaning of a symbol and bring your app to life. Now that we’ve introduced Draw, let’s jump over into the SF Symbols app and preview these new animations.

Both Draw On and Draw Off have been added to the animation list in the inspector. I’ll start by choosing Draw On, which will reveal the three available playback options we discussed earlier. And just like existing animation presets, I can preview them right here in the app.

Draw off is similar with one addition, the reverse switch. This indicates if the path should draw off following its draw direction, continuing the existing motion, or reverse drawing backwards from its end. Draw is a great way to bring symbols to life through animation, but it can also be leveraged to convey progress.

If you’re familiar with variable color, you may remember that some symbols support variable rendering as a way of conveying strength or progress through color. For even more resolution, we’ve brought variable draw to our rendering presets. Variable draw leverages the new draw annotations on participating layers.

It renders the path at a specific percentage on top of a reduced opacity version of the layer. This is a great way to visualize progress, like for a download, to reflect the temperature, or even when completing a yoga session.

Let’s jump back into the SF Symbols app and review the updates to the Rendering Inspector, where you can now preview variable draw. We’ve enhanced the existing variable rendering picker to include the new draw option.

I’ll select Draw and now the participating draw layers react to variable rendering, just like variable color.

It’s important to note that symbols can opt in to support both variable color and draw, but only one can be chosen at render time. In these cases, you can use the default option to use the system preferred variable rendering mode. Alongside our brand new Draw animations, we’ve also brought enhancements to Magic Replace to provide greater continuity when animating between related symbols. Magic Replace will now recognize matching enclosures to provide a seamless transition between two states.

If two symbols share the same enclosure, the system will preserve them, while simultaneously replacing the differing layers.

Additionally, we’ve also brought Draw to Magic Replace for supported symbols, leveraging Draw Off for the outgoing symbol and Draw On for the incoming symbol. Combined with enclosure matching, the system will mix and match these new features on the participating symbols to provide the most seamless and expressive transition.

These enhancements are previewable via the existing Magic Replace preset in the Animation Inspector. If you are new to the SF Symbols app, that can be found in the animation picker alongside the other presets. Gradients are commonly used to add depth, dimension, and visual interest to a drawing. In this year, we are excited to announce that gradients are coming to SF Symbols.

When applied to a symbol, the gradient helps create a sense of lighting that is not present with flat colors. The new gradient rendering in SF Symbols generates a smooth linear gradient from a single source color, which is available on both system and custom colors. These are available across all rendering modes, and can be applied to your own custom symbols as well.

Gradients render great at all scales and sizes, but really stand out in larger instances. Leverage gradients in places you want to bring attention to the symbols depth and dimension.

Let’s jump back into the SF Symbols app to preview these gradients, which I can turn on using the newly added switch below the rendering mode in the inspector.

When previewing gradients, the color gradient is applied across all rendering modes, using the selected options. Now that we’ve reviewed all of these new features in action on system symbols, let’s dive into annotating your own custom symbols to leverage these new features.

In this section, we’ll show you how we annotated a few of our own system symbols. And if you’d like to follow along, you can always duplicate them as custom symbols, delete the existing guide points, and annotate along with us. In order to understand how draw annotations work, it's important to remember the details about how symbols are drawn. In this heart example, the symbol is constructed via two separate paths.

And scribble.variable is drawn with a variable width. This means we can’t just stroke the paths to build our animations. So how does Draw actually work? Draw animations rely on a set of guide points to be placed along the desired draw path. As the name suggests, these points help guide the path along the defined route.

At a minimum, a path must contain two guide points to properly compute its draw path.

A start point, indicated by an open circle, and an end point, indicated by a closed circle.

As paths get more complex, they may require additional guide points to help fill in the gaps between the start and the end, indicate multiple draw paths, or even help guide an arrowhead along a path.

Additionally, some symbols may require specialized guide points to help the system properly compute its draw path.

For example, multiple subpaths might share a start and an end point, whereas sharp bends in a path need to be marked as corner points. There’s quite a lot here, so let’s jump into the SF Symbols app to explore how to actually annotate these symbols.

Let’s start with line.diagonal as our first example.

I’ve switched to gallery view using the available controls in the app toolbar. And when selecting Draw On or Draw Off in the animation list, the Draw toolbar appears at the top of the canvas.

By selecting the leftmost button, I can enter guide point mode, which will provide a placement preview as I move around the canvas.

Once I’m satisfied with the location, I can place the guide point with a single click, and then I’ll be ready to place my next point.

You’ll notice that the first guide point I placed automatically becomes the start point. As I place my second guide point, the system will determine the endpoint and the draw direction, indicated by an arrow.

Now I'm ready to try the animation.

Great, our line draws upwards along the defined path.

But what if we have a more complex symbol? Scribble has quite a few turns, and in order to help guide the animation around each turn, we need to place a few more guide points along the path. Let's jump into the SF Symbols app to try to replicate this annotation.

I already have a few guide points placed, but I need to fill in the gaps around the tight turns.

It’s important to be precise here to ensure the path can animate smoothly through the more complex shapes. Let's check it out.

Perfect. The animation now handles the turns nicely. So far, we’ve just annotated symbols with a single path. But what if you have a symbol with more than one path to draw? Each path in a symbol can use the same set of rules to define their specific draw path and direction.

If you’re annotating along with me, jump over to line.3.horizontal to try this out.

I can annotate this symbol in a variety of different ways, but I’ll start by annotating each line to draw from left to right, selecting each layer to annotate it.

This is great, but maybe I want the middle line to draw in the opposite direction.

I can drag the existing place guide points along the path to move them.

You’ll notice as I drag the start point across another existing guide point, the direction of the arrow flips, indicating the path now draws the opposite direction. This is great for symbols that want to draw in a single direction, but some symbols have implicit directionality from their center.

For these symbols, we can annotate them to draw bidirectionally. wave.3.up is a great use case for this. I can begin by placing my start point in the center of the path and then place additional guide points on each side of the start point. The system automatically recognizes its bidirectionality and indicates that with arrows on each side of the start point.

In this case, it’s important to make sure all my start points line up across layers to ensure a symmetrical effect. I can turn on snapping to help me achieve this.

As I annotate the next two paths, you’ll notice my guide points snap to both the path vertices as well as the existing guide points on other layers.

I’ll review my animation to make sure all my paths are now drawing outwards from the center.

We’ve annotated a few symbols at this point, so let’s review some of the additional configuration options to customize draw animations to your liking.

By default, paths draw with a rounded end cap, but you may need something a bit different. In this example, you’ll notice the animation is a bit abrupt at the end, because the rounded end cap doesn’t quite match the drawing, but we can fix this up.

By using the context menu on the start points, we can configure adaptive end caps, which will use the end cap style of the path during the animation.

Let's try this again.

Much better. The paths now animate matching their drawn style. It’s important to note that adaptive end caps are only available on symbols that draw in a single direction.

All the symbols we have reviewed so far are constructed from shapes that have been drawn as a single subpath. However, not all symbols are designed this way. Symbols that are constructed via multiple subpaths can also be annotated for Draw, but have slightly different mechanics. Let's annotate this circle.

When I place my first guide point, the system will detect that it is placed across two subpaths and treat it as both the start and the end point, which is indicated by the capsule on the guide point's trailing edge.

By default, the animation draws clockwise.

If I want the circle to draw counterclockwise, I can always toggle the direction via the guide point’s context menu and if needed I can always add additional guide points along the path for more complex shapes. As you may have noticed these types of drawings only support single-direction animation and cannot be annotated to draw bidirectionally.

For symbols with both drawing and non-drawing components, the non-drawing components will appear in by default but for some cases, like arrows you may need to do some additional annotation work to produce the desired result.

Let’s review how to annotate these.

Naturally, the line component of the symbol would animate great drawing clockwise. But it would be even better if the arrowhead itself were attached to the line as it draws. By dragging the arrowhead onto an already placed guide point, I can create an attachment, a non-drawing element associated with a guide point. The attaching guide point indicates where the attachment will appear from, and start following the path. After creating an attachment, you’ll notice a preview of the path attached to its associated guide point. To remove it, simply drag the path off the guide point and drop it anywhere else on the canvas.

It’s important to note that in order to create an attachment, the arrowhead needs to be drawn as a separate path from the base.

To leverage drawing attachments, you may need to review and modify your custom symbols to separate out elements like arrowheads. We’ve annotated a variety of different symbols at this point, using the automatic placement of guide points. But not all symbols are that straightforward, so we’ve included a few advanced options to help you annotate those trickier paths.

When placing guide points, the system helps decide the default placement of each side of the guide point. In some cases, however, the default location might not be the optimal placement for your symbol.

In these cases, you can hold the option key and drag one side of the guide point forward or backwards along the path, without affecting its associated point.

For symbols with lots of overlapping paths, or paths that are directly on top of each other, it can be challenging to place your guide point on the right subpath from the layer level.

For these situations, you can always select the subpath directly in the layer list, to force a specific guide point onto that subpath. When introducing the topic of guide points earlier in the session, we touched on some specific types of guide points; start points and end points. When placing guide points, the system determines the types based on the placement along the path.

Similarly to placement, you might want to override the default type, which you can always do via the context menu on a guide point.

Here you can decide if you want a guide point to be a standard one or take on the role of an end point. And you can always set a guide point back to automatic to let the system do the heavy lifting for you. You may have noticed an additional guide point type in this list that we haven’t touched on yet; corners.

For a path to draw around particularly sharp corners, the system needs to handle these cases in a special way, which can be done by specifying guide points as corner points. All other guide point types work by associating two points, one on each side of the path to draw. What is unique about corner points is they associate two points on the same side of the path and are indicated by a diamond. Depending on the design of your symbol, annotation might require a bit of trial and error. If you ever find yourself needing to start over, just use the reset guide point option in the context menu on each layer. There is no one correct way to place guide points. Try out different placements to find what works best for your symbol. Remember that symbols support nine different weights and three scales. And it’s important to make sure your custom symbol animates properly across all configurations. But don’t worry, you’ll only need to annotate three of these, and the system will handle the rest.

When annotating a custom symbol, it’s important to start by annotating the regular weight. This serves as the base annotation and is the only weight where you can add and remove guide points.

The system will automatically interpolate the place guide points to the other two template weights; ultralight and black.

Note that each guide point in ultralight and black is associated to its originating guide point in the regular weight.

If I move the guide point in the regular weight, it will move the associated guide points in both ultralight and black as well.

Because symbols can interpolate across weights using the templates, it’s crucial to make sure that associated guide points are in the same order across regular, ultralight, and black. Let’s review the current placement of our guide points.

For the most part, they are in pretty good shape. But it seems like there are a few guide points out of place in the black weight. We could easily fix up these guide points, but we need to make sure they are in the correct order. To help with this, we can toggle on guide point numbers, which displays unique numbers next to each guide point to indicate the order the guide point should occur, based on the associated order in the regular weight. You’ll notice that six, seven, and eight are out of order, which I can fix up quickly by dragging them to new locations.

Overwritten guide points are indicated in orange and help ensure that symbols draw correctly across all configurations. And with that, we have completely annotated our symbols for Draw. And with just a few steps, you can become the animator of your own symbols.

Now that they’re annotated, we can decide if we’d like them to opt in to variable draw or not.

After turning on the variable rendering switch in the settings popover, you can activate a layer using the variable draw button in the layer list. And you can always preview it with the variable rendering slider we reviewed earlier in the session. When making this selection, it’s important to review each layer carefully to determine which layers should participate. In the thermometer example, we've only enabled one layer, which allows the meter portion to convey progress without affecting the other draw layers.

And that’s annotating custom symbols for Draw.

Now that we’ve introduced all of the new features coming to SF Symbol 7, let’s review the updates to our APIs to leverage these new features directly in code.

For our new animation presets, you can apply Draw using the symbolEffect modifier, following the existing pattern for symbol animations.

In SwiftUI, when the value of isHidden updates, the symbol will draw off and back on again, applying the animation.

And in AppKit and UIKit, you can specify Draw On and Off respectively to trigger each animation.

And just like other symbol effects, if you’d like to override the By Layer default, you can always set the desired playback mode directly in line.

To leverage variable draw, specify the variable value mode on the relevant sections.

And be sure to set the desired variable value when configuring the symbol.

And lastly, to take advantage of gradient rendering, set the color rendering mode to gradient using the SwiftUI view modifier or via the symbol configuration options for UIKit and AppKit.

With just a few simple additions to your code, you can leverage the full power of SF Symbol 7. And you can always refer back to the Copy Code button directly in the SF Symbols app if needed.

We've covered quite a bit today, so let's review some next steps for taking full advantage of these new features.

If you haven’t already, download the new beta of SF Symbol 7 to browse the updates to our symbol library, preview gradients, and experience the full power of Draw. Review your custom drawings to make sure they are designed to take advantage of all the available annotation options.

And browse our frameworks documentation for additional details about leveraging these new features directly in code.

And that's what's new in SF Symbol 7. We can’t wait to see what you all do with these new features.