À travers les pixels de l'innovation : Retour sur l'année 2023 de Figma

L'année débute avec éclat dans le monde du design alors que Figma lance sa première série de mises à jour tant attendues, baptisées "Little Big Updates". 


‍

Ces annonces seront initiées quelques semaines seulement après le déploiement du Creator Tool Fund, autrement dit "l’app store" de Figma.

‍

Cette première session des “Little Big Updates” en mars 2023 marque d’ores et déjà une nouvelle ère passionnante pour les utilisateurs de la plateforme de conception collaborative. 


‍

Figma, reconnu pour son engagement constant envers l'innovation et l'amélioration continue, dévoile avec enthousiasme une série de mises à jour soigneusement élaborées qui promettent de transformer la manière dont les designers interagissent avec l'outil. Ces petites mises à jour, bien que discrètes à première vue, sont destinées à avoir un impact significatif sur le flux de travail quotidien des créatifs et plus largement des équipes produits, démontrant ainsi l'engagement de Figma à rester à la pointe de l'industrie du design en fournissant des fonctionnalités toujours plus adaptées aux besoins changeants de sa communauté mondiale d'utilisateurs. Dans cette première partie, nous explorons les 32 améliorations apportées par Figma au cours de cette première session de l'année, mettant en lumière les petits détails qui font une grande différence dans l'expérience de conception.

‍

1. Affichage anticipé des combinaisons des calques sur la toile.
2. Prise en charge du masque de luminance qui devient efficace
3. Sélection multiple lors d'une recherche, offrant la possibilité de remplacer ou de modifier
4. Diminution de la distance entre la ligne de base et la hauteur des boîtes de texte
5. Les listes de chiffres ne sont plus systématiquement initiées par le numéro "1"
6. Possibilité de déplacer la ponctuation en dehors de la zone de texte.
7. Recherche de fichiers dans un nouvel onglet de l'application
8. Affichage préalable des fichiers en survolant les onglets
9. Nouvelles fonctionnalités d'animation du trackpad dans l'application FigJam
10. Davantage de possibilité de mise en forme des commentaires
11. Regroupement par mail des notifications liées aux commentaires
12. Possibilité de transférer des projets vers d'autres équipes
13. Fonctionnalités des propriétés de composants activés par défaut
14. Propriétés de composants privilégiés activés par défaut
15. Amélioration de la fonction de redimensionnement d'images
16. Substitution ciblée du matériau de remplissage
17. Simplification du positionnement d'image
18. Simplification des alignements des instances
19. Élimination rapide des règles et des guides
20. Mise à jour des bibliothèques
21. Amélioration des importations en SVG
22. Sortie d’API Fetch pour les plugins
23. Création d'images pour les plugins grâce à l’API createImageAsync
24. Amélioration du widget Photobooth
25. Fonction de remplissage en transparence dans FigJam
26. Attribution couleur par défaut des formes FigJam
27. Création d’effets d'animation afin de distinguer les stickies des formes FigJam
28. Animation sticky en haut des éléments lors du défilement
29. Aperçu dans des archives de Frame
30. Optimisation de la visualisation des effets de flou
31. Liens de prototypage s’ouvrant dans le même onglet
32. Élaboration simultanée de multiples interactions de prototypage
    
    ‍
    ‍

La Config 2023 s'est imposée cette année plus que jamais comme l'événement incontournable pour tous les passionnés de design et d'innovation. Bien évidemment, organisé par Figma, le leader incontesté dans le domaine des outils de conception, cet événement annuel influence incontestablement la façon dont nous abordons le design. En tant que fidèles utilisatrices de Figma, nous sommes ravies de revenir décrypter trois points forts de cette édition 2023.

‍

La manipulation des composants dans Figma

Dans le monde du design sur Figma, la manipulation des composants repose sur la compréhension approfondie de leurs propriétés. Elles jouent un rôle essentiel dans la personnalisation et la gestion des éléments. Trois types de propriétés essentielles sont à prendre en compte.

‍

Tout d'abord, pour le texte, la création de la propriété texte s'effectue facilement depuis le panneau "Propriétés". Il suffit par la suite de sélectionner l'élément texte, puis dans le panneau "Texte" de cliquer sur l'icône "Layers" et choisir la propriété précédemment créée. Une autre alternative consiste à créer la propriété directement depuis le texte souhaité. Pour ce faire, sélectionnez le texte puis à aller à "Texte / Icon Layers / Create property".

‍

De même, l'instance swap facilite le passage d'une instance à une autre. Par exemple, en modifiant une icône en attachant directement la bibliothèque d'icônes au composant. Pour cela, créez la propriété instance swap depuis le panneau "Propriétés" et choisissez l'instance souhaitée. Associez toujours la propriété à son élément en sélectionnant l'élément, puis en cliquant sur l'icône "Layers" et en sélectionnant la propriété créée. Comme pour le texte, il est aussi possible de créer l’instance swap directement depuis l’élément souhaité.

‍

Enfin, la propriété booléenne offre la possibilité d'ajouter une visibilité conditionnelle, avec deux choix : Vrai / Faux. Créez la propriété booléenne depuis le panneau "Properties" et associez-la à l'élément en sélectionnant celui-ci, puis en cliquant sur l'icône "Layers" et en sélectionnant la propriété créée. Dans la même dynamique que les cas précédents, il est possible créer la propriété directement depuis l’élément souhaité

‍

Les variables Figma

La gestion des variables constitue un élément crucial dans le processus de conception d'un projet. Pour accéder à l'ensemble des variables du projet, il suffit de se rendre dans le panneau de droite, où l'on trouvera l'entrée "Local variables" située au même emplacement que les styles. Cet espace sert de hub central pour la création, l'édition et l'organisation de toutes les variables essentielles.

‍

Quatre types de variables sont disponibles, chacun répondant à des besoins spécifiques. 


‍

1. Les variables de type Couleur permettent de définir des palettes chromatiques en fonction des besoins du projet.

   ‍
2. Les variables de type Nombre (Number) sont dédiées à la définition des espaces, des rayons, des propriétés des auto-layout, et d'autres paramètres numériques.
   ‍
3. Les variables de type Texte (String) ne remplacent pas les styles tels que H1, H2, H3, mais sont utilisées pour les propriétés textuelles et peuvent s'avérer utiles lors de traductions, facilitant ainsi le passage d'une langue à une autre en un simple clic. Par exemple, cela pourrait être particulièrement pratique pour basculer d'une version française à une version anglaise du projet. 

   ‍
4. Enfin, les variables de type Boolean offrent la possibilité d'ajouter de la visibilité conditionnelle, permettant ainsi de moduler l'affichage de certains éléments en fonction de conditions spécifiques. La centralisation de ces variables dans le panneau "Variables locals" simplifie grandement la gestion et la coordination des aspects variés du projet, contribuant ainsi à une expérience de conception plus fluide et efficace.

‍

Grâce à cette fonctionnalité, les concepteurs ont la flexibilité nécessaire pour ajuster rapidement et précisément différents aspects du projet, améliorant ainsi l'efficacité du processus de conception et garantissant une cohérence globale dans l'ensemble de l'interface. En consolidant la gestion des variables dans un emplacement centralisé, le panneau "Variables locales" offre une vision d'ensemble, permettant aux membres de l'équipe de travailler de manière plus collaborative et cohérente.

‍

Cette approche systématique contribue à réduire les risques d'erreurs, tout en accélérant le processus de développement. En outre, la flexibilité accordée par les variables de différents types offre une adaptabilité accrue, essentielle pour répondre aux exigences évolutives du projet. 
La rationalisation de la gestion des variables n'améliore pas seulement l'efficacité, mais permet surtout d’établir une communication fiable et commune entre designers et développeurs.

‍

La gestion du responsive dans Figma

En design, la mise en page responsive est devenue une composante incontournable pour garantir une expérience utilisateur fluide sur divers appareils tels que les ordinateurs portables ou non, les tablettes et les smartphones. Sur la plateforme de conception Figma, l'utilisation du responsive design est facilitée grâce à la fonctionnalité Bento/layout responsive.
Un moyen efficace d'appliquer cette approche consiste à créer un auto layout (raccourci : Shift + A) autour d'un élément spécifique, par exemple les cartes. 
En activant la fonction "wrap", vous permettez à l'agencement de s'adapter de manière dynamique en fonction de l'espace disponible. Pour garantir un design parfaitement réactif, il est crucial de maîtriser les différentes fonctionnalités à la création de composants. Prenez l'exemple d'une carte : Assurez-vous du comportement horizontal en utilisant "Fill containers" pour que la carte s'étende correctement. De plus, fixez les paramètres de largeur minimum et maximum via la fonction "width" afin de maintenir la cohérence visuelle sur toutes les plateformes. Cette approche proactive du responsive design sur Figma contribue à créer des interfaces utilisateur harmonieuses et fonctionnelles, déterminant de la diversité des appareils utilisés par les utilisateurs finaux. Elle se rapproche également de la vision des développeurs, facilitant les échanges.

‍

En conclusion, la Config 2023 s’est véritablement démarquée par ses atouts majeurs qui redéfinissent les normes de conception. Sa puissance de collaboration en temps réel offre une expérience sans précédent, permettant aux équipes de travailler de manière synchronisée et efficace. De plus, la richesse des fonctionnalités d'automatisation intégrées simplifie les processus complexes, libérant ainsi le potentiel créatif de ses utilisateurs.

‍

Le Dev mode dans Figma

Figma va encore plus loin dans la facilitation du travail et de la collaboration Designers / développeurs. 
L’objectif est de mettre le design et le développement au même niveau, en permettant aux équipes de travailler ensemble sur un même projet. Nous approfondissons ce point dans un article dédié : Le Dev mode dans Figma, ce qu'il faut savoir.

‍

‍

Figma maintient son rythme effréné et démontre son engagement constant envers l'innovation avec l'annonce début septembre de la deuxième session des Little Big Updates. Cette initiative survient à peine trois mois après l'impact majeur de la Config 2023, et prouve indéniablement la détermination de Figma à évoluer rapidement et à offrir des améliorations significatives à ses utilisateurs. La rapidité avec laquelle ces mises à jour sont déployées témoigne non seulement de la volonté de Figma de rester à l'avant-garde de l'évolution des besoins des concepteurs, mais également son souhait profond d’offrir une expérience toujours plus enrichissante.

‍

Cette édition a une fois de plus captivé l'attention des utilisateurs et des adeptes du célèbre outil de conception collaborative en apportant 42 améliorations significatives à la plateforme. Figma offre une fois de plus à l’ensemble des équipes produits une panoplie de fonctionnalités innovantes enrichissant leur expérience de conception.

‍

1. Ajout de filtres dans le panel des Assets
2. Amélioration des miniatures dans le panel des Assets
3. Visualisation des noms des composants et de leurs variants au survols des Assets
4. Visualisation des composants et de leurs variants dans une modale depuis le panel des Assets
5. Possibilité d’intégrer des fichiers vidéos .MP4 et .MOV à FigJam
6. Amélioration du contenu intégré FigJam
7. Amélioration du widget FigJam Photo Booth
8. Ajout de 300 emojis utilisables dans les commentaires, textes et plus
9. Possibilité de rejoindre en un clic une présentation Spotlight
10. Possibilité de sélectionner et copier dans l'historique des versions
11. Possibilité de copier l'URL d'un fichier via les actions rapides/raccourcis clavier
12. Amélioration du processus de collage de liens
13. Amélioration des paramètres d'exportation
14. Affichage des mesures des côtés décalés grâce à la touche option
15. Amélioration de la suppression d’effet
16. Amélioration de l’indicateur Min/Max d’auto layout
17. Ligatures des flèches avant et arrière dans les titres des sections et frames
18. Ajout de deux modes de fusion : plus sombre et plus clair
19. Possibilité d’ajuster les valeurs du color picker en maintenant la touche “Option”
20. Valeurs alpha désormais appliquées à l’opacité de la couleur
21. Ajout de contours sur chaque glyphe séparément au clic sur “outline stroke”
22. Aperçu des polices sur le canevas sans avoir à les sélectionner
23. Correction automatique des fautes de frappe avec la touche Tab
24. Restitution correcte de la bibliothèque d'iconographie d'Apple et SF Symbols
25. Ajout d’une cible d'accrochage aux zones de texte
26. Possibilité de redimensionner de manière instantané du conteneur
27. Possibilité de sélectionner les textes en mode view-only
28. Mise à niveau de la mise en forme du texte
29. Possibilité de visualiser les propriétés des composants depuis la modale du composant depuis le composant actif du panneau Assets (possible également en mode dev)
30. Possibilité d’inclure des images et des GIF dans les commentaires
31. Possibilité de réagir aux commentaires avec n'importe quel emoji
32. Possibilité de demander à un collaborateur d’utiliser “spotlight me”
33. Teasing d’une fonctionnalité de Mind mapping dans FigJam
34. Amélioration de l’expérience utilisateur sur l’application mobile
35. Améliorations du widget Asana
36. Améliorations du widget Jira
37. Correction du bug présent avec l’interaction “mouse enter” et “mouse leave”
38. Amélioration du positionnement de la modale d’édition de prototypage
39. Possibilité de masquer la modale d'édition de prototypage en appuyant sur Shift
40. Ajout d’un nouvel indicateur inique la présence d’actions multiples
41. Possibilité de visualiser n’importe quelle frame dans le preview d’un prototype en cliquant dessus
42. Amélioration du sticky scrolling

En ce dernier mois de l'année, Figma met l'accent sur les variables de type Nombre (Number), offrant ainsi de nouvelles fonctionnalités qui élargissent encore considérablement les possibilités de conception, pour le plus grand bonheur des utilisateurs.

‍

Tout d'abord, les variables de type Nombre (Number) sont désormais applicables aux effets tels que les ombres portées, les flous, etc. Cette évolution permet une personnalisation fine des effets pour chaque mode, offrant une flexibilité accrue.

‍

Les contours (strokes) font également leur entrée dans l'univers des variables, offrant une précision accrue dans la création de design tokens. Chez Maemi-studio, cette nouvelle fonctionnalité a été directement intégrée à nos bibliothèques d'icônes, assurant ainsi une cohérence totale pour toutes les parties intervenant sur le fichier.

‍

En prime, l'opacité fait son apparition, mettant fin à la fâcheuse pratique de détacher l'alias et d'insérer la valeur en pourcentage dans un code HEX, source potentielle de confusion et de manque de cohérence au fil des maquettes. À présent, il est possible de configurer l'opacité de manière propre et structurée.

‍

Sans oublier les améliorations apportées aux grids et layouts, offrant la possibilité de créer différents layouts pour divers devices (modes) en utilisant une seule variable.

‍

Figma a aussi réservé une place aux variables de type Texte (String) avec l'introduction des instances imbriquées (nested instance), permettant d'afficher des variantes spécifiques d'un composant pour chaque mode.

En conclusion, l'année 2023 a été une période remarquable pour Figma, marquée par deux sessions réussies des "Little Big Updates" et la tenue de la Config 2023. La première session a apporté 32 améliorations significatives, modifiant subtilement mais plus profondément l'expérience des utilisateurs dans la conception collaborative.

‍

Ces mises à jour démontrent l'engagement constant de Figma envers l'innovation, s'efforçant de rester à la pointe de l'industrie du design.

‍

La Config 2023 a confirmé son statut d'événement incontournable, offrant une plongée approfondie dans la manipulation des composants, la gestion des variables et la mise en page responsive sur la plateforme Figma. La centralisation des variables dans le panneau "Variables locales" et le Mode Dev ont été appréciés pour leur contribution à une expérience de conception plus fluide et cohérente, renforçant la communication entre designers et développeurs.

‍

La deuxième session des "Little Big Updates", déployée rapidement après la Config 2023, a ajouté 42 améliorations significatives à la plateforme. Ces mises à jour, variées et nombreuses, ont enrichi l'expérience de conception, couvrant des aspects tels que la gestion des actifs, l'intégration de fichiers vidéo, l'amélioration des widgets FigJam, et bien d'autres.

‍

La rapidité avec laquelle Figma déploie ces mises à jour témoigne de sa volonté constante de répondre aux besoins changeants des concepteurs et de fournir une expérience utilisateur toujours plus enrichissante.

‍

En somme, Figma continue de définir de nouvelles normes dans le domaine du design collaboratif, offrant des fonctionnalités innovantes, une collaboration en temps réel et des outils avancés pour simplifier les processus complexes de conception.