Design Thursday #63
A weekly recap of everything you need to know about tools, events, guidelines and design in general.
iOS 26 featuring Liquid Glass
If you haven’t heard anything about Apple’s latest design language update for all of their platforms, you might really need this update. But instead of telling you all about it, check out this great introduction video from the designers themselves.
What’s not highlighted as much is that Apple is really trying to simplify the design language by separating content from controls, making controls bigger, having higher contrast text (yes, there are accessibility issues in the first beta, but be patient; Apple will fix them), removing unnecessary elements, left-aligning text, and removing text when an icon says enough.
Everyone is trying their hand at recreating the glass material (like Spline), but shaders make it practically impossible to achieve the same or even a similar effect. So keep in mind that your Figma design might look different from the real thing. Tools like Paper might be the future of UI design to support all of these materials and effects. Or you can also design right in a developer tool if you’re adventurous.
Icon Composer
A new app called Icon Composer can be used to test out the design of your icons for all platforms that fit the new Liquid Glass design language. It lets you select from different backgrounds, set an icon background color, choose a mode (light/dark/mono), and test out different ways light affects the icon.
Learn how to create your Icon with Icon Composer:
SF Symbols 7
Each WWDC SF Symbols gets better, in the latest release Apple included a lot of new options mostly focused on animation, gradients, and of course a big set of new icons.
Draw animations
Icons can now be animated with a new draw animation as if someone is drawing it with a pen. You can add annotations to your custom icons to define how they should be drawn, in what order.
Variable draw
This is a version of draw animations, where you can use color or opacity to highlight something. For example, a thermometer icon where you want to highlight the temperature rising or a fingerprint icon to show that a verification is in progress.
Enhanced magic replace
The transition between 2 icons via magic replace is now improved to keep the outer shape if it's the same for both icons. This will make a smoother transition between the two.
Gradients
You can now apply gradients to an SF Symbol, you could previously only apply single colors.
New Symbols
Hundreds of new symbols have been added including a whole lot of localized variant icons.
Liquid Glass in Play
The power of building native apps is that you can support new OS design languages with little effort. So Play is bringing Liquid Glass to their prototyping tool. They shared some examples of how you can use actual liquid glass materials in your prototypes. It will be available once iOS 26 launches.
Read about Liquid Glass in Play
Progressive Blurs & iOS/macOS 26 libraries in Sketch
Sketch gained support for progressive blurs in the latest beta release. You can still apply a uniform blur (previously Gaussian or Background), but also the new Linear Progressive, or Radial Progressive blur.
The new Apple UI libraries for iOS 26 and macOS 26 are now available in Libraries to update your app’s design for this fall.
Advanced function variables in Webflow
You can now use CSS functions in Webflow’s variables like clamp(), calc(), min(), max(), and color-mix(). This makes it possible to create even more powerful design systems.
Read about variables with functions
Framer plugin roles & Wireframer dark mode
Plugins now support permissions-based access, so now every user type can use plugins independently of their role. There are also new APIs for REM and Vector Sets.
Additionally, Wireframer, Framer’s AI wireframing tool, now supports Dark Mode. So whenever you want to create a first draft, but not feeling like designing in light mode, this option will be perfect for you.
Read all about Framer’s updates
Stroke trimming controls & video export in Hana
Spline’s Hana is improving with new stroke trimming controls that can be used for animations and interactions. Great for loading spinners, handwritten text animations, or following your cursor around. On top of that, you can now also export your animations to video.