Config 2024 : Redécouvrez les nouveautés de Figma avec Limpide !

Config est la conférence annuelle de Figma. Dans cet article, nous vous présenterons toutes les fonctionnalités annoncées lors de Config 2024. 

UI3 : La renaissance de Figma avec la Config 2024

Figma lance UI3, la troisième refonte de son environnement depuis son lancement en bêta fermée il y a plus de dix ans. Plus accessible, la plateforme offre une convivialité optimisée avec des icônes plus modernes et des coins arrondis, rendant la nouvelle version de l’Éditeur plus facile à lire et plus accessible pour les graphistes, qu’ils soient novices ou expérimentés.

Depuis ses débuts, Figma a enrichi l’expérience utilisateur en ajoutant des fonctionnalités et en rendant l’outil plus puissant. Après des années de mises à jour progressives, Figma souhaite agrandir l’espace de travail de l’utilisateur, tout en respectant leurs habitudes et workflows établis. Les 2 panneaux latéraux deviennent redimensionnables, ce qui permet de personnaliser son plan de travail pour une meilleure ergonomie en fonction du besoin. Ils peuvent être réduits pour maximiser l’espace de conception ou agrandis pour un meilleur ajustement des propriétés.

Une toute nouvelle barre d’actions compacte a fait son apparition en bas de l’interface. On y retrouve tous les outils de design, la possibilité d’appeler des composants d’une librairie personnelle ou de la communauté, ou encore la possibilité d’activer ou de désactiver le Devmode. Cette mise à jour, avec ses modèles harmonisés, ses systèmes renforcés et sa structure étendue, ouvre de nouvelles possibilités pour la plateforme, illustrant ainsi cette évolution.

Figma AI : le nouvel assistant créatif

Utilisez cet outil pour effectuer les tâches suivantes :

• Élaborer des designs : transformez vos idées en créations modifiables en quelques minutes. Explorez rapidement un large éventail de possibilités et d’itérations, réduisant ainsi l’effort nécessaire pour créer manuellement les premières esquisses à partir de zéro.

• La recherche visuelle et la recherche de ressources : utilisez les images et designs proposés pour retrouver des créations ou éléments réalisés par votre organisation. Trouvez les modules nécessaires dans l’onglet Assets sans avoir besoin de mémoriser leurs noms. 

• La création de prototype : mettez rapidement au point un prototype interactif à partir de maquettes statiques.

• Renommer les calques : organisez votre fichier en attribuant des noms pertinents à vos calques en un clic, en les renommant et en les structurant automatiquement selon le contexte.

• Réécrire un texte : adaptez le ton de votre texte, traduisez-le dans une autre langue, ou condensez-le pour l’intégrer à vos conceptions. 

• Créer des images et retirer des arrière-plans : générez et modifiez des images originales en utilisant une seule instruction, ou enlevez l’arrière-plan d’une image pour mettre en valeur le sujet principal.

Figma AI est gratuit en version bêta, mais des restrictions d’utilisation peuvent s’appliquer. Une fois la phase de test des fonctionnalités d’IA terminée, celles-ci deviendront payantes. Dévoilé pour la première fois lors de la Config Figma, cet outil révolutionne notre façon de concevoir. Bien que certaines de ces fonctionnalités étaient auparavant accessibles, mais ne le sont plus aujourd’hui, nous attendons avec impatience leur retour pour continuer à transformer nos idées en créations concrètes.

Dev Mode : réduire le pont entre design et développement

Pour aider les équipes à créer de meilleurs produits plus efficacement, Figma fait évoluer ses fonctionnalités Design et Dev Mode pour supporter à la fois le design et le développement. Ces améliorations, présentées lors de la dernière Config Figma, permettent aux maquettistes d’explorer et de retravailler rapidement leurs idées, tandis que les programmeurs bénéficient d’une plus grande clarté et de directives sur les éléments prêts à être implémentés, les modifications apportées aux fichiers, et la manière de les créer.

Quelles fonctionnalités le Dev Mode contient-il ? Réponse juste en dessous !

• Le suivi des statuts optimisés : dorénavant, lorsqu’un designer modifie une maquette marquée « Ready for dev », il peut informer les développeurs et ajouter des notes détaillant les modifications apportées. Ils seront alors notifiés, leur indiquant précisément les éléments sur lesquels ils doivent se concentrer.

• La vue « Ready for dev » : elle aide les codeurs à trouver rapidement tous les éléments prêts à être créés au même endroit.

• La Vue Focus : affiche uniquement la conception en cours tout en masquant les autres pour réduire les distractions sur le canevas. 

• Code Connect : Les design system font le lien entre design et code et aident les collaborateurs qui scalent à avancer plus vite. Cependant, les avantages d’un design system dans Figma sont compromis si les développeurs ne les exploitent pas. C’est pourquoi Code Connect a été conçu : il rend le code des design systems visible et pertinent au sein des frameworks et des langages.

Figma Slides : des présentations captivantes

Lors de sa dernière config, Figma a révolutionné le monde de la présentation en lançant Figma Slides, une solution conçue spécifiquement pour les créateurs et leurs équipes. Cet outil innovant offre des fonctionnalités avancées d’édition et d’interactivité, facilitant la création de présentations dynamiques et collaboratives.

Avec Figma Slides, il est possible de : 

• Créez des présentations sur mesure : concevez des présentations exceptionnelles en utilisant des modèles, des ressources, des polices et des couleurs qui reflètent votre marque. Vous pouvez également intégrer des prototypes fonctionnels et actualisés. De plus, activez les outils de design pour accéder à toutes les fonctionnalités que vous appréciez dans Figma Design.

• Concevez des présentations à plusieurs : collaborez avec vos membres via le chat, l’audio et les commentaires. Vérifiez que tout est en ordre grâce aux notes de l’intervenant et au contrôle de la co-présentation. De plus, organisez votre présentation avec la vue Grid et améliorez votre texte grâce à l’assistance de l’IA. 

• Transformez vos présentations en véritables échanges : dynamisez vos diapositives pour capter l’attention de votre public. Collectez des avis en temps réel grâce à des sondages et des votes, et intégrez automatiquement toutes les réponses dans votre présentation.

Améliorations diverses pour une meilleure expérience

Quels sont les autres fonctionnalités qui ont été améliorés et dévoilés lors de la Config Figma 2024 ? Découvrez les fonctionnalités plus bas !

L’auto-layout devient plus intuitif

Figma a amélioré l’auto-layout pour le rendre plus prévisible lorsque vous en avez besoin et plus discret lorsque vous n’en avez pas besoin. Désormais, Figma peut non seulement suggérer quand il est nécessaire d’utiliser plusieurs frames d’auto-layout pour un design complet, mais aussi les créer automatiquement. Cela vous fera gagner du temps en évitant d’avoir à l’appliquer frame par frame. De plus, il est désormais possible de définir une position absolue en maintenant la touche Ctrl enfoncée pour ignorer l’auto-layout lors du déplacement d’un élément dans une frame. 

Les kits d’interface pour une prise en main rapide

Retrouvez les kits UI d’Apple iOS, de Google Material Design et du Simple Design System de Figma directement dans votre onglet Assets. Chaque kit propose des ensembles de composants et des exemples de maquettes, offrant des mises en page complètes pour démarrer rapidement. Il suffit de glisser un modèle d’écran complet comme point de départ, puis de le personnaliser entièrement avec les composants de la bibliothèque.

La visionneuse de prototype est responsive

Visualisez vos créations sur toutes les tailles d’écran avec la visionneuse de prototypes responsive. Cette fonctionnalité s’adapte aux contraintes et aux paramètres d’auto-layout, vous permettant de prévisualiser ou de présenter vos maquettes en ajustant la taille de la fenêtre.

Les pages dans FigJam

FigJam permet désormais de créer plusieurs pages, offrant ainsi plus d’espace pour l’exploration et une meilleure organisation de vos fichiers. Vous pouvez également ajouter des séparateurs pour garantir une organisation claire de vos pages.

Les pages peuvent être utilisées pour :

• Développer des espaces distincts pour les activités de différents groupes ou individus.

• Structurer les réunions récurrentes en répartissant les informations entre les pages, ce qui réduit la taille des tableaux et améliore les temps de chargement.

• Séparer les flux de travail en utilisant différentes pages pour une meilleure gestion.

Nous espérons que vous avez découvert des informations sur la Config Figma de cette année. Si vous n’avez pas pu assister à l’événement en direct, n’hésitez pas à consulter la keynote.