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

Summary

La conférence Config 2024 de Figma a introduit des mises à jour majeures centrées sur quatre piliers principaux : l'interface utilisateur UI3, le mode Dev, l'intelligence artificielle Figma AI et les présentations Figma Slides. L'interface a été redessinée pour mettre le travail au premier plan, l'Auto Layout a été amélioré avec des suggestions automatiques, et de nouveaux kits UI natifs sont apparus. Les fonctionnalités de facturation et de collaboration ont été renforcées avec Connect Workspace et de nouvelles options de gestion des utilisateurs. L'IA permet de générer des interfaces utilisateur personnalisées et de faciliter la recherche et la traduction. Enfin, Figma Slides offre une approche innovante aux présentations, intégrant des prototypes interactifs et des tonalités de voix configurables par l'IA.

Takeaways

• 🎨 **UI3 mise à jour** : Figma a lancé une nouvelle interface utilisateur appelée UI3, conçue pour mettre le travail au centre de l'expérience Figma.
• 🔧 **Mode Dev** : Les développeurs peuvent désormais définir l'état de chaque cadre et accéder à un onglet 'Ready for Dev', qui masque tout ce qui n'est pas encore prêt pour le développement.
• 🤖 **Figma AI** : L'introduction d'un mode AI qui permet de générer de nouvelles interfaces utilisateur personnalisées, y compris des graphiques et une structure de cadres correctement nommée.
• 🔍 **Recherche IA** : L'amélioration de la recherche avec l'IA, permettant de trouver des icônes similaires, de retirer les arrière-plans d'images, de traduire des designs et de nommer automatiquement les calques.
• 📈 **Auto-Layout amélioré** : La mise à disposition de 'Suggest Auto Layout', qui facilite l'accès à Auto Layout et réduit la nécessité de l'ajuster manuellement.
• 📱 **Kits UI natifs** : L'ajout de trois kits UI natifs pour iOS, Material Design et un kit UI neutre créé par l'équipe Figma, liés à Code Connect pour une utilisation dans des projets réels.
• 👥 **Connect Workspace** : La possibilité d'inviter d'autres équipes dans vos projets, avec des fonctionnalités similaires à celles de Slack.
• 💳 **Mises à jour de facturation** : L'introduction d'un e-mail de synthèse sur les utilisateurs payants et la possibilité d'activer l'approbation manuelle pour les utilisateurs avec accès en modification.
• 📑 **Figma Slides** : L'annonce inattendue de Figma Slides, un outil de présentation qui utilise l'infrastructure existante de Figma et offre des fonctionnalités telles que la configuration de l'intonation grâce à l'IA.
• 🌐 **Expérience utilisateur améliorée** : La priorité accordée à la propriété des composants et des variables, et la possibilité de redimensionner le panneau de design pour une meilleure expérience utilisateur.
• 🔮 **Prédictions pour l'année suivante** : Un accent continu sur les Systèmes de conception et le mode Dev, une expansion des modèles de diaporama et un investissement accru dans l'IA pour améliorer la complexité et la personnalisation des générations d'interfaces.

Q & A

Quel est le thème principal de la conférence Config 2024 présentée dans le script ?

Le thème principal de la conférence Config 2024 est les mises à jour majeures de Figma, y compris l'interface utilisateur redessinée (UI3), le mode Dev, l'IA de Figma et Figma Slides.

Quelles sont les quatre piliers principaux des mises à jour de Figma mentionnés dans le script ?

Les quatre piliers principaux des mises à jour sont UI3, le mode Dev, l'IA de Figma et Figma Slides.

Quel est l'objectif de la récente révision de l'interface utilisateur de Figma (UI3) ?

L'objectif de la révision de l'interface utilisateur de Figma est de mettre le travail de l'utilisateur au centre de l'expérience Figma, en masquant les menus latéraux et en priorisant les propriétés des composants et des variables.

Quelle nouvelle fonctionnalité est introduite avec Suggest Auto Layout ?

Suggest Auto Layout est une fonctionnalité qui configure automatiquement les dispositions, permettant aux utilisateurs de ne pas s'y attarder trop longtemps.

Quels sont les trois kits UI natifs fournis dans le panneau des ressources de Figma ?

Les trois kits UI natifs sont un kit pour la conception iOS, un kit Material Design et un kit UI neutre créé par l'équipe de Figma.

En quoi consiste la mise à jour de Connect Workspace et comment cela affecte-t-elle les équipes de travail ?

Connect Workspace permet d'inviter d'autres équipes dans vos projets, similaire à un espace de travail Slack, et inclut une fonctionnalité d'approbation manuelle pour les utilisateurs qui accèdent à vos fichiers avec des droits d'édition.

Quels sont les changements apportés au mode Dev dans Figma ?

Le mode Dev permet désormais de définir le statut de chaque cadre, d'accéder à un onglet Ready for Dev qui masque tout ce qui n'est pas encore prêt pour le développement, et de voir les modifications de conception reflétées directement dans le code via Code Connect.

Quelle est la fonctionnalité d'IA la plus impressionnante présentée dans le script ?

L'une des fonctionnalités d'IA les plus impressionnantes est la capacité de créer une nouvelle interface utilisateur entièrement personnalisée, y compris les graphiques et la structure des cadres.

Quel est le principal avantage de Figma Slides par rapport aux autres applications de présentation ?

Figma Slides permet d'utiliser l'IA pour configurer le ton de la voix et d'intégrer des liens de prototype de conception qui jouent automatiquement pendant une présentation.

Quelles sont les prédictions de l'auteur pour l'année suivante en ce qui concerne Figma ?

Les prédictions incluent un accent continu sur les Systèmes de conception et le mode Dev, un développement majeur du référentiel de modèles de diapositives et un investissement accru dans l'IA pour créer des interfaces utilisateur plus complexes.

Pourquoi l'auteur pense-t-il que l'acquisition par Adobe a affecté la feuille de route de Figma ?

L'auteur pense que l'acquisition par Adobe a perturbé la feuille de route de Figma, ce qui a entraîné une expansion verticale et horizontale en même temps, avec un développement de nouvelles fonctionnalités liées à la conception graphique.

Outlines

00:00

😀 Mise à jour de l'interface utilisateur de Figma et nouvelles fonctionnalités

La première partie du script présente les quatre principaux piliers de mise à jour de Figma lors de Config 2024. L'interface utilisateur a été redessinée pour mettre le travail au premier plan, avec des menus latéraux qui se cachent automatiquement. Suggest Auto Layout facilite la configuration des dispositions, et trois kits UI natifs sont disponibles. Des mises à jour sur la facturation et la collaboration ont été apportées, notamment Connect Workspace et des fonctionnalités de sécurité pour les fichiers avec des utilisateurs ayant des droits d'édition. Dev Mode permet aux développeurs de marquer les cadres comme prêts pour le développement et de voir les modifications en temps réel dans le code. Les fonctionnalités de visionneuse de prototype et de Code Connect ont été améliorées pour une meilleure intégration avec le développement.

05:01

🤖 L'introduction de l'IA dans Figma et l'extension vers les présentations avec Figma Slides

La deuxième partie du script aborde l'introduction de l'IA dans Figma, permettant de générer de nouvelles interfaces utilisateur personnalisées. Les fonctionnalités d'IA incluent également la recherche d'icônes similaires, la traduction de designs et la possibilité de créer des prototypes à partir de la sélection de designs. En outre, Figma Slides a été introduit comme un outil de présentation basé sur l'infrastructure existante de Figma, offrant des fonctionnalités d'IA pour configurer le ton de la voix et l'intégration de prototypes interactifs. Le script se termine par les prédictions de l'auteur pour l'année suivante, incluant un accent mis sur les Systèmes de conception, l'élargissement de la bibliothèque de modèles de slides et l'intensification de l'utilisation de l'IA pour créer des interfaces plus complexes.

Keywords

💡Config 2024

Config 2024 est un événement de lancement de produits, où Figma a présenté ses mises à jour principales. Ce terme fait référence au contexte dans lequel les annonces ont été faites et est central dans la compréhension des mises à jour discutées dans la vidéo.

💡UI3

UI3 est l'interface redesserrée de Figma, qui vise à mettre le travail de l'utilisateur au premier plan de l'expérience Figma. Cette mise à jour est une partie clé des annonces de Config 2024 et illustre l'effort de Figma pour améliorer l'interface utilisateur et l'expérience de travail.

💡Dev mode

Le mode Dev est une fonctionnalité qui permet aux développeurs de définir l'état de chaque cadre et d'accéder à un onglet 'Ready for Dev', qui masque tout ce qui n'est pas encore prêt pour le développement. Cela montre comment Figma cherche à s'intégrer plus étroitement dans le processus de développement.

💡Auto layout

L'Auto layout est une fonctionnalité de Figma qui configure automatiquement les dispositions. La mise à jour 'Suggest Auto layout' facilite l'accès à cette fonctionnalité, ce qui est un exemple de l'orientation de Figma vers une expérience plus fluide et moins technique pour les utilisateurs.

💡UI kits

Les kits UI sont des ensembles préconstruits d'éléments d'interface utilisateur fournis par Figma pour différents systèmes de conception comme iOS et Material Design. Ils sont liés à Code Connect, ce qui facilite la transition de conception à développement.

💡Connect workspace

Le Connect workspace est une fonctionnalité qui permet aux équipes d'inviter d'autres équipes à travailler sur leurs projets, semblable à un espace de travail Slack. Cela indique l'intention de Figma de favoriser la collaboration entre équipes.

💡Code connect

Code connect est une fonctionnalité qui synchronise les designs avec le code, permettant aux développeurs de copier et d'utiliser le code pertinent dans des projets réels. Cela démontre l'engagement de Figma à améliorer l'intégration entre conception et développement.

💡Figma AI

Figma AI est une fonctionnalité qui permet de générer de nouvelles interfaces utilisateur entièrement personnalisées, y compris les graphiques. Cela montre l'ambition de Figma pour intégrer l'intelligence artificielle dans son outil de conception.

💡Figma slides

Figma slides est une nouvelle fonctionnalité inattendue qui permet à Figma de se diversifier en offrant une solution de présentation. Cette fonctionnalité utilise l'infrastructure existante de Figma pour créer des présentations dynamiques et interactives.

💡Design Systems

Les systèmes de conception sont des ensembles de ressources et de directives qui aident à maintenir une cohérence dans le design. Dans le script, ils sont mentionnés comme une stratégie de verrouillage pour Figma, montrant l'importance de la cohérence et de l'efficacité dans les processus de conception.

💡Prototype

Un prototype est une version préliminaire d'un produit qui permet de tester et de déterminer la viabilité de l'idée. Dans le contexte de la vidéo, la capacité de Figma AI à créer des prototypes à partir des designs est un exemple de l'avancée technologique pour accélérer le processus de conception.

Highlights

UI3, the redesigned interface of Figma, aims to put the user's work at the center of the Figma experience.

Auto layout is enhanced with 'Suggest Auto layout' to make it easier for users to set up frames without manual adjustments.

Three native UI kits for iOS, material design, and a neutral UI kit by the Figma team are introduced in the assets panel.

Code connect allows developers to copy relevant code directly from the UI kits for use in real projects.

Connect workspace is introduced to invite other teams into projects, similar to Slack workspace.

Figma adds an email digest feature to inform users of their paying user count and enable manual approval for edit access to files.

Dev mode allows setting the status of each frame for active development and access to a 'ready for Dev' tab.

The Prototype viewer now includes a responsive viewer to see designs at different breakpoints.

Code connect is directly synced with designs, reflecting changes made in the design directly in the code.

Figma AI generates entirely new UIs with custom graphics and correctly structured and named frames.

AI can also search for anything in a file, draw icons, and find similar icons within the design.

Images can have backgrounds removed, and designs can be translated into another language using AI.

The ability to highlight all designs and create a prototype instantly with correct layer and layout structure.

Figma Slides is introduced, leveraging Figma's infrastructure to build a robust presentation tool.

AI can configure the tone of voice in Figma Slides, allowing for professional or casual presentations.

Prototype links can be embedded in slides for live presentations, enhancing the design presentation experience.

Figma's focus on expanding horizontally by introducing new features and repurposing infrastructure for presentations.

Predictions for the following year include a continuous focus on Design Systems and Dev mode for user retention.

A major focus on building out the slides template repository to capture more markets with minimal effort.

Investing heavily in AI to make it smarter and capable of creating more intricate UIs than generic generators.

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