Design System Updates. 11 Uses for Variables. AI at Shopify.
Sponsor
Optimize designs pre-launch with AI-driven insights
Attention Insight gives you the power to see design through the eyes of your customers. Reduce friction, gain stakeholder confidence, and get your designs approved faster than ever.
Release Notes
Release Notes 2025: April Edition
The recording of the latest Release Notes livestream is finally available. While these updates have already been covered in the last two issues, I always enjoy watching hands-on demos and explainers. In this episode, Luis Ouriach and Alexia Danton share all the latest goodies like FigPals (RIP), design handoff releases, accessibility contrast info, annotations in design mode, collapsing layers, reordering modes and collections, and more.
Design System Quality Features
Three primary updates: hide and show variable fills, duplicate and copy styles, and the go-to-main component shortcut (Control+Option+Command+K). See the complete list of quality-of-life updates in the release notes.
Connected projects
“Connected Projects makes it easy for freelancers and agencies on different Figma plans to collaborate seamlessly with clients. Work together to co-edit designs, and share resources like libraries — all while staying on your own Figma seat.”
QR Code Generator
Create QR codes for websites, text, Wi-Fi, calls, and messages with custom styles. After generating a custom QR code, click “Get QR Code” to add it to your Figma designs.
What’s New
Building a design-driven culture for every role and team
Designer Advocate Corey Lee wants to help teams understand how to make the shift from just using design to becoming a truly design-driven organization. His central observation was that “the highest-performing teams don’t just use design; they embed it across every function.” After months of research and writing, Figma published his ebook to provide teams with insights to build a solid foundation of cross-functional design culture to navigate the current landscape of business and beyond.
Design for the AI age
Karri Saarinen from Linear: “Prompting is essentially like writing a spec, sometimes it’s hard to articulate exactly what you want and ultimately control the outcome. Two people looking for the same thing might get wildly different results just based on how they asked for it, which creates an unprecedented level of dynamism within the product. This shift from deterministic traditional UI to something more unbridled raises a challenge for designers: with no predictable journeys to optimize, how do you create consistent, high-quality experiences?”
Reflexive AI usage is now a baseline expectation at Shopify
Bold moves from Shopify’s CEO Tobi Lutke, shared in an internal memo. On general AI usage: “Using AI effectively is now a fundamental expectation of everyone at Shopify. It’s a tool of all trades today, and will only grow in importance.”
On prototyping: “AI must be part of your GSD Prototype phase. The prototype phase of any GSD project should be dominated by AI exploration. Prototypes are meant for learning and creating information. AI dramatically accelerates this process. You can learn to produce something that other team mates can look at, use, and reason about in a fraction of the time it used to take.”
AI skills will be a part of the performance reviews and affect future hiring. Highly recommend reading an entire thing.
Using Figma
11 uses for variables beyond light and dark mode
In her blog post, Alice Packard explores innovative applications of Figma variables beyond traditional light and dark modes. She outlines 11 use cases — including validation styling, asset availability, breakpoints, brand themes, seasonal promotions, subscription levels, loyalty statuses, authentication states, interface density, contrast settings, and levels of fidelity — demonstrating how variables can enhance design systems by enabling dynamic UI adjustments and improving collaboration between designers and developers.
Keys timelapse
Anastasia shared a timelapse of drawing beautiful realistic keyboard buttons in Figma.
Deep Dive: Designing Figma Slides
Jay chats with Natasha Tenggoro who shows how she designed AI features for Figma Slides. You will learn about Natasha’s design process, AI design, designing shadows, design explorations for Slides and more.
Plugins & Tools
Superflex 2.0
“Superflex helps you write front-end code from Figma, images and prompts while matching your coding style and utilizing your UI components.”