Ridd noticed that designers who can code spend more time sketching their ideas and less time in Figma. This approach isn’t common because it still takes too long to code designs, but AI will change that. What if instead of generating polished mockups from text prompts we used AI to turn wireframes into frontend code, applied our design system, and tweaked the visual direction based on the provided mood board? (This is just one of the ideas explored in the new section of Dive.) 

A free, branded link shortener for your Figma portfolios or design files with a fig.page domain and powerful analytics.

A retrospective on an issue with Make Designs from Noah Levin, a VP of Design at Figma. First, a reminder on how the feature works: “[…] Make Designs feature employs three parts: a model, some context, and a prompt. This feature currently uses a collection of off-the-shelf models like OpenAI’s GPT-4o and Amazon’s Titan model—the same generally available models that anyone can use—and we have not done any additional training or fine-tuning. To give the model enough freedom to compose designs from a wide variety of domains, we commissioned two extensive design systems (one for mobile and one for desktop) with hundreds of components, as well as examples of different ways these components can be assembled to guide the output.”

What went wrong: ​“We carefully reviewed the underlying design systems throughout the course of development and during a private beta. But in the week leading up to Config, new components and example screens were added that we simply didn’t vet carefully enough. A few of those assets were similar to aspects of real world applications, and appeared in the output of the feature with certain prompts.”

In this episode of Dive recorded at Config, Ridd talks to Figma design engineer Vincent van der Meulen about how the new Visual Search feature was born from a mid-project pivot. Don’t miss Vincent’s original pitch video for visual search in Figma.

Mia Blume from Designing with AI with a controversial take: ​“In fact, I think Figma AI changes nothing for design. […] Besides the immediately useful feature of smart naming, Figma AI doesn’t alter the existing trajectory. This isn’t a dig on Figma, or its role in the future of tooling. It’s more that as a discipline, we were already ​“here”—some people just didn’t realize it.” If you’ve been paying attention to AI-related links in this newsletter, you would agree with her points.

Bingo: ​“The real weakness that jeopardizes our field has existed long before the invention of generative AI tools for creatives. If our value (even if it’s only perceived) lies solely in drawing boxes, then we will inevitably become obsolete. And if we remain focused on the wrong things, we will miss the moment in which we could do something about it.” In the end, she suggests three key areas that design leaders can focus on.

Abdus Salam, Product Designer at Meta, writes at UX Collective: ​“The future belongs to designers who can master AI, not be mastered by it. Our value lies not just in our technical skills, but in our creativity, our empathy, and our ability to wield these tools in service of crafting experiences that resonate on a profoundly human level.” Also: ​“while AI can help us reach ​“good”, achieving ​“great” still requires human ingenuity and an unwavering commitment to quality.”

Ridd shows his advanced Raycast setup. One thing I adopted immediately is the Figma File Search extension he recommended — what a wonderful time-saver! The Color Picker and Ruler extensions might replace some of the third-party tools I’ve been relying on as well. 

David Hoang on three topics he is thinking a lot about after this year’s Config.

Last Monday, Andy Allen from Not Boring Software asked Figma AI to design a ​“not boring weather app.” The generated result was almost a copy of Apple’s Weather app on iOS, even when using a different prompt. CTO of Figma Kris Rasmussen commented that they’re investigating and clarified that ​“there was no training as part of this feature or any of our generative features,” so the similarities are a function of the 3rd-party models and commissioned design systems.

33% faster file loading and 33% fewer memory issues! ​“To ensure even the largest Figma design files can be used as efficiently as possible, Figma dynamically loads pages. When a file is opened, only the page that you land on is loaded (usually the first page in a file). This means a file with hundreds of pages can open as quickly as a file with just a few! Figma loads additional pages as you navigate to them. If an unloaded page is particularly complex, you may experience a brief pause when you navigate to the page.” Certain actions like searching across all pages, reviewing updates, or running a plugin or widget that needs the whole file may cause the file to load all pages.

Huge performance boost. See this Twitter thread from Bersabel Tadesse, Director of Product at Figma, on the journey to shipping this release: ​“Our architecture was built around files being the atomic unit of work, but users were treating pages as their atomic unit of work. So it didn’t make sense to keep optimizing within the current architecture—or worse, try and change how our users work.”

Throughout May, drafts are being moved into teams on the Starter and Professional plans. This change was poorly communicated and caused a public outcry, but I don’t actually think it’s unfair or a big deal. Historically, drafts haven’t been associated with a team. This made work ownership unclear, and teams couldn’t use advanced paid features like Dev Mode while working on drafts. Moving forward, drafts will be associated with a team, and existing files will need to be moved. Drafts stay private and can be shared view-only for free, but users will need paid seats to share drafts with others and to edit other teammates’ drafts. The free plan still includes 3 collaborative design files. This change puts a limit on teams collaborating in drafts but feels more like closing a loophole than a dark pattern.

Changes to sharing and access settings ​“to create a more consistent sharing experience and give you clearer visibility into and control over content permissions,” being released through mid-June. New team access terminology, clarified UI for inheriting project access by the team members and child file access by the project members, a dedicated prototype share dialog, a branch’s audience and role, and a central place for sharing other forms, views, and artifacts of the file. (Pre-Config cleanup for something new?)

I fully expected all big product announcements to be saved for Config, but we have an unexpected treat! Jokes aside, this is a very elegant solution based on how people already organize their files. Reminds me of how Twitter came up with retweets and the book The Best Interface is No Interface.

“When you name a page in Figma using only hyphens, en/​em dashes, asterisks or spaces, that page will now automatically convert into a page divider.”

That’s not all! Now, you can also select multiple pages by holding Shift to rename, delete, or move them in bulk.

Meng To shows a website made entirely in Figma and exported to React with Loco​fy​.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.

MDS launched a free course that teaches the basics of Figma in one hour with 12 fast-paced videos. The production quality is totally bonkers, and Matt’s knowledge is so deep that even Figma experts might pick up something new.

Even while the new Dev Mode replaced the old Inspect panel, all information is still available regardless of your plan, seat type, or file access. This tutorial covers inspecting designs in Figma, depending on your plan and access level.

Gerard walks us through the Variables API, showing how it can keep values in sync with your code base and how applications such as StyleDictionary can transform them into usable code for multiple platforms. See the repository with GitHub Actions workflow examples.