4 Figma AI Updates to Elevate Your Design Workflow

The AI that we are experiencing shows boundless possibilities. As designer roles evolve, repetitive tasks are being covered by Figma AI plugins. Let’s look at some updates to add to your workflow. 

Noah Levin – VP of Design in Figma, presenting Figma AI updates and prototypes Noah Levin – VP of Design in Figma, presenting Figma AI updates and prototypes Noah Levin – VP of Design in Figma, presenting Figma AI updates and prototypes
Noah Levin (VP of Design in Figma), presenting Figma AI updates and prototypes

In June 2023, Noah Levin Vice, President of Product Design at Figma announced that the company acquired Diagram. It’s an AI company founded by Jordan Singer, a former Figma-geek who built a plugin with GPT-3 to generate design ideas with a simple prompt. 

According to Figma, ”design has always evolved with technology”. And as designers I think we can all agree. 

Instead of focusing on small repetitive details such as rounded corners for cards, Figma AI’s purpose is to take care of that. This way, we can spend more time designing smarter interfaces and even better user experience with fewer clicks. 

With all the above in mind, Figma is incorporating the future by sharing some prototypes for platform updates that integrate AI.

We’ll go over each of them to explore their possibilities.

4 Figma AI Updates to Elevate Your Design Workflow

1. Figma AI Organizer

Don’t you love how post-it notes help bring ideas out while brainstorming? The challenge comes when interpreting and organizing those ideas into a coherent or actionable list. Well, Figma AI will do that for you in seconds. 

You’ll just need to select all your sticky notes, click the button with a sparkling (magic?) vector icon and have all your data organized and categorized in a structured way.

A hint of how the Figma AI Organizer could look like. A hint of how the Figma AI Organizer could look like. A hint of how the Figma AI Organizer could look like.
A hint of how the Figma AI Organizer could look like.

This could work as proper documentation after a brainstorming session to follow up on the next creative meeting. 

2. Design Recommendations by Figma AI

This plugin will generate design ideas with a simple written prompt. Let’s say you are designing the UI design for a music app and want to add a section with album covers and titles. You can just write “Albums” and wait for the magic to happen below that prompt.

This is how the design recommendations by Figma AI could look like.This is how the design recommendations by Figma AI could look like.This is how the design recommendations by Figma AI could look like.
This is how the design recommendations by Figma AI could look like.

It’ll take the fonts and styles you set up for your design system and will look for images that match the look & feel of your design. 

Each prompt comes with multiple design options. You can navigate through different alternatives that could respond to your prompt. 

You will navigate through different alternatives for your to choose.You will navigate through different alternatives for your to choose.You will navigate through different alternatives for your to choose.
You will navigate through different alternatives for your to choose.

3. Generate Production-Ready Code with Figma AI 

Dear developers, your prayers have been heard. You guys might feel forgotten, but you have a special place in the hearts and minds of UX/UI designers like myself.

Figma now has an official plugin for Visual Studio Code, an open-source code editor developed by Microsoft. With this tool, developers will be able to select an element of the design and magically get it translated into code. 

You will be able to generate production-ready code with Figma AI.You will be able to generate production-ready code with Figma AI.You will be able to generate production-ready code with Figma AI.
You will be able to generate production-ready code with Figma AI.

4. Genius Chat, a Figma AI Design Assistant 

While working on a UI design we need to consider multiple things at once. Imagine you could focus on bringing your ideas out and start laying out your sketch wireframes into Figma while you have a virtual assistant to help you with repetitive (and sometimes annoying) tasks such as labelling buttons, resizing boxes and looking for icons. Genius Chat is being developed with that purpose in mind. 

Genius Chat is an “AI design companion” that will pop into your screen as a real-time collaborator helping you while you are designing. 

Here are some of the upgrades Genius will feature.Here are some of the upgrades Genius will feature.Here are some of the upgrades Genius will feature.
Here are some of the AI upgrades Genius will feature.
This is how the Genius Chat for Figma AI could look like.This is how the Genius Chat for Figma AI could look like.This is how the Genius Chat for Figma AI could look like.
This is how the Genius Chat for Figma AI could look like.

The prototype shows a virtual assistant ready to answer all your questions. For example, if you don’t know how to do something in Figma, instead of doing the same ol’ thing of Googling a tutorial, you can just ask Genius to give you the instructions you need.

Andrew Pouliot (ML Engineer at Diagram) showing how you can ask Genius to fill in the blanks for you.Andrew Pouliot (ML Engineer at Diagram) showing how you can ask Genius to fill in the blanks for you.Andrew Pouliot (ML Engineer at Diagram) showing how you can ask Genius to fill in the blanks for you.
Andrew Pouliot (ML Engineer at Diagram) showing how you can ask Genius to fill in the blanks for you.

Want to have a taste of this magic? You can already start experimenting with Magician, one of the AI tools for Figma available now. 

Imagine all the time that this can save. What will you do with all this spare time? Maybe go for a walk, like you promise your dog every day.

Check out the video of the Figma Designing with AI conference to hear the full announcements and features. 

Find Figma Templates on Envato Elements

Struggling to find the perfect Figma template for your project? Explore ready-made Figma templates on Envato Elements!

Templates compatible with Figma on Envato ElementsTemplates compatible with Figma on Envato ElementsTemplates compatible with Figma on Envato Elements

Envato Elements offers an unlimited download subscription to download as many items as you like. Choose from millions of digital assets including templates, icons, stock photos, royalty-free audio, stock video, and more.

Learn More About Figma

A world of learning awaits with Figma! Uncover fresh Tips, clever Hacks, and valuable resources to streamline your web design with AI workflow.

Check out these articles and tutorials from Envato Tuts+:

The Future of AI is Now!

Figma’s vision is not for designer or developer roles to disappear, but to evolve. Maybe the boundaries of roles and hierarchy can now be blurred through active collaboration with AI tools for Figma and other design platforms.  

The more I research it, the more I’d like to think of AI more as a possibility and less as a threat. It’s an opportunity for us designers to catch the wave when it comes to take our creative ideas further away.