Config 2024 Figma Recap (IN 8 MINUTES) - Figma Ai, Figma Slides & More

Summary

Config 2024 introduced UI3, a redesigned Figma interface prioritizing work focus, with new features like Suggest Auto Layout for easier design setups. Figma AI allows for fully customized UI generation, while updates to billing and teamwork include a workspace feature and email digests for account management. Dev mode enhancements and a responsive prototype viewer were also highlighted. The addition of Figma Slides, with AI-assisted tone and design integration, rounds out the presentation toolset. Predictions for the future include a focus on Design Systems, expansion of the slides template library, and further AI development.

Takeaways

• 😀 Figma's Config 2024 event introduced four main updates: UI3, Dev mode, AI, and Figma Slides.
• 🔄 UI3 is a redesigned interface for Figma, aiming to put the user's work at the center of the experience with a focus on usability and accessibility.
• 📐 The 'Suggest Auto Layout' feature simplifies the process of setting up layouts, with Figma taking the lead on configuration.
• 📱 Three native UI kits for iOS, Material Design, and a neutral UI kit by Figma are now available, enhancing design consistency and efficiency.
• 🔗 Code Connect allows developers to copy relevant code directly from Figma's UI kits, streamlining the development process.
• 🔑 Connect Workspace is introduced as a collaborative feature similar to Slack, facilitating team communication within Figma projects.
• 💳 Figma is enhancing billing transparency with email digests and manual approval for users with edit access to paid accounts.
• 🛠️ Dev mode allows developers to set the status of frames and access a 'Ready for Dev' tab, filtering out elements not yet ready for development.
• 🤖 Figma AI enables the creation of entirely new UIs with custom graphics, structured frames, and correct naming, representing a significant leap in design automation.
• 🎨 Beyond creating UIs, Figma AI can also search for items within files, remove image backgrounds, translate designs, and automate layer renaming.
• 📑 Figma Slides is a new feature, capitalizing on Figma's existing infrastructure to create a robust presentation tool with AI-assisted tone configuration.
• 🔮 Predictions for the following year include a continued focus on Design Systems and Dev mode, expansion of the slides template repository, and significant advancements in AI capabilities.

Q & A

What is the main focus of the video script regarding Figma's updates at Config 2024?

The video script focuses on the four main pillars of updates at Config 2024: UI3, Dev mode, AI, and Figma Slides. It discusses the redesign of the Figma interface, new features like Suggest Auto layout, native UI kits, and enhancements to billing and teamwork, as well as the introduction of AI capabilities and the new Figma Slides tool.

What is UI3 and what changes does it bring to the Figma experience?

UI3 is the redesigned interface of Figma, aimed at putting the user's work in the center of the Figma experience. Changes include auto-hiding left and right menus, resizable design panels, and prioritization of component properties and variables in the top right corner.

How does the Suggest Auto layout feature work in Figma?

The Suggest Auto layout feature in Figma automatically configures layouts, reducing the need for manual adjustment. It makes it easier for users to get started with Auto layout by generating all the necessary frames.

What are the three native UI kits provided in the assets panel of Figma?

The three native UI kits provided are for iOS design, Material Design, and a neutral UI kit by the Figma team. These kits are linked with code connect, allowing developers to copy relevant code for real projects.

What is Connect Workspace and how does it relate to teamwork in Figma?

Connect Workspace is a feature that functions similarly to a Slack workspace, allowing teams to invite others into their projects. It's part of Figma's updates to enhance teamwork and project management.

What updates were made to the billing and user access management in Figma?

Figma introduced an email digest feature to inform users about the number of paying users tied to their account and the ability to enable manual approval for users entering files with edit access, as this incurs payments.

How does the Dev mode update in Figma benefit developers?

In Dev mode, developers can set the status of each frame to indicate whether they are ready for development. They also gain access to a 'Ready for Dev' tab that hides elements not yet ready for development, streamlining the workflow.

What AI capabilities were introduced in Figma at Config 2024?

Figma introduced AI capabilities that allow users to generate entirely new UIs with custom graphics, structure and name frames correctly, and use AI for various tasks such as searching for similar icons, removing backgrounds from images, translating designs, and automating the creation of prototypes.

What is Figma Slides and how does it differ from other presentation apps?

Figma Slides is a new tool that allows users to create presentations using Figma's infrastructure, assets, and interactions. It differentiates itself by using AI to configure the tone of voice and by enabling the integration of live prototypes into slides.

What are the speaker's predictions for Figma's future developments?

The speaker predicts a continuous focus on Design Systems and Dev mode, a major focus on building out the slides template repository, and an aggressive push towards enhancing AI capabilities to create more intricate UIs and possibly integrate custom design systems.

How does the speaker feel about Figma's updates post-Adobe acquisition?

The speaker believes that the Adobe acquisition may have disrupted Figma's roadmap and feels that Figma has reached a point where it is looking to expand horizontally while deepening its focus on Design Systems and development.

Outlines

00:00

🛠️ Figma's Config 2024 Updates Overview

The video script provides a comprehensive breakdown of the updates announced at Figma's Config 2024 event. The presenter starts with a humorous note about UI updates and a shoutout to Dylan at Figma. The main focus is on four pillars of updates: UI3, Dev mode, AI integration, and Figma Slides. UI3 is a redesigned interface aimed at enhancing user experience by prioritizing work and streamlining menus. Auto layout is improved with the 'Suggest Auto layout' feature, simplifying the process for users. Native UI kits for iOS, Material Design, and a neutral UI kit are introduced, linked with code connect for developers. Billing and teamwork updates include a 'Connect Workspace' feature and email digests for account management. Dev mode allows developers to set frame statuses and access a 'ready for Dev' tab. The Prototype viewer now includes a responsive viewer, and code connect is directly synced with designs. The presenter also discusses the potential of Figma AI, which can generate entire UIs with custom graphics and assist in various design tasks. The script ends with the presenter's predictions for the future of Figma, focusing on Design Systems, Dev mode, and AI enhancements.

05:01

🎨 Figma's Expansion into Slides and AI Capabilities

In the second paragraph, the script delves into Figma's unexpected but logical expansion into the presentation tool market with Figma Slides. The presenter highlights the unique features of Figma Slides, such as AI configuration for tone of voice and the ability to integrate live prototypes into presentations. The tool also offers a variety of templates and is expected to broaden its offerings beyond design presentations. The presenter speculates on Figma's strategic moves post-Adobe acquisition, suggesting a shift towards horizontal expansion while deepening its roots in design systems and development. Predictions for the following year include a continued focus on Design Systems, an expansion of the slides template repository, and significant advancements in AI capabilities, potentially allowing for more intricate UI creations and integration with user design systems. The video concludes with a personal touch, inviting viewers to share their thoughts and engage with the content.

Keywords

💡Config 2024

Config 2024 refers to an event where updates and new features are announced, presumably for a software or platform. In the script, it is the context for the discussion of new features and updates, indicating its importance as a focal point for the video's theme.

💡UI3

UI3 is the redesigned interface of Figma, which is a key update discussed in the video. It is defined by its goal to put the user's work at the center of the Figma experience, with changes to menus and the design panel, and it exemplifies the theme of innovation and user-centric design.

💡Auto Layout

Auto Layout is a feature in Figma that automates the configuration of layouts. The script mentions 'suggest Auto layout' as an update that simplifies the process, which ties into the video's theme of efficiency and ease of use in design software.

💡UI Kits

UI Kits are pre-designed user interface components provided by Figma in the assets panel. The script mentions three native UI kits for different design systems, which are relevant to the video's theme of providing designers with tools to streamline their work.

💡Code Connect

Code Connect is a feature that links design elements to code, allowing developers to copy and use it in projects. It is mentioned in the context of UI Kits, emphasizing the integration between design and development within the Figma platform.

💡Connect Workspace

Connect Workspace is a feature that allows teams to collaborate more effectively, similar to a Slack workspace. It is part of the updates discussed in the video, highlighting the theme of enhanced teamwork and project management.

💡Dev Mode

Dev Mode is a setting in Figma that allows developers to focus on frames ready for development. It is mentioned as part of the updates, illustrating the video's focus on streamlining the workflow between design and development.

💡Figma AI

Figma AI is a feature that uses artificial intelligence to assist in creating user interfaces. The script describes it as a tool that can generate entirely new UIs, which is central to the video's theme of leveraging AI for design innovation.

💡Figma Slides

Figma Slides is a new tool introduced for creating presentations, which is unexpected but fits within Figma's infrastructure. It is part of the video's narrative on Figma's expansion into new areas of design and presentation.

💡Design Systems

Design Systems are a set of reusable components and rules that ensure consistency in design. The script suggests that Figma will continue to focus on this area, which is integral to the video's theme of establishing robust design frameworks.

💡Horizontal Expansion

Horizontal expansion refers to a company broadening its offerings into new markets or product categories. In the script, it is used to discuss Figma's move into presentations with Figma Slides, which is an example of diversifying beyond their core product.

Highlights

Introduction of UI3, the redesigned interface of Figma, focusing on putting work front and center.

Launch of Suggest Auto Layout for easier configuration of layouts without manual adjustments.

Inclusion of three native UI kits for iOS, Material Design, and a neutral UI kit by the Figma team in the assets panel.

Linking of UI kits with Code Connect, allowing developers to copy and use code in real projects.

Introduction of Connect Workspace for team collaboration similar to Slack workspace.

New billing features including email digests of paying users and manual approval for edit access to files.

Dev Mode updates allowing setting frame status and access to a 'Ready for Dev' tab.

Prototype viewer now includes a responsive viewer for different breakpoints.

Code Connect is directly synced with designs for real-time code and design changes.

Figma AI's ability to generate entirely new UIs with custom graphics and correctly named frames.

AI's capability to search within files, translate designs, and rename layers.

The 'Make Prototype' feature that allows highlighting designs and creating a prototype instantly.

Announcement of Figma Slides, a new tool leveraging Figma's existing infrastructure for presentations.

Figma Slides' unique feature of using AI to configure the tone of voice in presentations.

Integration of design prototypes into Figma Slides for live presentations.

Prediction of continuous focus on Design Systems and Dev Mode for user retention.

Anticipation of expanding the slides template repository to capture more market share.

Forecast of significant investment in AI to enhance UI creation capabilities and integrate user design systems.

Transcripts

you don't want to spend hours watching a

replay to figure out what was actually

dropped at config 2024 so let me go

ahead and break it down for you in less

than 10 minutes and make sure to stay

all the way to the end and I'll also

share with you my predictions for what I

think will happen this year but first a

quick shout out to Dylan at figma I'm

still waiting for him to develop Godlike

controls to eliminate all bystanders

seriously the CEO himself got a little

bit nervous when the audience started

requesting edit access to his file live

on stage and with that as the UI is

hidden um you know it makes it so that

uh I'm able

to get a little distracted by our

friends

online so that out of the way let's dive

in and take a look at the four main

pillars of updates at config 2024 first

we have ui3 Dev mode AI and also figma

slides now the first major update that

will be incrementally released to all

figma users is ui3 which is the

redesigned interface of figma yes it's

making a grand entrance right after I

just updated my figma course perfect

timing but the changes aren't too bad

the goal of this redesign is to put your

work in the front and center of the

figma experience the left and right

menus will also hide when you are

following others in a file the design

panel can also be resized and the team

have prioritized component properties

and variables in the top right corner

now alongside the superficial UI update

figma is rolling out suggest Auto layout

which automatically configures layouts

with auto layout so you don't need to

fiddle around with it too much figma is

literally just telling you to get out of

the way let me handle it and so today

what we're doing is making it so it's a

bit easier to get into to uh Auto layout

by making something called Suggest Auto

layout if I press this you'll see that I

get all the frames that I

need now I would still recommend you to

learn how to use Auto layout so you can

debug any issues as they did mention the

feature isn't 100% just yet we also have

three native UI kits provided in the

assets panel there is one for iOS design

material design and a neutral UI kit by

the figma team now I don't think they're

as robust as ship faster UI but that's

up for you to decide these kits are also

linked with code connect which means

that developers can copy the relevant

code and use it in real projects we then

have two updates regarding billing and

teamwork we have connect workspace which

acts a little like slack workspace where

you can invite other teams into your

projects and the figma team is also

rolling out the ability for you to get

an email digest of how many paying users

are currently tied to your account and

you can also enable manual approval when

users are entering your files with edit

access as it obviously incurs payments

it's clear that figma doesn't want to

remove their frictionless invite

experience just yet because it will

definitely impact the revenue as a lot

of people are unaware that they are

incurring costs for external users

in the files that have edit access so

when it comes to Dev mode you can now

set the status of each frame to whether

they are active changes developers also

have access to a ready for Dev tab which

hides everything that isn't ready for

development just yet the Prototype

viewer now has a responsive viewer so

they can see what the designs actually

look like at different breakpoints and

code connect is directly synced up with

the designs so that you can make changes

directly to the design and see it

reflect in the code as well that's

everything for ui3 then when it came to

figma AI you can slap yourself in the

face a couple of times because you ain't

dreaming It's Coming For You by clicking

on the AI button you can prompt an

entirely new UI where even the graphics

will be custom as well I also noticed

the frames are structured and named

correctly which is an absolute bonus

from here you can also tweak The Styling

of the UI Dylan did mention this is just

the start so you can imagine a lot of

effort will be put into this area of

figma moving forward you know it's Elon

of course uh he's our architect that

we're focused on today and it's going to

pull in some images as

well you never know what it comes up

with so it's always a surprise which is

pretty fun now Beyond The Prompt to UI

you can also use AI to search for

anything in your file Dylan demonstrates

drawing an icon and clicking search for

similar where it then finds the icon for

you you can remove backgrounds of images

translate all your designs into another

language magically rename all your

layers and the ultimate bang up was

being able to highlight all your designs

and hit make prototype now I'm assuming

your layers and your layouts do need to

be structured correctly for this to work

but that was an absolute Banger then

finally there was figma slides to be

honest this was unexpected but it

actually makes sense as well figma has

the entire infrastructure to build a

great slides tool they have all the

assets all the interactions and I'm sure

they have millions of slides that people

have created on their platform already

now how is this different to other

presentation apps well figma allows you

to actually use AI to configure the tone

of voice it's pretty cool so if you want

to make it more professional or casual

you can you can also copy and paste the

Prototype link of your design into your

slides which means it can automatically

play and be presented live in your

presentation and they already have a

bunch of templates that you can access

immediately obviously it seems like they

are more focused on design presentations

right now but I'm sure very quickly

they're going to expand horizontally

just like canva and Tackle all sorts of

presentations so that's it for config

2024 was I impressed H I think there was

some cool features but I think the Adobe

acquisition messed up their road map a

little I also think figma has now

reached a point in vertical expansion

where they are now looking to expand

horizontally while still going deeper

into Design Systems and the development

space and this is because I can see they

are now repurposing their infrastructure

to move into presentations and they are

also introducing new features which are

more graphic design related like

removing the back ground of images so I

can start to see that they are starting

to broaden their offerings so what are

my predictions for the following year

there is a lot but I'll focus on three

that I think will actually happen we'll

see now first a continuous focus on

Design Systems and Dev mode because

figar knows that these are their lockin

strategies once a team has their entire

system integrated into figma the cost of

migrating or changing vendors becomes

way too high and this is how figma will

try to retain the user base second I

wouldn't be surprised if we see a major

focus on building out the slides

template repository once again moving

upstream and capturing more markets with

minimal effort this will just add a nice

bump into the cash flow where they can

keep investing into more cost intensive

features now third going absolutely hard

on AI that means getting it smarter and

also being able to create UI that's much

more intricate than what most generic

generators are currently doing and maybe

even allowing you to connect your own

design system with their text to UI

experience if you made it this far let

me know who the true Die Hard fans are

let me know in the comments below what

you had for breakfast for me I had a

dirty chai and some spaghetti and if you

enjoy this video make sure to gently

smash the like button subscribe for the

darad fans and if you want to keep

learning you should definitely check out

this video