Choisir l’outil qui convient à vos besoins est absolument essentiel.

27 Mai 2020

Jusqu’à l’an dernier, j’étais un fidèle utilisateur des logiciels Adobe. D’abord avec Photoshop, il y a longtemps, puis Adobe Xd ces dernières années. Je n’ai jamais vraiment utilisé Sketch, sauf dans le cadre de petits tests personnels.

Pourquoi suis-je passé sur Figma ?

J’ai commencé à tester Figma il y a trois ans pour un projet personnel, puis j’ai continué à l’utiliser parfois sur de petits projets. Il y a quelques mois, je l‘ai pour la première fois utilisé dans le cadre d’une mission pour un client. Je n’en avais pas l’obligation, mais le client utilisait déjà Figma, donc j’ai profité de l’opportunité pour améliorer mes connaissances sur cet outil.

Sur les petits projets, je n’ai pas vu une grande différence entre Xd et Figma. Les outils de base et la philosophie restent les mêmes. Mais lorsque j’ai rejoint l’équipe design system chez Accor Hôtel quelques mois auparavant, j’étais un peu perdu de par l’organisation totalement différente et la puissance des outils de collaboration. Ça a été une petite révélation pour moi. Figma se différencie clairement d’un point de vue collaboration au sein d’une grosse équipe.

1. Collaboration

La grande force de Figma réside dans le fait de pouvoir collaborer en temps réel directement dans les fichiers de design. Vous pouvez travailler à plusieurs designers sur des maquettes de la même façon que vous pouvez éditer un google doc. Très pratique pour brainstormer ou faire des revues d’équipe. J’ai vu récemment que Xd avait implémenté la même fonctionnalité, mais je ne sais pas si celle-ci est aussi puissante.

Vous pouvez également laisser des commentaires et taguer les membres de votre équipe, plus besoin d’exporter et charger vos designs sur un outil tiers. Et n’ayez crainte pour les membres de votre équipe qui ne sont pas designers, car Figma offre un accès gratuit pour les comptes en visualisation simple. Vous pouvez donc ajouter tous vos développeurs et product owners gratuitement. Retours en temps réel sans perte de temps !

2. Pas de partage ni stockage de fichiers

Figma est un outil basé sur le cloud. Plus besoin de se partager et dupliquer les fichiers en fonction des versions, ou d’utiliser Abstract. Yay! Grâce à cela, Figma est accessible via votre navigateur, et c’est un autre argument si au sein de votre équipe vous utilisez différents systèmes d’exploitation.

3. Esprit design system

Si vous êtes un acharné de design system, vous consultez probablement souvent les articles ou la documentation de Figma. Ils ont bâti une communauté de qualité autour de leur esprit design system. Ils ont notamment créé le site designsystems.com où vous pourrez trouver différentes publications et bonnes pratiques à propos de design systems.

À propos des fonctionnalités de l’outil, vous pouvez plus ou moins retrouver la même flexibilité que sur Xd avec des composants master et instance, des styles, auto-layout… mais malheureusement, Figma ne propose pas la puissante fonctionnalité repeat-grid de Xd.

4. Organisation

Figma propose une organisation flexible par équipe et par projet. Vous pouvez créer plusieurs équipes au sein d’une organisation, et créer autant de projets que vous souhaitez (lorsque vous êtes en version payante).

La possibilité de faire des liens au sein même des fichiers Figma est un plus. Vous pouvez ajouter des références entre vos pages et projets, ou même des guidelines externes.

5. Tout en un

De la même manière que Xd, vous pouvez construire des prototypes directement au sein de l’outil. C’est un gros bénéfice et c’était d’ailleurs la raison principale pour laquelle je restais sur Xd. Figma propose aussi la fonctionnalité handoff, vous avez donc tout ce dont vous avez besoin au sein du même outil.

Je sais ce que vous vous dites, vous pensez que je voue un véritable culte à Figma, et ce serait légitime. Mais il existe aussi des frustrations, voici quelques retours personnels :

• La fonctionnalité de recherche est peut-être la plus frustrante lorsque vous recherchez un composant ou une maquette précise au sein d’un grand projet.
• Figma inclut les pages et les frames à l’accès aux composants d’une librairie. Vous pouvez faire face parfois à une duplication des noms des éléments lorsque vous recherchez par l’intermédiaire du volet assets de gauche, ou du drop down instance. C’est un peu confus.
• Migrer le design provenant d’un autre logiciel. Conseil : utiliser l’application en ligne XDtoSkecth, cela m’a permis de gagner beaucoup de temps. Mais ce n’est pas magique, vous devez reconstruire les composants et les styles.

Migrer de Sketch vers Figma :

• Moving From Sketch To Figma: A Case Study Of Migrating Design Systems

Comparaison des meilleurs outils UI :

• Adobe XD vs Sketch vs Figma vs InVision – 2020 Comparison
• Figma vs Sketch vs Adobe XD: Which Is the Better Design Tool?

Ressources supplémentaires :

• Tool tips: How our design team switched to Figma
• Why we switched to Figma as the primary design tool at Zomato
• Why Figma is the future of UI design in agile teams

Note : cet article n’est pas sponsorisé par Figma — cet outil convient à mes besoins, mais peut-être pas aux vôtres, essayez-le pour savoir !