Figma just released this 5 new massive updates for 2024

Figma Just Released This 5 New Massive Updates For 2024 Figma Just Released This 5 New Massive Updates For 2024

TL;DR: Scroll to the end to find the 1 page cheat sheet!

5 Major Figma Updates Released in Config 2024 — Design by Sepideh Yazdi

Today is the second day of Config 2024 first day!

As you know each year Figma releases its new features in its yearly conference, Config.

Advertisement

Less than 24 hours ago Figma released these 5 major updates. [1]

My favorite one is inside update number 2 🤩 I’m also so pumped about number 3 as well!Figma New UIFigma AIFigma SlidesDev Mode UpdatesFeature ImprovementsConfig 2024- scroll down to see all the new Figma features- Design by Sepideh Yazdi

Roadmap for this article

This article is split into 5 parts. Each part starts with a short explanation of an update. Then, it goes into more detail in smaller sections. In each section, there are images or little videos that show how the update works. At the end, I included all the Figma resources, playgrounds, and tutorials if you want to check them out!

I also wrote a 1-page summary of all the updates. Scroll down until you find the cheat sheet!

Short on time? 🫡

I’ve included a summary of all the features at the end of this article. You can quickly scan through it and decide which section to read in more detail. And while you are scrolling down see the images and videos!

1- Figma New UI

Figma has a new look and it is so neat.

1 -Figma New UI aka UI3-Design by Sepideh Yazdi

I used to turn off and on the sidebars all the time when I was presenting!

No more CTRL+

The design is already more neat and less crowded and the bars will appear when we need them! And we can expand them as well.

Figma new UI (UI3) — sidebars are closed and we have the bottom navigation in the center.

I personally really like the bottom nav. Especially with all the cool features in it! Scroll to section 2 to see what I’m saying!

Figma new UI (UI3) — the right sidebar is open and adjustable in size.

This UI trend started around 2 years ago because designers were trying to make things consistent both in phones and desktops then in 2023 when Adobe released its AI (generative fill on Photoshop) this pattern became essential in all their tools and now Figma is adopting it as well.

New Figma Design System(UI3) — released in Config 2024

The UI3 will roll out soon and for a while we can go back and forth with the new and old version till next year.

IDK about you, but I’m pretty sure that I prefer the new look😂

2- Figma AI

This one is soooo coool!

2-Figma AI-Design by Sepideh Yazdi

Here are 4 categories of Figma AI superpowers! (The last one is my favorite!)

2.1. Find things

You can find things by searching visuals, typing what you remember, and even sketching with the pen!

Now you can upload an image and find an exact match or a similar design in your design file. This is cool when the design file is huge and we have a screenshot of the design but we don’t where the design is!

Figma AI- Search the image and find the frame in the Figma file and drag and drop it into the canvas

You can also sketch the things you are looking for and it will find it for you. What I see myself using all the time is to sketch things to find icons!

Figma AI – Sketch the component — find it in the file — drag and drop it into the canvas

The cool thing is that the search will also work for the community files as well. No more back and forth with your file and the community files and also it literally search inside the files for the actual components not just the file names.

Figma AI- Search by text in community files

2.2. Generate first drafts in seconds

This one was completely what we all expected!

Figma AI — Make designs with prompts

Write a prompt → Have the first draft

Some cool perks: You can adjust everything like theme, typography, border radius, and colors very fast with the bottom nav.

Figma AI- Style Picker

The thing that was unexpected (in a good way🤩) for me was the fact that it could generate within Material Kit and Apple iOS design guides.

2.3. Make the prototype

This one was so smart! Single click to have the base prototype ready.

You can make the prototype by selecting the frames and hitting the make prototype button.

2.4. Rename layers automatically

And now it’s time for my favorite feature that I’ve been waiting for😂😂😂Now AI can automatically name our layers and organize them all

https://medium.com/media/20b2f63c4a7c8a58b93415667ce596fc/href

That’s the end to this “Name your layer jokes” 🫡

Check the resources for more details and playgrounds for Figma AI [2]

3- Figma Slides

I love this new Figma tool! It’s amazing. It makes presentation building so much easier and fun.

3-Figma Slides — Design by Sepideh Yazdi

I used to make my decks on Figma and then export and then import them on Google Slides or PowerPoint for sharing and presenting.

Sometimes I did them on Figma and got a little bit tired of prototyping them all the time. This new Figma product makes things so easier!

https://medium.com/media/1b36e1e55543a257f188ff27324fb1e5/href

The mind-blowing part for me is that we can bring our prototype previews inside the styles and it’s interactive. We can add polls and stuff as well.

Plus the fact that we can use auto animate!

Check the resources for more details about Figma slides. [3]

4- Dev Mode Updates

Easier dev/design collaboration for developers!

4- Dev Mode Updates — Design by Sepideh Yazdi

4.1. Dev Mode new view

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

4.2. Focus on the details you need

Developers can instantly see all designs marked for “Ready for Dev” and inspect specific designs in Focus View, minimizing distractions.

4.3. Your code, added to Dev Mode with Code Connect

Now we can bring our component code into Dev Mode to ensure we get the right code every time or add code from a supported UI kit.

https://medium.com/media/ed12a2546861bdc0a54514e4da527dbd/hrefCheck the resources for more details about Figma Dev Mode and Code Connect. [4]

5- Feature Improvements

There were a lot of improvements to the current features

5- Feature Improvements — Design by Sepideh Yazdi

Here are the major ones in 5 categories:

5.1. Better Auto Layout

Auto Layout is now much smarter!

5.1. Smarter Auto Layout — Config 2024

It will automatically understand the multiple rows and columns at the same time.

That’s much easier than nested frames.

5.2. Responsive mode for prototype viewer

This one is so handy! We can now expand and change the size of the preview for a responsive preview of our design.

5.2. Responsive mode for prototype viewer

5.3. UI kits implemented inside Figma

Components from UI kits by Figma, Apple iOS, and Google Material Design, are now available by default in Figma. No more looking for components in different design systems!

5.3. UI Kits implemented inside Figma

5.4. FigJam pages

Now FigJam has pages like Figma! Much more organized!

5.4. Pages in FigJamCheck the resources for more details and playgrounds for these features [5]

Which was your favorite feature? Comment it!

I’m personally so excited about these features! Also, the Config vibe was crazy!

Here’s what’s happening on X

Summary of all the updates for Config 2024 – Design by Sepideh Yazdi

Summary

Here are all the updates in a one-page cheat sheet!

Figma 5 new massive updates 2024 summary by Sepideh Yazdi

All the launches of Figma 2024

https://medium.com/media/043a58578d5bf9cd8e3cddd47e17d32f/href

If you liked this article, please give it a clap.👏🏼

You can follow and subscribe to my email list to get notified when the next article is out.

Subscribe to get notified by email

Resources for Figma Updates 2024- Design by Sepideh Yazdi

Resources

[1] Keynote video:

https://medium.com/media/2a84ec46202bb55bb284b63bfa070816/href

[2] Figma AI

Meet Figma AI: Empowering Designers with Intelligent Tools | Figma Blog

[3] Intro to Figma Slides

https://medium.com/media/2c348159171fa81d028846e7f3381440/hrefFigma Slides: Create Presentations & Slides for Every OccasionStack the deck with Figma Slides | Figma Blog

[4] Figma Dev Mode

https://medium.com/media/22d47856c79a78e1301ea019b71c8231/href

Dev Mode Playground file:

https://www.figma.com/community/file/1234941143610339388

[5] Feature Improvements

Auto Layout Playground file:

https://www.figma.com/community/file/784448220678228461

Figma just released this 5 new massive updates for 2024 was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Advertisement