Aller directement au contenu

Figma, les dernières fonctionnalités

09/07/2024
0

Figma, les dernières fonctionnalités

Figma Donuts 3D Design – Duxica – Dribbble

Chaque mise à jour de Figma fait apparaître des nouveautés, des améliorations et de nouvelles fonctionnalités, en voici quelques-unes qui ont marqué les récentes évolutions de la plateforme.

Les nouveautés et les nouvelles fonctionnalités de Figma

Figma a baptisé ses innovations, les « Little Big Updates ». Ce sont parfois des petites améliorations de points importants ou alors de grandes améliorations de points de détails, mais qui revêtent toutes une grande importance pour les designers qui les utilisent quotidiennement pour leur UX Design.

Avez-vous vu le programme de notre formation Figma ?

Alignement simplifié des instances

Les outils d’alignement vous permettent d’organiser les calques sur le canevas les uns par rapport aux autres. Figma déterminera l’alignement de votre calque en fonction de votre sélection spécifique.

1 – Sélectionnez un objet ou un calque : Figma alignera le calque sur son parent. Celui-ci peut être un groupe, un cadre ou le cadre contenant un composant.

2 – Sélectionnez plusieurs calques : Figma alignera les calques les uns par rapport aux autres, ou par rapport au cadre parent, ou par rapport aux calques sélectionnés dans une instance.

N’oubliez pas d’utiliser les paramètres d’accrochage :

Lors du redimensionnement d’un objet, du déplacement des calques ou des points vectoriels, utilisez les paramètres d’accrochage pour les aligner harmonieusement avec d’autres éléments sur le canevas. Un guide rouge apparaît sur le canevas en tant qu’indicateur visuel.

Mise à jour des bibliothèques

Il est maintenant possible de procéder à la mise à jour de la bibliothèque Figma à un seul style ou à une seule instance et de la prévisualiser.

Lorsque des actualisations sont faites pour un style, un composant, ou une variable sur la page présente, une notification apparaît dans le coin inférieur droit de votre fichier. Appuyez sur “Réviser” pour déployer l’onglet des mises à jour de la bibliothèque et “accepter” ou “refuser les modifications”.

Figma Team Library Tutorial: A Comprehensive Guide to Setting Up, Connecting, and Updating Libraries – moonlearning

Importation SVG améliorée

L’importation de SVG a été améliorée ainsi que la prise en charge des chemins de clip. Le problème lié aux segments de chemin est donc corrigé.

Déplacer des projets vers d’autres équipes

Clic droit sur le projet, puis choisir l’équipe vers qui l’envoyer. Cette nouvelle fonctionnalité autorise une réorganisation et un transfert rapide des fichiers.

Attention, si le projet vers lequel vous souhaitez déplacer le fichier ne s’affiche pas, il est possible que vous n’ayez pas une autorisation « peut éditer » dans le projet de destination.

Liens de prototypage dans le même onglet

Il est maintenant possible de créer plusieurs interactions en une seule fois. Les liens de prototypages s’ouvrent dans un seul onglet en provenance d’autres pages. Toutes les personnes disposant d’un accès éditeur peuvent créer des prototypes. Le mode présentation est toujours valide pour les personnes disposant d’un accès lecteur.

Figma Tutorial: Prototyping – Figma

Nouvelles actions du trackpad dans l’application FigJam

Nouvelles animations du trackpad dans l’application FigJam qui prend en charge les haptiques du trackpad. (Le retour haptique est une réponse physique à une action virtuelle, comme une petite vibration ou une autre sensation tactile.)

Sur l’application de bureau Figma, vous pouvez activer l’haptique du trackpad pour recevoir des commentaires sur des actions telles que la création de prototypes de connexions dans Figma ou l’utilisation d’émoticônes et de high-fives dans FigJam.

Pour activer le retour haptique :

  • Depuis n’importe quel fichier, cliquez sur le menu déroulant Figma.
  • Sélectionnez Préférences.
  • Activez le retour haptique du trackpad.

Figma 2023 Updates | Dev Mode, Variables, Logic and more – Jesse Showalter

Possibilité de faire commencer les listes de chiffres par autre chose que 1

Les listes numérotées initialement formatées « 1, 2, 3,… » sont maintenant personnalisables. Il est donc possible d’ajouter le préfixe de votre choix ce qui est un avantage pour les listes de catalogues, l’organisation des tâches ou encore l’affichage de prix sous forme de liste.

Placer une ponctuation à l’extérieur de la zone de texte

Indéniablement un plus de mise en page pour la lisibilité et le design des pages. Guillemets de citation, point d’exclamation ou d’interrogations peuvent venir souligner une intention, attirer l’utilisateur sur un point précis. La ponctuation peut se faire dans une zone dédiée et donc avec une taille indépendante du texte, ce qui n’est pas possible en gardant la ponctuation à l’intérieur de la zone de texte.

Dev Mode

Dev Mode de Figma connecte les outils et composants de code au fichier de design.

Les principales fonctionnalités de Dev Mode :

  • L’inspection pour examiner les propriétés CSS par des codes couleur des éléments de conception ;
  • Le marquage « Prêt pour le développement » indique aux développeurs quelles sont les parties de la conception prêtes à être codées.
  • Le comparatif des versions permet de visualiser les modifications apportées à une conception en mettant en exergue leurs impacts sur le code.
  • Avec le code snippets, vous copiez des extraits de code HTML et CSS directement à partir de la conception ;
  • Une plus grande simplicité d’intégration avec Visual Studio Code qui permet d’inspecter les conceptions directement dans l’environnement de développement.

Dev Mode s’adapte à plusieurs outils, processus et workflows. Vous pouvez donc relier le design et le code avec Storybook, assurer l’accessibilité avec Stark, suivre le projet avec des gestionnaires tels que Jira, Linear et GitHub. Des plug-ins vous permettent de compléter ces fonctionnalités afin que Figma s’adapte à vos méthodes de travail.

Avec Dev Mode, pour rester en concordance avec votre design system, il faut construire des designs qui utilisent le code des composants de la bibliothèque, pour cela, Code Snippet Editor offre la possibilité de développer vos propres plug-ins codegen.

Il reste également des solutions efficaces pour les besoins de codage. Des plug-ins comme Anima ou Figma to Code offrent la possibilité de produire du code dans un langage spécifique (HTML, CSS, React, Tailwindp) sans quitter l’écosystème Figma.

Dans les nouvelles fonctionnalités, la modale de comparaison a été revu. Il est maintenant possible de comparer :

  • 2 frames et voir les différences entre deux itérations.
  • Plusieurs composants détachés ou des variantes du composant principal.
  • Le code, pour faire apparaître les différences dans le design et dans le code en parallèle.

Figma tutorial: Intro to Dev Mode – Figma

Commentaires groupables et envoyés en notifications

Les notifications aident à garder un œil sur ce qui se passe sur son compte Figma. Elles apparaissent par défaut dans le navigateur de fichiers, mais vous pouvez également activer les notifications de bureau et par e-mail. Les notifications associées aux commentaires sont alors regroupées et envoyées automatiquement toutes les 30 minutes.

Bon à savoir : vous pouvez également activer ou désactiver les notifications par e-mail pour chaque fichier. La désactivation des notifications par e-mail ne désactive pas tous les e-mails de notification Figma. Les e-mails concernant la gestion de votre compte, la facturation et les paramètres administrateurs continuent de vous parvenir.

La mise en forme des commentaires

Une barre d’outils apparaît lorsqu’une note est sélectionnée offrant les fonctionnalités de couleurs, taille, surlignage, gras ce qui permet de personnaliser et de souligner des informations. Votre nom apparaît en bas. Le connecteur fait apparaître des tracés entre les notes, les personnes ou avec des objets ou différentes parties d’un objet.

4 types de variables

Chaque variable (panneau de droite, où l’on trouve l’onglet « Local variables ».

  1. Les variables « Couleur » pour définir des palettes chromatiques utilisées sur le projet.‍
  2. Les variables « Nombre » (Number) pour la définition des espaces, des rayons, des propriétés des auto-layout, etc.
  3. Les variables « Texte » (String) sont utiles lors de traductions, ils permettent de passer d’une langue à une autre d’un simple clic, ce qui rend transparent une création en plusieurs langues.
  4. Les variables « Boolean » offrent la possibilité d’ajouter une visibilité conditionnelle qui module l’affichage d’éléments auxquels on attribue des conditions particulières
  5.  La visibilité conditionnelle, permettant ainsi de moduler l’affichage de certains éléments en fonction de conditions spécifiques. On peut ainsi définir quelle partie d’un composant peut être modifiée et par qui pour contrôler des calques (cacher ou afficher), permuter une instance, modifier des chaînes de texte.

An Introduction to Boolean Variables in Figma – UI Collective

Affichage des effets de flou sur les prototypages

Les effets de flou d’arrière-plan sur les cadres superposés (overlay) s’affichent parfaitement sur les prototypes. Jusqu’à maintenant, si l’on ajoutait une superposition avec des effets de flou d’arrière-plan sur une image ou un graphisme, l’ensemble de la composition devenait flou. Le débogage permet aujourd’hui d’afficher correctement. Le système prend en charge chaque overlay comme un objet indépendant.

En conclusion, d’année en année Figma évolue au service des UX Designers. Son imposant succès tient à l’écoute des équipes de conceptions qui prennent en compte les désirs et les remontées d’information de ses utilisateurs. Un comportement exemplaire dans notre domaine.

FIGMA : nouveautés et mise à jour 2023 – Pickbeam Replay

Lire aussi :

Pour aller plus loin, venez suivre notre formation Figma !

Commentaire