WWDC 22 Digital Design Lounge — SF Symbols

Adopt Variable Color in SF Symbols - WWDC22 - Videos - Apple Developer
Explore how you can use Variable Color to make SF Symbols even more expressive. We’ll show you how system-provided symbols use variable...
What’s new in SF Symbols 4 - WWDC22 - Videos - Apple Developer
Explore the latest updates to SF Symbols, Apple’s extensive library of iconography designed to integrate seamlessly with San Francisco,...

Process

How did you come up with the idea for dimming color opacity for certain layers and not others? did you manually go over each symbol and set up how each layer should behave based on the percentage?

Yes, we went through each symbol and specified which parts should dim, and in what order. In fact, we internally use the same unified annotation interface that we've added to the SF Symbols app this year!

I’d love to hear more about what it was like working on this massive update to SF Symbols. How do you go about figuring out which symbols to choose? Is there a lot of collaboration across teams within Apple for such projects? Also: amazing work!

I think I can answer the second part of the question only 😉 but yes, there is definitely a lot of collaboration between teams to define what are the best symbols and design that fit best in the UIs. We want to make the symbols as good as possible, so there is a lot of iterations too!


There's also an incredible amount of work that comes in from the frameworks and platform engineering sides to support all these new features like Variable Color and different rendering modes!


For adding new symbols: it’s a combination of supporting new platform features, adopting symbols for existing features and identifying concepts that have broad utility and application across a variety of apps and contexts.

What are some similarities between solving Rubik's Cubes and working on the SF Symbols app?

Lots of colors, lots of moving pieces, but in the end it all comes together to make something completely unified!

How would you convince a product team to adopt SF Symbols that already has a wide array of their own custom icons?

But do their symbols have variable color support?! A big advantage is that there are so many symbols to choose from so extending the library is easy. And also the way symbols are designed to work with text (font weight matching, small and large variants). Right to left support.


As I said in the talk last year, the kind of design that requires no additional work from me is the best kind of design! 😝

But really, the team has been working on SF Symbols as a way to help people make apps that look fantastic and blend seamlessly with the rest of Apple platforms. Even more importantly, SF Symbols are also designed with accessibility and inclusivity in mind. They react to things like Dynamic Type and Increased Contrast automatically, which is a big win for users of your app.


Symbols offer many benefits: visual craft and integration with the system font, accessibility features including localized variants for many languages and scripts. Familiarity with users across the platforms. Smaller app footprint.

Workflow

What design program do you prefer for creating the symbol paths...Sketch, Illustrator or something else?

For custom symbols, I prefer using Illustrator. But Sketch works well too. Illustrator’s blending tools are helpful.


For variable templates that will use interpolation, I personally like to nudge points around in a font editor before going back to Illustrator, this way I get more info on the number of points and the point order.


Illustrator and Glyphs 3.

Variable Fonts

When would we be able to see variable fonts come to the SF Font Family? It would be awesome to have this along with SF Symbols.

The SF Pro and SF Compact fonts that are installed with the SF Symbols app are variable!

The new SF Symbol variable colors for values from zero-to-one (like volume and signal strength symbols)... are those implemented as a variable font axis?

Variable color is not available in the fonts, unfortunately. For showing different rendering modes and variable color in design comps, we recommend using the Edit > Copy Image.

Colours

Is it possible to assign colors dynamically to SF Symbols rendering in multicolor mode?

Multicolor rendering mode uses the colors assigned to the symbol by the designer. Use palette mode to use a dynamic set of colors.


There are some parts of symbols in multicolor that are still controlled by colors you specify, however. For example, folder.fill.badge.plus in multicolor will keep the badge's colors locked to green and white, but you still have control over the color of the folder.

Is it possible to dynamically assign multiple colors to the symbol rendering in palette mode?

Yes. SwiftUI allows multiple foreground styles, and AppKit & UIKit allow an array of colors for palette mode. The API for AppKit/UIKit is configurationWithPaletteColors: which takes an array of colors. And in SwiftUI what you want is the .foregroundStyle modifier:
https://developer.apple.com/documentation/swiftui/view/foregroundstyle(_:).

Do variable colors animate automatically when changed?

There isn't any animation when the variable color percentage changes and causes a layer to "dim" or "un-dim." The change appears instantly.


The path color will instantly change according to the corresponding percentage value.


Using variable colors does not automatically animate across the visual states. However it is entirely possible to add animation to Symbol just as you would to other UI Images using the UI framework animation facilities of your choice.

How do these new rendering modes interact with WidgetKit rendering using the new lock screen widget layouts like .accessoryCircular etc?

For consistency, we suggest using monochrome, hierarchical, or automatic, but WidgetKit may not actually end up enforcing that in the betas. We also welcome your feedback on WidgetKit and SF Symbols in general as you get a chance to use them together. We learn from you, too!

Custom Symbols

After creating a new custom symbol, how do we add it to our app? Is it like any other SF Symbol?

After you've made and annotated your symbol in the app, choose File > Export Symbol... and bring the resulting SVG into an Xcode asset catalog. Then, you can access it like other embedded images.

Is there a way to transfer your own custom symbols with all the settings between different Mac's or pass it to other co-designers?

The file created when you choose File > Export Symbol... can be shared with other people. It can be imported back in to the SF Symbols app and should preserve all of the annotations, too!

When creating new symbols, what criteria is followed? I’ve wanted to make custom symbols before but want it to match with the rest of the rest of the SF Symbol catalog.

I would start with looking at the symbols in the context of other symbols. For example, if you are drawing a symbol about astronomy, you would want to looks at symbols that are lated like the moon, stars, etc.

From there, I would start by defining the proportions, not too wide, not too tall, all related to the other symbols.

And next I'll try to match the stroke thickness, roundness of the shapes, angles. It all depends on what you are trying to draw.

Let's say you need a telescope. Then I'll probably try to match some of the angles of other symbols.

It's about looking at the context and iterating to get the best results. It's also good to look at the symbol in small and big sizes, to craft the best drawing possible for all scenarios.

Matching the line weight within SF Symbols is a good metric to follow. Also, referencing the scale and alignment of SF Symbols for shapes that are similar to what you are trying to make is a good place to start. For example, if your custom symbol is circular, scale it similar to a circle in SF Symbols.

Is there any limit of layers a symbol can have?

There's not a hard-set limit in the app.


There isn’t a limit for practical purposes in the template either.

So it’s basically an SVG that’s on steroids :D Or is it a different file format?

Yep, File > Export Symbol will give you an SVG. If you plan on sharing it with other designers it’s best to export the latest version (4.0) so that new features like monochrome layers + variable color are included.


We don't recommend editing the SVGs that come out of the File > Export Symbol...  option, however, they're just intended for data delivery. The recommended workflow is to use File > Export Template... if you want to edit the shape of the symbol, bring that template back into the SF Symbols app, do your annotation within the app, and then use File > Export Symbol... for delivery.

Any tips for creating SVG files that will work well with this? E.g. should we avoid internal groups, etc...

There are some great tips in the Human Interface Guidlines: https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/. Check out the section titled “Creating Custom Symbols”.

Recommendations

I’ve never used a font editor, do you have a recommendation? Getting points correct for interpolation an issue I ran into with Sketch.

I’ve used Glyphs3 (Glyphs App) same as Lance mentioned, but other popular font editors include RoboFont and FontLab. All have fairly good documentation (and forums) so you should be able to get up and running quickly.

Are there any books you'd recommend reading regarding topics like typography, color theory, grid designs, and anything else regarding mobile UI design?

Grid systems in Graphic Design - Josef Müller Brockmann

The Elements of Typographic Style — Robert Bringhurst

ATF 1923 Specimen Book and Catalog

Interaction of Color — Josef Albers

Compatibility

Can we use SF or SF Symbols in other, non-Apple related projects or are we limited to Apple platforms?

Only for software running on Apple Platforms.


SF Symbols as you have seen are very dynamic. This functionality is implemented by Apple’s OSs. So besides the restriction, it isn’t practical.

Is there anyway to use new symbols from iOS 16 in iOS 15 and below?

It's possible to export a new symbol using File > Export Symbol... and bring that into your app to support lower deployment targets. Remember to adjust the symbol version accordingly, though! 3.0 for last year's releases and 2.0 for the year before that.


Note that you can still use the latest template format (4.0) with custom symbols even when deploying to earlier deployment targets as long as you are using Xcode 14 to compile your app.  Naturally, the new content features won't be present on those earlier releases, so you need to be careful about which template content features you use.  Safest of course is to just export with the older template versions as Paul recommends.

Future

What are the next challenges you're working on tackling for SF Symbols?

Unfortunately we can’t answer that question but we are always open to requests via feedback assistant!

I think it was last year the .square and .circle modifier were added for some symbols. Is there a chance that will become and option for all symbols including custom symbols? 😬 I ended up creating square variants for a lot of our custom symbols last year and it was super tedious.

We have this policy where we don’t talk about future products 🙂

It would be awesome to see collections expanded to an in app feature to allow users to pick from a set (like in the Reminders app).

We don't offer that feature, but thanks for feedback!

Are there ways we can submit icons for consideration as additions to future updates of SF Symbols and/or is there a place we can share our custom icons with the wider developer community?

Absolutely. Use Feedback Assistant. Requests get routed right to the team for consideration. It’s been a very helpful way to learn about what symbols developers most want.

Will there ever be a Clarus the DogCow SF Symbol? :D

Moof? Moof. MOOF! Moof, definitely. Moof! Moof!!! Moof!!! See if you can spot Clarus: https://www.wallpaper.com/design/apple-park-behind-the-scenes-design-team-interview.

Show Comments