With 87 talks and 36 hours of content, you’ll need a solid plan and structure to watch the sessions. Even conference attendees watched no more than 20% of the talks and have some catching up to do. I prepared a FigJam file with all videos from Config 2024 organized chronologically by the conference track — Design Systems, Innovation, Design/​Craft, Building Products, and Leadership Collective.

Use it as a template to mark what you plan to watch or have already watched with stamps. Add your thoughts with sticky notes. Share your version of the file with recommendations and comments with friends or coworkers. Please help others catch up with all the great sessions from Config 2024 by sharing and liking this resource.

This session is a must-see if you have time for only one. CEO Dylan Field’s opening keynote walks through how Figma rethinks product development from the ground up and introduces new methods to help you make great work.

A short recap of everything that was announced at Config in a blog post.

See also an updated What’s New page.

Still wishing for better file organization, locked designs for collaborating, and the exact specs and version control your devs need — without an insane price? Zeplin is a no-brainer choice for the thousands of design teams and freelancers.

Zeplin also recently unlocked all features in the Free plan — like Jira and Azure DevOps integrations, Version Diff, Flows, and Approvals — and added all new pricing plans with unlimited seats at one flat rate.

Figmalion readers get 1 month free on the Basic monthly plan with code FIGMALION. Get started →

Recap and wishlist from Joey Banks: ​“While the updates felt a little more iterative this time around rather than innovative, what Figma shared seems to be paving the way for all that’s near and far ahead. In case you missed the product keynote, or if perhaps you’d just like a recap of the highlights from the perspective of a design systems designer, I’d love to share all that’s new with you in this newsletter.”

Pablo Stanley highlights some of the little details that were announced at Config.

Gabriel Valdivia on Figma AI: ​“Right before Figma’s keynote announcing the ​“make designs” button, I ​“made code” with another app. On one hand, people can now use Figma to replace designers, while on the other hand, I’m using Cursor to replace engineers. I’m stuck in the middle feeling simultaneously disempowered as a designer and completed empowered to make new software.”

All in-person attendees received this beautiful zine from Figma, exploring AI, design, and code.

Config playlist from Damien Correll.

Behind-the-scenes look at how Ryhan Hassan, Joel Miller, and KC Oh landed on a more streamlined and adaptable interface. Don’t miss How we redesigned Figma talk at Config from this group.

On components: ​“As design systems took off and components became central, we realized that component controls like variants and instances deserved top billing above attributes like color and size.”

On streamlined the properties panel: ​“All layout-related options, including width, height, and Auto Layout, are now merged into a single panel. This departs from the typical x, y, w, h panel in most tools, but aligns more neatly with how products are built in code.”

On interface for usability: ​“UI3 introduces backgrounds on inputs, borders around dropdowns, rounded corners, and 200 expressive icons hand-drawn by designer Tim Van Damme. These serve as visual explanations of how to interact with the platform.”

“At Config 2024, we introduced a redesigned Figma, called UI3. This guide is for people who are switching over from Figma’s previous design and want to see how things have changed.”

This is a convenient guide to get familiar with what has changed and where features were moved. As a reminder, for now you can still go back to the previous UI from the help menu.

Tim Van Damme created all the beautiful new icons for the UI3. (In his podcast with Lenny, Dylan Field shared how, in the early days of Figma, he often traced Tim’s icon sets from Dribbble to test Figma’s vector capabilities. Now, his icons have come full circle back to Figma.)

Designer Ryhan Hassan shares insights into an incredibly challenging task of redesigning Figma. See also one of the early demos of UI3 from a few years ago.

Designer Joel Miller: ​“We’ve reorganized our properties panel to focus on component properties and added the ability to resize the panel to see more of a component description and longer label names.”

He also shows a new approach to layout properties with new Position and Layout panels, the new Auto Layout panel, a new setting that allows you to see labels above controls, and a way to join the waitlist.

Rasmus Andersson was one of the early designers at Figma and greatly impacted how it looked over the years. His thoughts on the redesign: ​“Not a fan of the floating sidebars, the rounded icons or the tiny layer hit targets, but I think pretty much everything else is good.”

Gavin McFarland on four things he misses in the UI3 from the old version — rulers, scrollbars, distinct areas for the main controls, and easier-to-read notifications.

Arthur Objartel offers solutions to a few problems he discovered in the new UI. There are good discussions in the comments, and of course, I couldn’t walk past a suggestion of better OKLCH format support!

A new landing page for all AI features: ​“Get started faster, find what you’re looking for, and stay in the flow. Make space for more creativity.” See also a one-minute demo reel of new features.

Remember that they’re currently in beta and will become a paid feature next year: ​“Our AI features will be free for all users during the beta period, which runs through 2024. As we learn how these tools are used and their underlying costs for Figma, we may need to introduce usage limits for the beta. When Figma AI becomes generally available, we’ll provide clear guidance on pricing.”

Introducing new Visual Search and upgraded Asset Search, AI-powered text and content generation tools to help you quickly populate your designs with realistic content, image background removal, turning static mocks into interactive prototypes, automating layer naming, and even design generation from text prompts. ​“Whether you’re searching for inspiration, exploring multiple directions, or looking to automate tedious tasks, we’re building Figma AI to unblock you at any stage.”

Figma’s approach to AI model training: ​“All of the generative features we’ve launched to date are powered by third-party, out-of-the-box AI models and were not trained on private Figma files or customer data. We fine-tuned visual and asset search with images of user interfaces from public, free Community files.”

Admins have control over AI use and content training, which they can turn on or off with two new settings anytime. By default, content training is enabled for Starter and Professional plans and disabled for Organizations and Enterprises. The content training setting takes effect on August 15th, 2024.

“We’re introducing Visual Search to help you more easily find what you’re looking for with a single reference. Search for anything from icons to entire design files with a screenshot, a selected frame, or even a simple sketch with the pencil tool, and Figma will pull in similar designs from team files you have access to. And with improved Asset Search, Figma now uses AI to understand the context behind your search queries. You can easily discover assets — even if your search terms don’t match their names.”

Designer Marco Cornacchia explains how it works. See also his follow-up thread on why the new Asset Search marks the end of the ​“design graveyard.”

Design Engineer Vincent van der Meulen explains how it was built.

“Make Designs, which lives in the new Actions panel, allows you to quickly generate UI layouts and component options from text prompts. Just describe what you need, and Figma will provide a first draft to help you explore various design directions and kickstart your process.”

See also Make an image with AI on how to make images to add to your designs and remove the background from any existing image.

Great observation from Nate Baldwin on the new ​“Make designs.”

Make prototype lets you create interactions and connections between frames in your selection. This is helpful if you want to build a basic prototype flow quickly from your designs. This feature can create simple flows between a selection of top-level frames, add interactions to Back or Next buttons, and link to individual frames from a navigation menu.

Software Engineer Jediah Katz shares 5 of his favorite tips for making the most of the ​“Make prototype” AI tool: name your layers, properly group layers, select only interactive elements instead of entire screens, review the results, and undo if unhappy.

Contextually rename and organize all the layers in your file. Figma AI will choose a name by using a layer’s contents, location, and relationship to other selected layers.

Use ​“Rewrite this…” to generate copy from scratch or tailor your copy’s tone according to your intended audience. Use ​“Shorten” to rewrite any text layers you need to be more concise. ​“Translate to…” can help you preview what your UX copy will look like in another language.

See also Replace text content with AI on using text context from the first element in a series of duplicated elements to populate content in the remaining elements.

“We’ve updated Auto Layout to make it more predictable when you need it and easier to ignore when you don’t. Now, Figma can not only suggest when multiple frames of Auto Layout might be needed for a full design element, but also create those frames for you. This will save you time from having to apply it frame by frame within a design. Plus, you can hold Ctrl to ignore Auto Layout while dragging a design element into an Auto Layout frame to set an absolute position.” Try it out at the playground.

Software Engineer Shirley Miao explains how the new ​“auto auto layout“ was built.

Jackie Chui, a Product Designer at Figma, shares a few more quality-of-life improvements to Auto Layout that the new Suggest Auto Layout feature might have outshined.

“Our new Ready for Dev View cuts down on the noise and helps developers, designers, and other stakeholders know exactly what’s needed to drive projects forward. And with Focus View and the ability to mark designs as dev complete, developers can stay in the flow while staying in sync with their collaborators.” See also a short reelof all the latest updates.

“When it comes to design handoff, communication is key. As designs change, designers need to be able to iterate while still providing clarity to developers about what’s new and what’s ready to build.”

Code Connect is out of beta: ​“Today, we’re excited to make Code Connect generally available, alongside improvements like surfacing connected code snippets in the component playground, a new tool to streamline setup, and support for React, React Native, iOS, Android, and more to come.”

A guide to Dev Mode, updated with all new features and available for both the previous and new UI.

“Now in Dev Mode, new statuses like Edited and Completed make it easier to communicate what’s changed and ready — supporting a more fluid development process.”

“Experience your designs on any screen size with a new Prototype viewer experience that resizes responsively. With a new menu option for previewing or presenting prototypes, the viewer will respect constraints and Auto Layout properties as you resize the viewer window or select a different device frame.”

“Find Apple iOS, Google Material Design 3, and Figma’s Simple Design System UI Kits directly in your assets panel. Each UI Kit includes component sets and example mockups, which allow you to start from full layouts. Just drag in an entire example screen as a starting point, and it’s fully editable with components from the library. Plus, each of these UI Kits is backed by Code Connect.”

A base UI kit from Advocates Luis and Jake is available in the Figma assets panel by default. It’s backed with a fully Code Connected React codebase. See Luis’ thread on how and why it was made.

“Bring order to your files while keeping your jams in one place with Pages in FigJam.”

“You’ll now find Figma Slides templates featured on our homepage, a new much-improved navigation, and simpler category pages.” Oh, and there is also a new homepage!

Figma has several features under development that are available to users in beta. In this article, find out which beta features are available, what they are, their beta types, and how to access each one.

Coming soon: ​“Moving forward, we’re working to make it easier for freelancers and agencies to collaborate with external clients, streamline project hand-off, and simplify billing.”

“As a tradeoff for pixel-level control and the familiarity of their favorite toolkit in Figma, designers have gone without basic slide functionalities like speaker notes and slide transitions. Figma Slides not only addresses those core features, but amplifies design functionality, making it easier for both designers and non-designers to co-create in the same space.”

“In this video, we’ll take a tour around the Figma Slides editor so you can start creating your own presentations.”

Mihika Kapoor shares the story of taking Flides from the Maker Week pitch to reality. That team photo in the end is a poor gold. Also, see Keeyen’s demo tutorial from a year ago with an early prototype, where he pretends to be Zander Supafast.

Mihika shares the inspiration and the process of making one of the coolest Slides features.

I shared Lenny’s interview with Mihika a couple of months ago, but it’s worth recommending again now that it’s clear that this ​“0 to 1” product she talked about was Figma Slides.

Daniel Destefanis and Soundharya Muthukrishnan: ​“Here’s a simple presentation template to share designs with your collaborators or clients and get alignment.”

Femke made a template for the presentation deck as an overview of your next design project.