WWDC24. Liquid Glass. Code layers.
FRIENDLY PROMO
Design System Bootcamp
Today, my friend Molly Hellmuth opened registration to the next cohort of her popular design systems course starting on July 7th.
Over 5 weeks, Molly will guide students through every step of building a design system in Figma. By the end, you’ll have a finished system for your current company, portfolio, or future projects. For every cohort, she hosts a special Q&A with guests like Brad Frost, Dan Mall, Luis, and Miggi.
Figmalion readers get $100 off by using the coupon code FIGMALION100. (Tip: check with your employer to see if you can use an educational budget for this course.)
What’s New
Rethinking Color Theory
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.”
Prototyping
Why I stopped prototyping in Figma
Elie Majorel shares the playbook of prototyping with AI tools, allowing other designers to spend less time on appearance and more time on impact. “One Sunday I opened Miro, sketched a few boxes for a new agent search, and copied the flow into Claude. Claude wrote a clear spec. I pasted that prompt into Lovable, pressed generate, and two hours later a working React repo ran in a sandbox. Engineers forked the code the week after. Leaders clicked the demo and said keep going. Two hours from idea to running product. No Figma layers. No endless handoff.”
Build clickable prototypes with Figma MCP and Cursor
Romina recorded a quick walkthrough on how to build clickable prototypes using Figma MCP and Cursor.
8 essential tips for using Figma Make
Designer Advocate Alexia Danton shares the team’s favorite prompts, pro tips, and best practices for using Figma Make to help you get the most out of the recently launched prompt-to-code feature.
v0 Design Mode
Vercel introduced the new design mode in v0 — quickly tweak generated copy, typography, layout, colors, styling, and mode. These changes do not require spending credits or waiting for an LLM. Tailwind and shadcn/ui are supported out of the box.
Figma Sites
Introducing code layers
You can now add custom interactions and animations to your Figma Sites using code layers. Code layers let you create, edit, and manage live code on your site. Use built-in AI chat or write your own code with React, TypeScript, and Tailwind support.
Apple WWDC25
WWDC25 Keynote
Apple Keynote introducing new Liquid Glass design language, year-based version names, Foundation Models API, and significant updates to iPadOS.
Meet Liquid Glass
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.”
Get to know the new design system
“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.”
Human Interface Guidelines
Apple updated HIG with all the latest design techniques.
App Icon Template
Apple slightly updated the corner rounding of their icon template. Time to update all the icons!
Refraction
John LePore explains refraction — light passes from one material to the next — for non-3D designers.
Liquid Glass in Figma
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.
Liquid Glass coming soon to Figma
Of course, the elephant in the room is the sneak peek by Figma that native Liquid Glass support is coming soon.
Liquid Glass with SVG filters
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.
iOS 26 Liquid Glass Buttons
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.
Glassyish Experiment
Nice glass buttons by Oğuz Yağız Kara.
Plugins
Ruri Shader
“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.”
TypeGrid
Generate text styles with line heights calculated based on a baseline grid, font size, and type scale.