My sympathy goes out to web developers looking for Glass’s CSS in Dev Mode.

Apple released new iOS and iPad OS 26 design kits last week. They’ve been clearly waiting for Figma to add the new Glass effect first, as reproducing it manually would not have been sustainable. This is a core UI library if you’re designing for iOS, but also a fantastic educational resource for everyone else.

Figma’s newest product designer Rogie presents a new effect that allows you to manipulate light, depth, frost, and refraction to create dynamic elements that refract light like physical glass. This playground file will teach you how to use the effect and provide creative inspiration to have fun with glass. 

This effect looks incredible! So glad we won’t need to deal with hacky imitations. Don’t miss a breakdown of how Miggi made this video.

Hardik Pandya with a thoughtful critique: ​“When Apple places interface elements behind a glassy refractive layer and claims this brings content closer, it contradicts our lived experience with glass as a material. The iPhone’s most powerful feature has always been direct manipulation — the sense that you are touching your photos, sliding your messages, and tapping your apps directly. There is no separation layer. There is no glass between you and your content, because the screen itself disappears during interaction.”

“Inspired by the Apple iPhone 16e launch event visuals, create stunning liquid metal effects for any shape, text, or logo. Instantly transform designs into sleek, shiny metallic visuals—static or animated—for a futuristic, high-end look. Use generated code in your Framer or Webflow project.”

Nice glass buttons by Oğuz Yağız Kara.

Joey Banks recreated Apple’s new iOS 26 and iPadOS 26 button styles using Figma, complete with their new Liquid Glass material. These buttons are fully editable and use native Figma effects.

Shu recreated the Liquid Glass effect by using an SVG displacement filter and shaders. See the demo or paste the script into any website console. This seems to be the most flexible and customizable recreation, but unfortunately it also only works in Chrome.

Mike Bespalov imitated the effect using an SVG Displacement filter, without any JS or WebGL. Unfortunately, it only works in Chrome and isn’t easily adaptable to other shapes.

Of course, the elephant in the room is the sneak peek by Figma that native Liquid Glass support is coming soon.

Allan Yu imitates the Liquid Glass effect in Figma by using the new texture feature in Figma Draw. A few other takes using similar techniques by Camden, Luis Ouriach, Brett from Designjoy, Max, and Ben South — some are with the Figma files as well.

John LePore explains refraction — light passes from one material to the next — for non-3D designers.

Apple slightly updated the corner rounding of their icon template. Time to update all the icons!

Apple updated HIG with all the latest design techniques.

“Dive deeper into the new design system to explore key changes to visual design, information architecture, and core system components. Learn how the system reshapes the relationship between interface and content, enabling you to create designs that are dynamic, harmonious, and consistent across devices, screen sizes, and input modes.”

WWDC session introducing Liquid Glass. ​“Get to know the design principles of Liquid Glass, explore its core optical and physical properties, and learn where to use it and why.”

Apple Keynote introducing new Liquid Glass design language, year-based version names, Foundation Models API, and significant updates to iPadOS.

Ruxandra Duru works with Google designers focusing on the intersection of color, emotion, and UX design. ​“After years of what we could call a color fixation, I’ve developed a three-step approach to color theory. My secret to making color more pleasurable and intentional — and much less scary — has to do with balancing, relating, and completing your colors.”

Speaking of Apple, the latest winners of the Design Award were announced. Congrats to Play for winning the Innovation award!