La puissance de Figma comme outil de conception

Figma est un outil de conception basé sur le cloud qui est similaire à Sketch en termes de fonctionnalités et de fonctionnalités, mais avec de grandes différences qui rendent Figma meilleur pour la collaboration en équipe. Pour ceux qui sont sceptiques quant à de telles affirmations, nous expliquerons comment Figma simplifie le processus de conception et est plus efficace que d'autres programmes pour aider les concepteurs et les équipes à travailler ensemble efficacement.

Regardons de plus près.

Figma fonctionne sur n'importe quelle plate-forme

Figma fonctionne sur n'importe quel système d'exploitation qui exécute un navigateur Web. Les Mac, les PC Windows, les machines Linux et même les Chromebooks peuvent être utilisés avec Figma. C'est le seul outil de conception de ce type qui le fait, et dans les magasins qui utilisent du matériel exécutant différents systèmes d'exploitation, tout le monde peut toujours partager, ouvrir et modifier des fichiers Figma.

Dans de nombreuses organisations, les concepteurs utilisent des Mac et les développeurs utilisent des PC Windows. Figma aide à rassembler ces groupes. La nature universelle de Figma évite également l'ennui de PNG-pong (où les images mises à jour sont échangées entre les disciplines de l'équipe de conception). Dans Figma, il n'y a pas besoin d'un mécanisme de médiation pour rendre le travail de conception accessible à tous.

La collaboration dans Figma est simple et familière

Comme Figma est basé sur un navigateur, les équipes peuvent collaborer comme elles le feraient dans Google Docs. Les personnes qui consultent et modifient un fichier sont affichées en haut de l'application sous forme d'avatars circulaires. Chaque personne a également un curseur nommé, ce qui facilite le suivi de qui fait quoi. Cliquer sur l'avatar de quelqu'un d'autre zoome sur ce qu'il visualise à ce moment-là.

La collaboration de fichiers en temps réel permet d'atténuer la « dérive de conception », définie comme une mauvaise interprétation ou un écart par rapport à une conception convenue. La dérive de conception se produit généralement lorsqu'une idée est conçue et rapidement mise en œuvre alors qu'un projet est en cours. Malheureusement, cela conduit souvent à s'écarter de la conception établie, provoquant des frictions et des retouches.

À l'aide de Figma, un responsable de la conception peut vérifier ce que l'équipe conçoit en temps réel en ouvrant simplement un fichier partagé. Si un concepteur interprète de manière erronée le brief ou l'histoire de l'utilisateur, cette fonctionnalité permet au responsable de la conception d'intervenir, de corriger la trajectoire et d'économiser d'innombrables heures qui auraient autrement été perdues. (En comparaison, les équipes utilisant Sketch n'ont aucun moyen immédiat de savoir si les concepteurs s'égarent.)

Remarque : certains concepteurs n'aiment pas être « espionnés » lorsqu'ils travaillent, c'est donc au responsable de la conception d'expliquer les avantages. En général, la plupart des concepteurs voient rapidement la valeur d'une telle fonctionnalité et s'adaptent facilement au travail dans un environnement partagé.

Figma utilise Slack pour la communication d'équipe

Figma utilise Slack comme canal de communication. Lorsqu'une chaîne Figma est créée dans Slack, tous les commentaires ou modifications de conception effectués dans Figma sont "relâchés" à l'équipe. Cette fonctionnalité est cruciale lors de la conception en direct, car les modifications apportées à un fichier Figma mettront à jour toutes les autres instances où le fichier est intégré (un casse-tête potentiel pour les développeurs). Les modifications apportées à une maquette, justifiées ou non, sont immédiatement vérifiées et le canal de rétroaction est en direct.

Le partage Figma est simple et flexible

Figma permet également le partage basé sur les autorisations de n'importe quel fichier, page ou cadre (appelé plan de travail dans d'autres outils de conception). Lorsqu'un lien de partage est créé vers un cadre sur une page, la personne qui clique sur ce lien ouvre une version de navigateur de Figma et une vue agrandie du cadre est chargée.

Cette forme de partage sélectif, du fichier à l'image, permet aux concepteurs, propriétaires de produits et développeurs de partager exactement ce qui est nécessaire dans les outils de suivi des bogues et les logiciels communautaires comme Confluence ou SharePoint.

Les fichiers Figma intégrés fournissent une mise à jour en temps réel

Figma partage également des extraits de code d'intégration en direct pour coller un iFrame dans des outils tiers. Par exemple, si Confluence est utilisé pour afficher des fichiers de maquette intégrés, ces fichiers ne sont pas "mis à jour" en enregistrant un fichier Figma - ces fichiers intégrés SONT le fichier Figma.

Si une modification est apportée à la maquette par n'importe qui dans Figma, cette modification peut être vue en direct dans la maquette Confluence intégrée. (Vous pouvez en savoir plus sur l'intégration de Figma et Confluence ici.)

L'effet de cette fonctionnalité sur le processus UX est illustré dans le schéma suivant :

Avant Figma, plusieurs autres outils étaient utilisés pour faciliter l'échange de maquettes de conception et de mises à jour. Le cycle d'itération consistait en une série de mises à jour de fichiers dans les deux sens, afin que les équipes puissent revoir et mettre en œuvre la conception actuelle.

Après Figma, les outils tiers ne sont plus nécessaires (mais peuvent être utilisés si désiré). Étant donné que Figma gère les fonctionnalités des outils tiers décrits précédemment, il n'y a qu'une seule étape dans le processus : passer des croquis à Figma et tous les groupes disposent des dernières maquettes. Il n'y a pas de « transfert » au sens strict du terme.

Figma est idéal pour la révision de la conception

Figma prend en charge les commentaires intégrés à l'application dans les modes de conception et de prototypage, et le fil de commentaires est suivi dans Slack et/ou par e-mail. Il n'est pas nécessaire de publier des fichiers PNG ou d'effectuer des mises à jour constantes pour obtenir les commentaires d'une équipe utilisant un outil tiers comme InVision ou Marvel.

Lors des revues de conception, les concepteurs de l'équipe peuvent discuter de leur travail sur un grand écran, enregistrer des commentaires et résoudre des problèmes, le tout dans Figma. Cette forme de rétroaction en direct n'est pas possible avec Sketch, qui nécessite un téléchargement vers un service cloud pour obtenir la contribution de l'équipe.

Le transfert de développeur est facilité à l'aide de Figma

Figma affiche des extraits de code sur n'importe quel cadre ou objet sélectionné dans les formats CSS, iOS ou Android que les développeurs peuvent utiliser lors de la révision d'un fichier de conception. Les composants de conception peuvent être inspectés par n'importe quel développeur dans n'importe quel fichier qu'il peut consulter. Il n'est pas nécessaire d'utiliser un outil tiers pour obtenir les informations. Même ainsi, Figma a une intégration complète avec Zeplin si les équipes veulent faire plus que de simples mesures et affichage CSS.

Les fichiers du projet Figma résident au même endroit - en ligne

Figma étant une application en ligne, elle gère l'organisation des fichiers en affichant les projets et leurs fichiers dans une vue dédiée. Figma prend également en charge plusieurs pages par fichier, comme Sketch, afin que les équipes Agile puissent organiser leurs projets de manière logique :

• Créez un projet pour le thème de fonctionnalité .
• Créez un fichier pour une fonctionnalité épique ou de grande taille.
• Créez des pages dans ce fichier pour chaque user story .

Il ne s'agit que d'une méthode d'organisation des fichiers qui pourrait être rendue plus ou moins granulaire en fonction des exigences du processus.

Les API Figma fournissent l'intégration d'outils tiers

Figma dispose désormais d'API de développeur pour permettre une véritable intégration avec n'importe quelle application basée sur un navigateur. Les entreprises l'utilisent pour intégrer des affichages en temps réel des fichiers de conception dans leurs applications. Par exemple, Uber dispose de grands écrans affichant des fichiers de conception « en direct » autour de leur entreprise. Les conceptions sont partagées et les commentaires de tous les membres de l'entreprise sont les bienvenus.

Le logiciel JIRA d'Atlassian a implémenté un module complémentaire Figma afin que les propriétaires de produits, les développeurs et les ingénieurs qualité visualisent toujours la dernière version de toute maquette des concepteurs.

De plus, l'API de Figma promet de répondre aux demandes des clients concernant les plugins tiers et les améliorations de fonctionnalités déjà fournies par Sketch.

La gestion des versions des fichiers est automatique ou à la demande

Toute incertitude entourant la mise à jour des fichiers en direct est encore atténuée par le système de gestion des versions intégré de Figma. À tout moment, un concepteur peut créer une version nommée et une description d'un fichier Figma ; cela peut être fait immédiatement après que les modifications convenues ont été apportées à une conception.

Le fichier live dans l'environnement partagé ne sera pas affecté jusqu'à ce que des modifications soient délibérément appliquées à la version d'origine. Il est également possible de restaurer toutes les versions enregistrées automatiquement pour créer un doublon ou écraser l'original.

Le prototypage dans Figma est simple et intuitif

Alors que Sketch a récemment ajouté un plan de travail au prototypage de plan de travail, Figma est allé plus loin en fournissant des transitions entre les cadres. La fonction de prototypage simple de Figma élimine le besoin d'un autre outil qui effectue le prototypage de style diaporama, tel que InVision ou Marvel. Lorsque tout ce qui est nécessaire est une présentation simple avec des transitions, il n'est pas nécessaire d'exporter vers des outils de révision.

Les prototypes Figma peuvent être distribués comme les fichiers de conception Figma ; toute personne disposant d'une autorisation de lien peut afficher et commenter un prototype, et encore une fois, ces commentaires sont capturés dans le panneau de commentaires de l'outil et enregistrés dans Slack. Les développeurs peuvent voir le flux de travail de conception, laisser des @messages directs aux concepteurs et obtenir des mesures et des attributs CSS depuis l'intérieur du prototype.

Les bibliothèques d'équipe de Figma sont idéales pour les systèmes de conception

Les systèmes de conception sont devenus une nécessité pour de nombreuses entreprises, et il existe un besoin de composants (symboles dans Sketch et Illustrator) réutilisables, évolutifs et « tokenisés » pour une utilisation dans les bibliothèques de modèles disponibles pour les concepteurs UX et les développeurs frontaux.

L'expression souvent utilisée «source unique de vérité» convient ici - une fois qu'une bibliothèque d'équipe Figma est créée, toute personne ayant accès à un projet peut utiliser des instances des composants dans ses conceptions et être certaine qu'elle travaille avec les dernières versions.

L'approche de Figma en matière de bibliothèques de composants est simple et facile à gérer. Les concepteurs peuvent créer des fichiers remplis de composants ou utiliser des composants sur la page pour organiser une bibliothèque de modèles. Chaque cadre d'une page Figma devient la section organisationnelle de la bibliothèque de l'équipe (il n'est pas nécessaire de créer des hiérarchies\comme\ceci).

Une façon d'organiser les bibliothèques est d'avoir un projet dédié uniquement aux composants. Les fichiers de ce projet peuvent être organisés selon les besoins et les pages de ces fichiers peuvent être organisées en conséquence.

Figma est conçu pour améliorer le travail d'équipe de conception

L'utilisation de Figma pendant une durée quelconque démontrera les avantages de cet outil de collaboration en direct. Il permet aux équipes de rester concentrées sur la tâche et encourage la divulgation complète, essentielle lors de la création d'un système de conception pour une variété de disciplines. Figma est facile à utiliser pour n'importe qui sur n'importe quelle plate-forme et permet aux équipes de partager rapidement leur travail et leurs bibliothèques.

Les experts en conception qui utilisent Figma après être passés de Sketch (les fichiers Sketch peuvent être importés avec parité dans Figma) ne sont pas déçus :

… cela transforme complètement la façon dont vous pouvez travailler avec vos collègues et clients – Rationalisez la conception collaborative avec Figma

Figma a réuni le meilleur de tout dans le monde des outils de conception d'interface utilisateur au cours des dernières années - Pourquoi votre équipe de conception devrait envisager de passer à Figma

Depuis un an, j'utilise Figma pour mon processus de conception UI/UX et cela m'a fait économiser des heures de travail. Cela a vraiment transformé mon flux de travail de conception - Comment rationaliser votre flux de travail UI/UX avec Figma

Mon temps passé à Figma est généralement la partie la plus agréable et la plus productive de ma journée - Figma transforme l'ensemble de mon flux de travail, et c'est génial !

• • •

Lecture complémentaire :

• Maîtrisez votre métier avec ces meilleurs outils UX
• Rationalisez la conception collaborative avec Figma
• Utilisez Craft by InVision pour rationaliser la collaboration en équipe
• Mort au Wireframe. Directement en Haute-Fidélité !
• Devenez un designer de classe mondiale en faisant du globe votre bureau