L’un des changements les plus audacieux est la refonte de l’interface utilisateur de Figma. La nouvelle UI, baptisée UI3, vise à simplifier l’expérience de conception. Les outils sont désormais placés en bas de l’écran pour donner plus de visibilité au contenu et aider les utilisateurs à rester concentrés. La transition vers cette nouvelle interface sera progressive, permettant aux utilisateurs de basculer entre l’ancienne et la nouvelle version pendant un certain temps.

Suggest Auto Layout : L’une des fonctionnalités phares est le « Suggest Auto Layout », qui facilite l’utilisation de l’auto layout en ajustant automatiquement et de manière plus intuitive les éléments dans les cadres. Cela simplifie la structure des designs et améliore la productivité des utilisateurs.

Kits de Design intégrés : Figma introduit des kits de design iOS 18 et Material 3 directement dans la plateforme. Ces kits standardisés permettent une conception plus rapide et une intégration simplifiée des composants couramment utilisés.

Dev Mode amélioré : La transition du design au développement est désormais plus fluide grâce à la génération automatique de code pour SwiftUI, Compose et React. Cette fonctionnalité aide les développeurs à transformer rapidement les conceptions en production.

Prévu pour début 2025, Figma Connect facilitera la collaboration avec des clients externes. Cela est particulièrement bénéfique pour les freelances et les agences qui travaillent régulièrement avec des clients externes.

Figma prévoit également d’améliorer le transfert de projets des agences vers les clients, avec des mises à jour attendues dans les prochains mois pour simplifier ce processus.

De nouvelles fonctionnalités de gestion de la facturation permettent aux administrateurs de mieux contrôler les notifications et les mises à jour de l’éditeur. Les administrateurs peuvent désormais exiger une approbation avant toute mise à jour, offrant plus de contrôle et de flexibilité.

L’année dernière, Figma a lancé le Dev Mode, un espace dédié aux développeurs pour faciliter l’accès aux informations nécessaires à la mise en œuvre des designs. Au cours de l’année écoulée, Figma a continué d’améliorer le Dev Mode avec des outils d’annotation, une refonte de la comparaison des modifications, et bien plus encore, grâce aux retours de la communauté.

Ready for Dev : Figma introduit des mises à jour majeures pour le Dev Mode, visant à simplifier l’inspection des fichiers volumineux et à rapprocher le code et le design. Une nouvelle vue « Ready for Dev » permet aux développeurs de voir tous les éléments prêts pour le développement, masquant ce qui n’est pas pertinent.

Focus View : Cette nouvelle fonctionnalité affiche uniquement le design à inspecter. Les développeurs peuvent voir une liste de toutes les modifications apportées à un cadre spécifique, facilitant la vérification des changements et l’implémentation rapide.

Prototype responsive : Un nouveau paramètre responsive pour le visualiseur de prototypes permet de voir comment le design fonctionne sur différents tailles d’écran, assurant une implémentation correcte et responsive.

Statut de complétion : Les développeurs peuvent désormais marquer un design comme complété, envoyant une notification aux designers pour fermer la boucle de feedback. Si des mises à jour sont nécessaires, le design revient à l’état « Ready for Dev » et envoie une notification au développeur.

Cette fonctionnalité sort de la phase bêta et permet aux développeurs de voir le code réel des composants de leur propre système de design dans Figma. Le Code Connect SDK permet de décrire les différences entre les composants en design et en code, et de publier ces changements dans Figma. En utilisant Code Connect, les développeurs peuvent changer les propriétés et les variantes des composants et voir le code se synchroniser automatiquement avec le design.

Figma a également dévoilé plusieurs nouvelles fonctionnalités axées sur l’intelligence artificielle, visant à simplifier et enrichir l’expérience de design.

Un ajout notable est le panneau Actions, identifiable par une petite étoile au bas de la barre d’outils. Ce panneau permet de lancer des commandes directement dans Figma et sert également de point d’entrée pour les nouvelles fonctionnalités AI.

L’approche de Figma avec l’IA est de résoudre des problèmes concrets qui affectent le flux de travail et la créativité des utilisateurs. L’accent est mis sur trois aspects principaux :

1. Commencer un projet : Faciliter le démarrage sur une toile vierge en générant des designs à partir de simples commandes textuelles.
2. Trouver ce dont vous avez besoin : Aider les utilisateurs à localiser rapidement les éléments nécessaires dans leurs projets.
3. Maintenir le flux créatif : Éviter les interruptions et faciliter la continuité du processus de design.

Cette fonctionnalité permet de générer des designs à partir de descriptions textuelles. Par exemple, en entrant une demande pour une application de recherche de pizzerias, Figma utilise OpenAI et un modèle de diffusion pour créer un design complet, incluant les systèmes de design préétablis. Les utilisateurs peuvent ensuite personnaliser facilement les thèmes, les couleurs, les rayons des coins, et les espacements.

Figma peut également gérer des projets plus complexes, comme la création d’un site web de portfolio pour un architecte spécialisé en durabilité. L’IA génère un design détaillé avec des images appropriées, des témoignages de clients, et même une section de contact. Les utilisateurs peuvent par la suite modifier les designs générés en y ajoutant des éléments spécifiques comme des formulaires de contact.

La capacité de l’IA à générer des designs variés et détaillés aiderait ainsi les designers à surmonter le problème de la page blanche et à explorer de nouvelles idées.

Figma a dévoilé une autre fonctionnalité révolutionnaire pour ses utilisateurs : la recherche visuelle alimentée par l’IA. Cette nouvelle capacité vise à faciliter la recherche et la récupération d’actifs de conception, en réponse aux défis courants rencontrés par les équipes de design.

Beaucoup de designers connaissent la difficulté de retrouver des fichiers spécifiques dans un océan de captures d’écran et de discussions. Avec la nouvelle fonctionnalité de recherche visuelle, Figma simplifie ce processus. Les utilisateurs peuvent ainsi trouver instantanément le fichier Figma exact correspondant à une capture d’écran en recherchant des éléments vectoriels similaires.

La fonctionnalité ne se limite pas aux captures d’écran. Les utilisateurs peuvent également rechercher des écrans spécifiques en utilisant des chaînes de caractère. Par exemple, en cherchant une chaîne comme « confirmez votre lieu de prise en charge », Figma affiche immédiatement les écrans pertinents, facilitant l’ajout de ces éléments au projet en cours.

Une autre caractéristique innovante est la possibilité de dessiner des formes simples pour rechercher des composants similaires. Par exemple, en dessinant un cercle avec des croix pour représenter une icône de centrage de carte, Figma peut identifier et récupérer l’icône exacte parmi les composants disponibles, accélérant ainsi le processus de conception.

Pour les utilisateurs individuels ou les petites équipes, Figma propose également une recherche visuelle au sein de sa communauté. En recherchant des termes comme « admin dashboard UI », les utilisateurs peuvent explorer et intégrer des designs de la communauté Figma.

L’une des nouvelles fonctionnalités permet aux designers de dupliquer des composants et de remplacer automatiquement le contenu. Par exemple, en travaillant sur une application de recettes, un designer peut facilement ajouter des ingrédients, des images et des descriptions sans interrompre son flux de travail. En utilisant des commandes simples, les utilisateurs peuvent générer des images, réécrire des descriptions et même supprimer les arrière-plans des photos, rendant le processus de création plus fluide et rapide.

Figma facilite également l’adaptation des designs à différentes langues. En traduisant automatiquement le contenu, les designers peuvent voir comment leurs créations s’affichent dans différentes langues. Cela permet d’ajuster rapidement les composants pour éviter la troncation et s’assurer que le design fonctionne bien quelle que soit la langue utilisée.

Pour ceux qui sont soucieux de la propreté de leurs fichiers, Figma propose désormais une fonctionnalité de renommage automatique des couches. Cela permet de garder les projets organisés et de les partager sans embarras. De plus, Figma aide à créer des prototypes en générant automatiquement les connexions entre les différentes pages et composants, simplifiant ainsi le processus de prototypage et de test.

Figma a récemment dévoilé Figma Slides, un nouvel outil destiné à transformer la façon dont les présentations sont conçues et partagées. Intégré à la plateforme Figma, Figma Slides promet de simplifier et d’enrichir l’expérience de création de diapositives de manière novatrice.

Conçu initialement comme un projet de Makery, l’équivalent d’un hackathon interne chez Figma, Figma Slides est né de la volonté de répondre aux besoins des utilisateurs qui utilisaient déjà Figma pour créer des présentations visuelles de manière non conventionnelle.

1. Automatisation et personnalisation : Figma Slides simplifie le processus de création de diapositives en permettant aux utilisateurs de changer rapidement les styles et les couleurs sans compromettre la cohérence visuelle. Grâce à des fonctionnalités comme le mode grille et la sélection de modèles, il est facile de structurer et d’organiser les présentations en fonction des besoins narratifs.
2. Intégration du prototypage : Une caractéristique unique de Figma Slides est l’intégration directe du prototypage interactif. Les utilisateurs peuvent insérer des liens de prototypage dans leurs diapositives, permettant aux spectateurs de naviguer et d’interagir avec les maquettes directement depuis la présentation. Cela élimine le moment fastidieux de capturer des enregistrements d’écran pour montrer des interactions dynamiques.
3. Collaboration améliorée : Conforme à l’ADN collaboratif de Figma, Figma Slides facilite la coédition et le partage en temps réel des présentations. Les fonctionnalités comme les notes de présentateur et les sondages en direct permettent de maintenir l’engagement de l’audience et d’encourager les interactions bidirectionnelles, transformant ainsi les présentations traditionnelles en conversations enrichissantes.

En résumé, Figma Config 2024 démontre l’engagement continu de Figma à innover et à répondre aux besoins changeants de sa communauté de designers et de développeurs, consolidant ainsi sa position de leader dans le domaine des outils de conception collaborative.

Voir la conférence 👇