WWDC24: What’s new in SF Symbols 6 | Apple

Summary

Apple's SF Symbols session introduces new universal animation presets: Wiggle, Rotate, and Breathe, enhancing app interfaces with expressive animations. Updates to Replace and Variable Color presets are also highlighted, with a focus on customizing animations for better user experience. The SF Symbols app receives updates to support these features, and the library expands with over 800 new symbols, totaling over 6,000 unique icons for developers to utilize in their applications.

Takeaways

• 📚 Thalia introduces SF Symbols, a library of iconography crafted by Apple for familiar and accessible symbols.
• 🌟 SF Symbols is a versatile tool that supports localization and expressive animations for app interfaces.
• 🎨 The session covers new presets and enhancements in SF Symbols, including Animation presets and updates in the SF Symbols app.
• 🔄 Three new universal animation presets are introduced: Wiggle, Rotate, and Breathe, each serving different purposes in app animations.
• 🚀 The Wiggle preset is used to highlight changes or call to actions, with customizable directions based on the symbol's orientation.
• 🔄 Rotate adds dynamic movement to symbols, either by imitating real-world object behavior or as a visual indicator of progress.
• 💨 Breathe animation gives symbols a living quality by smoothly increasing and decreasing their presence, signaling status changes or ongoing activities.
• 🔄 Updates to Replace and Variable Color presets allow for more expressive and contextually relevant animations in app interfaces.
• 🛠️ The SF Symbols app provides tools for annotating custom symbols to optimize animations and ensure they are ready for new features.
• 🌱 A sample app is showcased to demonstrate the implementation of new presets in a real-world application, focusing on plant care.
• 📈 The SF Symbols library has expanded with over 800 new symbols, now totaling over 6,000 unique symbols with various scales, weights, and rendering modes.
• 🔍 The session emphasizes the importance of using animations intentionally and purposefully to enhance user experience without causing distraction.

Q & A

What is the main topic of the session presented by Thalia from the Apple Design Team?

The main topic is an introduction to SF Symbols, Apple's library of iconography, including new presets and enhancements for animations and localization.

What are the new universal animation presets introduced in SF Symbols?

The new universal animation presets are Wiggle, Rotate, and Breathe, along with updates to Replace and Variable Color.

What is the purpose of the Wiggle animation preset?

The Wiggle animation preset is used to highlight changes or call to actions, add dynamic emphasis to an interaction, or reinforce what the symbol is representing.

How can the direction of the Wiggle animation be determined for a symbol?

The direction of the Wiggle animation can be determined by the symbol's orientation or the reading direction, and it can be customized if needed.

What does the Rotate animation preset allow you to do?

The Rotate animation preset allows you to add dynamic movement to a symbol by imitating real-world object behavior or acting as a visual indicator.

What is the purpose of the Breathe animation preset?

The Breathe animation preset smoothly increases and decreases the presence of a symbol, giving it a living quality and helping convey status changes or ongoing activities.

What is the difference between the Pulse and Breathe animation presets?

Pulse conveys ongoing activity by changing its opacity, while Breathe uses both opacity and size to affect how a symbol looks while in motion.

What is the Magic Replace option in the Replace animation preset?

Magic Replace is a smart transition between two symbols with related shapes, allowing for more expressive and visually appealing swaps.

How does the Variable Color preset show different levels of strength in a symbol?

The Variable Color preset relies on color to communicate the state of a symbol changing over time, with the design of the symbol influencing how the animation looks when repeating.

What is the importance of using animations intentionally and purposefully in UI design?

Intentional and purposeful use of animations in UI design ensures that they enhance the user experience rather than distract from it or overwhelm the user.

How can the SF Symbols app help with custom symbols for new animation features?

The SF Symbols app allows designers to annotate their own symbols to ensure they are ready for the new animation features, optimizing them for seamless continuous playback.

What are some of the new categories and symbols added to the SF Symbols library in SF Symbols 6?

New categories and symbols added include automotive symbols, diverse activity figures, localized symbols with scripts like Greek and Cyrillic, progress indicators, haptics, home and widget related symbols, and many new objects.