Découvrir UI3 : la nouvelle interface de Figma
Qui peut utiliser cette fonctionnalité
- Disponible en version bêta limitée sur tous les forfaits
- Si vous n'avez pas accès à la nouvelle version de Figma, attendez un peu ; ces mises à jour seront déployées au cours des prochains mois. Et si vous ne connaissez pas encore Figma et que vous utilisez automatiquement la nouvelle version, nous vous recommandons notre guide d'exploration des fichiers de design.
À la Config 2024, nous avons présenté un nouveau design pour Figma, appelé UI3. Ce guide est destiné aux personnes qui passent du précédent design de Figma et qui veulent découvrir les changements.
Pourquoi avons-nous repensé Figma
Figma est devenue une interface plus complexe au fil du temps, et UI3 a été conçue dans le but de simplifier votre expérience de design. Notre objectif est que Figma design soit davantage centré pour les designers et plus accessible à un large éventail de personnes. Nous sommes également en train de créer une base cohérente pour nos produits existants, ainsi que pour nos futurs produits.
Ce nouveau design :
- vous offre davantage de contrôle sur l’interface, grâce à des panneaux redimensionnables et rabattables ;
- met davantage l’accent sur vos créations sur les plans de travail ;
- offre des fonctionnalités plus intuitives en améliorant leur positionnement, leur regroupement et leur façon de s’adapter à différents contextes ;
- améliore la cohérence avec nos autres produits, pour basculer plus facilement entre Figma design, FigJam, Dev Mode et Figma Slides.
Conseil : Vous voulez en savoir plus sur la refonte ? Consultez notre article de blog : Avec l’interface repensée de Figma, votre travail passe au premier plan
Ce qui a changé
Panneau de navigation
Nous avons réorganisé le panneau de navigation situé sur le côté gauche du plan de travail afin de regrouper toutes les informations relatives à votre dossier et d'en faciliter l'utilisation.
Réduire l'interface
Si vous avez besoin d'un peu plus d'espace sur le plan de travail, vous pouvez désormais réduire l'interface à partir du panneau de navigation. Cliquez sur Minimize UI (Réduire l'interface utilisateur) pour réduire le panneau de navigation et le panneau des propriétés.
Si vous sélectionnez quelque chose sur le plan de travail alors que l'interface est réduite, le panneau des propriétés s'ouvre temporairement pour vous permettre d'accéder aux contrôles de chaque propriété.
Nom et emplacement du fichier
Cliquez sur l'icône du menu déroulant à côté du nom du fichier pour effectuer une action sur un fichier, comme le déplacer, publier une bibliothèque, créer une branche ou afficher l'historique des versions.
Onglet Assets (Ressources)
Nous avons facilité la recherche, la navigation et l'insertion de composants à partir de l'onglet Assets (Ressources).
Barre d'outils
La nouvelle barre d'outils déplace les outils de design vers le bas de l'éditeur. Cela libère de l'espace de travail sur le plan de travail et introduit de toutes nouvelles capacités d'IA via le nouveau menu d'actions.
Remarque : les fonctionnalités d'IA dans Figma Design seront déployées au cours des prochains mois. En savoir plus →
Actions
Actions est un tout nouvel élément dans la barre d'outils, et a pour but de vous aider à passer de l'imagination à la réalité, plus rapidement. De là, vous pouvez accéder à tous les outils d'IA de Figma, aux actions de productivité courantes, aux plugins et aux widgets, aux composants et à bien d'autres choses encore.
Présentation du Dev Mode
Vous pouvez désormais accéder au Dev Mode dans la barre d'outils, ce qui facilite le passage d'un mode à l'autre dans Figma Design.
Panneau des propriétés
La vue Design du panneau des propriétés est plus facile à utiliser et les propriétés sont désormais regroupées pour correspondre à des workflows plus modernes.
Vous pouvez également redimensionner le panneau des propriétés, ce qui est pratique pour travailler avec des composants dont les noms sont longs.
Labels de propriétés
Nouveauté de l'interface utilisateur 3, vous pouvez désormais activer les labels de propriété pour clarifier le rôle de chaque propriété.
Pour activer les labels de propriété, cliquez sur le menu déroulant situé à côté du pourcentage de zoom de 100 % dans le panneau des propriétés et sélectionnez Property labels (Labels de propriété).
Actions de sélection
Le panneau des propriétés est désormais doté d'une ligne d'en-tête indiquant les actions que vous pouvez effectuer sur un objet sélectionné.
Par exemple, vous pouvez trouver les boutons permettant d'appliquer un masque, de créer un composant ou d'effectuer une opération booléenne — ou ils peuvent être cachés dans le menu More (Plus).
Mise en page
Layout (Mise en page) contient toutes les propriétés liées à la mise en page d'un objet, comme la largeur et la hauteur.
Lorsque vous cliquez sur Use auto layout (Utiliser la mise en page automatique) sur un frame, le label Layout (Mise en page) devient Auto layout (Mise en page automatique) et toutes les propriétés de mise en page automatique deviennent disponibles.
Position
Vous pouvez désormais accéder à toutes les propriétés liées à la position d'un objet sur le plan de travail, y compris les contraintes, sous Position.
Conseil : vous pouvez désormais vous mettre en avant à partir du panneau des propriétés. Lorsque vous entrez dans le mode spotlight, nous réduisons les panneaux de gauche et de droite, ainsi que la barre d'outils, afin que vous ayez plus d'espace pour montrer votre travail
Où la fonctionnalité a-t-elle été déplacée ?
Consultez la liste ci-dessous pour voir tout ce qui a été déplacé et où vous pouvez le trouver.
Old design (Ancien design) | Redesign (Refonte) | |
Ask for edit access (Demander l'accès éditeur)Si vous bénéficiez de l'accès |
||
Absolute position (Position absolue)Absolute position (Position absolue) est désormais Ignore auto layout (Ignorer la mise en page automatique). Lorsque vous ignorez la mise en page automatique, vous pouvez positionner manuellement un objet à l'intérieur d'un cadre de mise en page automatique sans suivre la structure de la mise en page automatique. Pour ignorer la mise en page automatique, sélectionnez un enfant d'un cadre de mise en page automatique, puis cliquez sur dans le panneau des propriétés. |
||
Aligner des objetsLes commandes d'alignement vous permettent d'aligner un objet sur son calque parent ou d'aligner plusieurs objets les uns sur les autres. Sélectionnez plusieurs objets, puis cliquez sur l'un des outils d'alignement sous Position dans le panneau des propriétés. |
||
Mise en page automatiqueLorsque vous utilisez la mise en page automatique sur un cadre, celui-ci s'adapte dynamiquement aux changements de contenu et aux différentes tailles d'écran. Pour utiliser la mise en page automatique sur un cadre, cliquez sur dans la section Layout (Mise en page) du panneau des propriétés. |
||
Valeurs de largeur et de hauteur de la mise en page automatiqueDans les cadre de mise en page automatique, les valeurs de largeur et de hauteur sont désormais combinées avec le comportement de redimensionnement. Vous pouvez trouver ces valeurs :
|
||
Modes de fusionLes modes de fusion définissent la manière dont deux calques doivent se fondre l'un dans l'autre. Pour appliquer un mode de fusion, sélectionnez un objet, cliquez sur à côté de Appearance (Apparence), puis sélectionnez un mode. |
||
Clip content (Cacher le contenu extérieur)L'option Clip content (Cacher le contenu extérieur) permet de masquer les parties d'un calque qui s'étendent au-delà des limites du cadre parent. La case à cocher Clip content (Cacher le contenu extérieur), située sous Layout (Mise en page), permet de choisir de masquer ou d'afficher le contenu. |
||
Propriétés des composantsLes propriétés des composants sont les aspects modifiables d'un composant. Vous pouvez définir quelles parties d'un composant peuvent être modifiées par d'autres personnes en les associant à des propriétés spécifiques. Si un composant a des propriétés disponibles, vous pouvez les trouver sous le nom du frame dans le panneau des propriétés. |
||
ContraintesLes contraintes indiquent à Figma comment les calques doivent se comporter lorsque vous redimensionnez leurs cadres parents. Lorsqu'un calque enfant est sélectionné, l'icône Constraints (Contraintes) apparaît à côté des valeurs de position X et Y dans la section Position du panneau des propriétés. |
||
Corner radius (Rayon d'angle)Corner radius (Rayon d'angle) est une propriété qui permet d'arrondir les angles d'un objet. Avec un objet sélectionné, cliquez sur le champ Corner radius (Rayon d'angle) sous Appearance (Apparence) et modifiez la valeur. Vous pouvez également cliquer sur pour modifier chaque angle individuellement. |
||
Nom du fichier, nom du projet et actions du fichierLe nom d'un fichier, son projet et la liste déroulante des actions sur le fichier ont été déplacés dans le panneau de navigation. |
||
MasqueUtilisez un masque pour montrer des zones spécifiques d'un objet tout en dissimulant le reste. Lorsqu'un objet est sélectionné, cliquez sur Use as mask (Utiliser en tant que masque) pour créer un groupe de masques avec l'objet comme masque. Selon le nombre d'actions disponibles, l'option Use as mask (Utiliser en tant que masque) peut se trouver dans le menu More (Plus). |
||
Modification multipleLa modification multiple vous permet de sélectionner plusieurs calques dans des cadres, des groupes et des sections et de leur appliquer les mêmes modifications en bloc. Cliquez sur dans le panneau des propriétés pour activer la modification multiple. |
||
Plugins et widgetsPour accéder aux plugins et aux widgets, ouvrez Actions dans la barre d'outils, puis cliquez sur l'onglet Plugins & widgets. |
||
Redimensionner la largeur ou la hauteur d'un objet, ou le redimensionner pour qu'il s'adapteModifiez la largeur et la hauteur d'un objet sous Layout (Mise en page). Vous pouvez également redimensionner un cadre pour qu'il s'adapte à ses calques enfants en cliquant sur l'icône . |
||
PivoterLa rotation ou le retournement vous permettent de manipuler des objets en modifiant leur orientation. Lorsqu'un objet est sélectionné, recherchez Position et procédez comme suit :
|
||
Afficher ou masquer un objetPour masquer un objet sur le plan de travail, cliquez sur à côté de Appearance (Apparence). Pour le réafficher, cliquez sur . |
||
TexteText (Texte) s'appelle désormais Typography (Typographie).
|
||
Modes de variableLes modes de variables représentent les différents contextes d'un design. Un mode contient une liste de valeurs pour une variable au sein d'une collection. Si une collection de variables possède plusieurs modes, vous pouvez changer de mode sur les calques et les éléments afin de modifier rapidement les designs en fonction des différents contextes. Tant qu'un objet est lié à une variable avec plusieurs modes, vous pouvez cliquer sur à côté de Appearance (Apparence) pour changer le mode de la variable. |
||
Ajouter une varianteLes variantes permettent de regrouper et d'organiser des composants similaires dans un conteneur unique. Lorsque vous insérez une instance de composant, vous pouvez passer d'une propriété de variante à l'autre de l'ensemble de composants. Pour ajouter une variante, sélectionnez un composant principal, puis cliquez sur Add a variant (Ajouter une variante) à côté du nom du composant dans le panneau des propriétés. |
||
Modifier un chemin vectorielPour modifier un chemin vectoriel, cliquez sur Edit object(Modifier l'objet) en regard de Vector (Vecteur). Si vous sélectionnez plusieurs chemins vectoriels, le menu des opérations booléennes s'affiche. À partir de là, vous pouvez effectuer les opérations suivantes :
|
||
Options de zoom et d'affichageDans le menu Zoom / view options (Zoom / options d'affichage), vous pouvez ajuster vos paramètres de zoom ou configurer des options d'affichage telles que les grilles de mise en page ou les curseurs multijoueurs. |
Puis-je revenir à l'ancien design ?
Si vous êtes bloqué, nous avons fait en sorte qu'il soit facile de revenir au design précédent. À l'intérieur d'un fichier de design, ouvrez le menu d'aide et cliquez sur Go back to previous UI (Revenir à l'interface utilisateur précédente).
Si vous décidez de revenir plus tard, vous pouvez revenir à ce menu et réessayer le nouveau design quand vous le souhaitez.