Mini tutoriel - Tirer parti des fonctionnalités de Figma pour l'ensemble du processus de conception

Le monde des outils de conception émergents est incroyablement passionnant. De nouveaux programmes prometteurs sont lancés en succession rapide, mais il y en a un en particulier qui est lentement devenu le meilleur choix pour les équipes de conception plus grandes et principalement distribuées.

Figma a le potentiel de prendre en charge l'ensemble du processus de conception de bout en bout. Les premières esquisses, la collecte de commentaires, la collaboration, les prototypes prêts à tester et le transfert des développeurs sont tout à fait dans ses capacités. Figma simplifie également le travail des chefs de produit et des responsables de la conception, ainsi que de toutes les autres parties prenantes.

Alors, qu'est-ce qui distingue Figma de la concurrence ? Il existe plusieurs aspects clés, mais tous peuvent être attribués au fait que Figma est basé sur le Web. Cela a soulevé beaucoup de sourcils lors de la première sortie de l'outil, mais finalement, cela a ouvert la voie à la flexibilité et aux fonctionnalités uniques de Figma.

Qu'est-ce qui est fondamental pour un processus de conception de produit fluide ?

S'il est vrai que chaque équipe et chaque projet peuvent avoir un flux de travail différent, certaines fonctions et phases sont des composants essentiels de la conception et de la gestion des produits. Figma couvre chacun.

1. Accessibilité et collaboration . Quels que soient les outils utilisés par une équipe, il doit y avoir un moyen de travailler ensemble, de présenter des projets, de recueillir des commentaires et de tenir les parties prenantes au courant. Toutes ces fonctionnalités sont disponibles dans Figma.
2. Flexibilité pour itérer et produire des livrables . Figma est flexible et peut être utilisé comme un tableau blanc collaboratif pour esquisser des idées initiales et tout itérer, des wireframes aux maquettes haute fidélité.
3. Capacité à construire des prototypes et à tester . Concevoir une application mobile ? Construisez et publiez des prototypes interactifs et testez-les directement sur les smartphones, le tout depuis Figma.
4. Établir une source unique de vérité . Figma est un excellent moyen de définir des systèmes de conception de produits entièrement en ligne. C'est une source unique de vérité par défaut. Plus besoin de se demander "Est-ce la dernière version ?"
5. Transfert en douceur . Partagez simplement un lien avec les développeurs et ils auront accès à toutes les informations nécessaires à la mise en œuvre de la conception - lignes rouges, mesures et ressources graphiques prêtes à être exportées.
6. Polyvalence à personnaliser et à améliorer . L'API de plugin de Figma permet aux équipes d'écrire leurs propres plugins ou de puiser dans la communauté d'utilisateurs plus large et d'étendre l'outil avec de nouvelles fonctionnalités.

1. Accessibilité et collaboration

Embarquez l'équipe

Examinons de plus près comment Figma contribue aux six domaines clés couverts ci-dessus. Les nouveaux utilisateurs voudront peut-être créer un compte Figma gratuit, créer une équipe et regarder comment démarrer avec Figma. Une fois qu'une équipe est créée, invitez les membres de l'équipe et les parties prenantes concernées à la rejoindre.

Trois niveaux d'accès sont disponibles. C'est assez explicite, mais généralement, les droits de modification sont accordés à l'équipe de conception et les droits de visualisation à tous les autres. Cela inclut les développeurs et les autres parties prenantes qui doivent être en mesure de suivre le processus de conception et de fournir des commentaires.

Des options de partage similaires sont disponibles au niveau de l'équipe (illustré ci-dessus), au niveau du projet et au niveau du fichier. Si les niveaux d'accès ne sont pas spécifiés, ils se propagent d'une équipe à un projet et d'un projet à des fichiers.

Étant donné que Figma est disponible dans le navigateur, peu importe la façon dont quelqu'un est invité ou le système sur lequel il se trouve. Tant que l'appareil et le navigateur qu'ils utilisent répondent aux exigences minimales, ils peuvent se connecter directement avec un lien, et l'interface change selon qu'ils disposent de droits de modification ou de visualisation.

Incorporation d'un fichier de projet

Les fichiers de projet Figma peuvent être intégrés dans un logiciel tiers. Par exemple, un document Dropbox Paper partagé peut être utilisé pour présenter l'état actuel d'un projet.

Pour intégrer des fichiers de projet, définissez la visibilité du fichier sur Toute personne disposant du lien - peut afficher , copiez le code d'intégration et intégrez le fichier de projet dans tout logiciel tiers prenant en charge embed.ly.

Commentaires et révisions

Une autre fonctionnalité clé du processus de conception de produits est la possibilité de distribuer des conceptions, de recueillir des commentaires et de gérer les révisions. Toute personne disposant d'un lien Figma peut voir la dernière version et commenter directement le point sur lequel elle souhaite donner son avis.

Pour étiqueter les membres de l'équipe, utilisez le caractère @, et le système présentera une liste de noms parmi lesquels choisir. Cela avertit les membres de l'équipe et, une fois les commentaires traités, les discussions peuvent être fermées en cliquant sur Résoudre .

Pour garder les équipes alignées, il existe une belle intégration qui peut publier des discussions à partir de fichiers Figma dans un canal Slack désigné.

Collaboration en temps réel

L'une des fonctionnalités les plus intrigantes de Figma est ce qu'ils appellent le multijoueur . Il permet à plusieurs membres de l'équipe d'ouvrir et de travailler sur un fichier de conception en même temps. Toutes les personnes travaillant sur le fichier sont visibles en haut à droite de la page, et leurs avatars sont nommés et cliquables.

Cela peut prendre un certain temps pour comprendre ce que cela signifie concrètement. Bien qu'il soit peu probable que les concepteurs utilisent le multijoueur pour travailler simultanément sur la même partie d'un fichier, il est incroyablement réconfortant de ne pas avoir à se soucier des conflits de versions de fichiers, en particulier pour les grandes équipes distribuées.

Le multijoueur est pratique lors de la présentation à distance car il permet à toute personne connectée au fichier de suivre la fenêtre d'affichage du présentateur. Cela permet également aux équipes de contourner des programmes supplémentaires et d'utiliser Figma comme tableau blanc en ligne (bien que des solutions spécifiques, comme Miro, puissent finalement être mieux adaptées au travail).

À cette fin, il est conseillé de créer des composants personnalisés pour répliquer des actifs spécifiques sous forme de post-it virtuels ou d'éléments de diagramme.

2. La flexibilité d'itérer et de produire des livrables

Une fois que les membres de l'équipe ont été invités et que les premières esquisses sont en cours, Figma peut être utilisé pour itérer. La principale raison de la création de Figma est la conception de l'interface - une fois le tableau blanc terminé, les équipes peuvent passer aux cartes de flux et aux structures filaires. Encore une fois, il est judicieux de créer des bibliothèques de composants qui peuvent être réutilisées pour ces tâches. La collection de modèles officiels fournit de l'inspiration et des arrangements de conception pour commencer.

3. La capacité de construire des prototypes et de tester

Il est assez facile de créer des prototypes interactifs avec Figma. Lorsqu'un fichier Figma est ouvert avec des droits d'édition, il est possible de basculer entre le mode conception et le mode prototypage. Une fois en mode prototype, il est possible de cliquer sur un élément pour le rendre interactif, que ce soit depuis la scène ou la sidebar des calques.

Avec un élément sélectionné en mode Prototype, un petit cercle apparaît sur le côté. Lorsqu'elles sont glissées, des lignes bleues apparaissent et peuvent être déposées sur l'écran ou l'état pour afficher le résultat de l'interaction.

Des transitions courantes sont disponibles dans Figma, ce qui facilite grandement la création de prototypes haute fidélité. En fait, l'équipe Figma a récemment publié une fonctionnalité intelligente de déclenchement d'animation et de glissement. L'aspect animé intelligent interpole le mouvement d'éléments similaires, tandis que le déclencheur de glissement est un nouveau type d'interaction. Les deux améliorent considérablement la qualité des prototypes interactifs.

Test utilisateur

Encore une fois, un lien suffit pour distribuer les prototypes Figma, même pour les tests utilisateurs. Cliquer sur la petite icône de lecture en haut à droite lance le prototype, et une nouvelle URL est générée. Il est possible de copier l'URL ou d'utiliser le bouton bleu Partager le prototype . Une fois que les utilisateurs ouvrent le lien, ils se voient présenter un prototype interactif et peuvent laisser des commentaires s'ils le souhaitent.

Test sur mobile

Les conceptions d'appareils mobiles sont présentées avec une maquette d'un appareil réel entourant le prototype. Si plus de réalisme est nécessaire pour tester l'interaction, il est préférable de télécharger l'application Figma Mirror pour des tests spécifiques à l'appareil.

4. Établir une source unique de vérité

Historique des versions

Ne serait-il pas formidable que les fichiers de projet soient toujours à jour et constamment sauvegardés ? Cette fonctionnalité est incluse dans Figma par défaut. Chaque fichier est enregistré automatiquement pendant que vous travaillez dessus, et Figma crée une nouvelle entrée dans l'historique des versions après 30 minutes d'inactivité. Un journal de toutes les versions enregistrées automatiquement est créé et chaque version peut être restaurée si nécessaire.

Bien sûr, la gestion automatique des versions n'est pas la seule option pour sauvegarder le travail. Il est possible d'enregistrer une version manuellement ou de modifier une version spécifique dans l'historique des versions.

Systèmes de conception et bibliothèques de composants

Un autre aspect où Figma brille est la façon dont il permet aux concepteurs de créer, d'organiser et de distribuer des bibliothèques de composants. Tout fichier peut être publié en tant que bibliothèque, et chaque couleur, style de texte, effet, grille ou composant est disponible pour être utilisé dans d'autres fichiers Figma.

Lorsque des modifications sont apportées à un élément d'une bibliothèque, les modifications peuvent être publiées et propagées aux fichiers qui utilisent ces éléments. Les concepteurs travaillant sur ces fichiers peuvent alors décider d'accepter ou non les modifications.

La possibilité de décider comment distribuer les bibliothèques, combinée à la possibilité de basculer la visibilité ou l'invisibilité des éléments de la bibliothèque, rend l'expérience globale fluide et puissante.

Les composants et les bibliothèques peuvent être imbriqués pour créer des systèmes de conception sophistiqués où tout est versionné et à jour pour toutes les personnes impliquées. Et tous les composants peuvent être annotés avec des commentaires.

5. Transfert en douceur

Transfert de développeur

Avec Figma, les concepteurs et les développeurs n'ont pas besoin d'un outil séparé, comme Zeplin, pour gérer le transfert. Ils peuvent simplement ouvrir des fichiers et passer en mode Code dans la barre latérale droite, même avec un accès en lecture seule.

Lorsque le mode Code est actif, la sélection d'un élément sur la scène révèle toutes les informations pertinentes nécessaires à la mise en œuvre, et toutes les autres informations concernant la position des composants par rapport aux autres éléments sont visibles. Comme avec des solutions similaires, le code généré n'est pas destiné à être entièrement copié-collé, mais il est utile d'avoir un accès aussi facile.

6. La polyvalence à personnaliser et à améliorer

API Figma et plugins personnalisés

L'API et le système de plug-ins de Figma permettent à un large éventail d'équipes de conception et de disciplines de personnaliser facilement le programme en fonction de leurs besoins spécifiques en matière de processus. La flexibilité de Figma donne aux utilisateurs la possibilité d'interagir par programmation avec la plate-forme. Quelques exemples :

Utiliser des données réelles

Il est extrêmement précieux de pouvoir utiliser des données réelles dans des maquettes et des prototypes, et Figma rend cela possible en permettant l'importation de contenu provenant de sources externes. En tirant parti du contenu réel, il est possible de tester les composants de conception, de maintenir les maquettes à jour et d'impliquer des équipes qui ne sont pas liées à la conception.

Un plugin nommé Google Sheets Sync est un parfait exemple de ce qui peut être fait. Ce plugin simplifie l'intégration de Google Sheets en tant que source pour remplir et synchroniser le contenu des composants dans les fichiers Figma.

Flux de travail avancés

La possibilité d'héberger un système de conception dans un programme de conception d'interface utilisateur n'a de valeur que si le système est systématiquement mis en œuvre sur des écrans orientés client. Heureusement, il existe des API, des plugins et des intégrations Figma qui peuvent vous aider.

L'addon Storybook synchronise les fichiers Figma et affiche les composants de conception Figma dans un panneau à côté des composants implémentés. Un autre cas d'utilisation intéressant est le Figma to React Converter, une amélioration du flux de travail qui convertit les composants Figma en code.

Les fonctionnalités de Figma sont idéales pour l'ensemble du processus de conception

Il n'existe pas de programme de conception unique capable de gérer les besoins de chaque concepteur ou problème de conception, et c'est une bonne chose. La concurrence entre les outils de conception est avantageuse pour les concepteurs. Cela garantit que les entreprises qui fabriquent nos outils sont à l'écoute de nos besoins et nous fournissent des fonctionnalités à jour adaptées aux tâches que nous effectuons.

Cela dit, Figma est un outil avancé mais intuitif qui a fait ses preuves plus que capable de s'attaquer à l'ensemble du processus de conception numérique. Les concepteurs individuels et les équipes peuvent bénéficier de ses fonctionnalités uniques de collaboration et d'itération, et là où le programme échoue, une vaste sélection de plugins comble le vide.

• • •

Pour en savoir plus sur le blog Toptal Design :

• La puissance de Figma comme outil de conception
• Figma vs Sketch vs Axure - Un examen basé sur les tâches
• Mini tutoriel - Travailler avec les composants du bouton Figma
• Maîtrisez votre métier avec ces meilleurs outils UX
• Concevoir avec précision – Une revue Adobe XD