Pourquoi migrer sur Figma?

Salut à tous c’est Steph, j’espère vous allez bien aujourd’hui pour cette nouvelle vidéo on a décidé de vous parler d’un outil qu’on adore qui s’appelle Figma! Donc Figma est un logiciel de design de prototypage dont vous avez sûrement déjà entendu le nom. J’ai un invité incroyable personne aujourd’hui pour vous parler de ce logiciel. Vous allez voir c’est vraiment un crack de Figma.

Une petite note avant qu’on se lance dans la vidéo. On aime parler des outils qu’on utilise Design Sprint Ltd – on n’est bien sûr pas payés pour le faire. C’est pas du tout des vidéos sponsorisées, c’est juste qu’on aime ces outils et qu’on les utilise. On est complètement agnostique en termes d’outils c’est à dire que par rapport au projet à la période etc on va passer d’un outil à l’autre et on aime partager ça avec vous.

Pour cette vidéo aujourd’hui j’invite l’exceptionnel Julien Suard – Salut à tous! Aujourd’hui effectivement c’est une vidéo que ça fait longtemps qu’on voulait faire et c’est l’occasion de souhaiter à tous les vœux à toutes les personnes qui nous regardent! Et puis également aussi, t’as vu Steph, j’ai mis le nouveau T-shirt Design Sprint. Et c’est l’occasion de parler de Figma. Pourquoi on l’utilise de plus en plus, et vous expliquer quels outils on a utilisé jusqu’à présent et vous expliquer pourquoi maintenant on l’utilise dans nos design sprints nos workshops, dans nos formations etc…

Peut-être Julien avant qu’on commence tu voudrais te présenter en quelques mots?

Exactement alors moi je m’appelle Julien Suard, je suis Product Designer, je travaille avec Steph depuis maintenant deux ans. Je l’accompagne dans les design sprints, notamment sur la partie de prototypage. L’année prochaine cela fera 20 ans que j’utilise des logiciels de design

Avant Figma (Photoshop, Illustrator, Fireworks, Invision…)

Ca paraît fou quoi! Comme ça je pourrais vous raconter un petit peu tous les outils que j’utilisé jusqu’à présent. Alors on va commencer dans les années 2000 puisqu’il ya moi j’ai une formation de graphiste à la base. Il n’y avait pas de formation à l’époque pour devenir UX Designer, donc j’ai commencé par être formé avec le logiciel phare qui est Photoshop. J’ai commencé avec la version 5 et puis ensuite Photoshop a évolué vers des versions CS et un moment donné on a voulu faire des sites internet de l’applicatif des logiciels, d’applications mobiles et là on a commencé à réfléchir à quels outils allait utiliser à l’époque. Il y’en avait pas 36: il y avait Photoshop qui n’était pas vraiment adapté. Donc on faisait avec parce qu’il n’avait pas d’autres, et il y en qui utilisaient Illustrator u qui utilisaient Fireworks également.

J’ai utilisé Fireworks pendant, on va dire une paire d’années, et puis un moment donné Adobe a évolué. Ils ont lancé leur Creative Cloud et à ce moment là j’ai rebasculé dans Photoshop. Ca m’a permis de commencer à créer des composants qu’on pouvait partager avec le reste des designers dans l’équipe. Et du coup c’était couplé avec Invision aussi qui était un nouveau service qui permettait une fois qu’on avait fait nos protos de les mettre en ligne et pouvoir ensuite le partager avec le reste de l’équipe pour commenter. Ca c’est quelque chose que j’ai fait jusqu’en 2014.

L’ère Sketch

Et puis en 2014 on ne parle d’un nouveau logiciel qui révolutionne tout qui s’appelle Sketch et là ça m’a laissé dubitatif on dit que voilà tout le monde l’utilise. Alors pour un pro-Photoshop, je me demande, en fait, dans quelle mesure ce logiciel il va pouvoir trouver son succès. Et on se rend compte qu’il y a de plus en plus de gens qui utilisaient photoshop qui migrent vers sketch. Et qu’il y a la possibilité également de le coupler avec Invision.

Donc je me dis bah pourquoi pas l’essayer. A ce moment là bas c’est une grosse remise en question parce que on a déjà tous nos composants. On a déjà commencé à mettre en place un petit design system, nos couleurs nos styles etc. Il faut cette fois-ci migrer de photoshop à sketch. Déjà premières migrations. Est ce que je peux aussi partager? Moi j’étais à peu près la même situation que toi. Il faut bien comprendre la différence avec photoshop.

C’est un logiciel c’est au départ un pilote de scanner qui est devenu un logiciel de traitement d’image. Il marche une succession de calques, de couches et puis Sketch ce qu’il amène c’est cette notion d’avoir différentes artboards, ou différents écrans. Ce qui permet de plus simplement créer des sites web ou des applications mobiles. Une logique avait pas du tout dans photoshop vu qu’il fallait faire ces couches ou ces dossiers superposés, qui était vraiment pas idéal et qui ralentissait énormément Photoshop.

Quand on dépassait genre, 10 artboards dans le fichier Photoshop plantait. C’était pas forcément l’outil idéal. Parallèlement, Adobe se sont rendus compte qu’il était en train de perdre un paquet d’utilisateurs, ils ont cravaché et il avaient pour projet de lancer un logiciel qui devait s’appeler Comet, et s’est finalement appelé Adobe Xd qui est toujours d’actualité.

Invision

Parallèlement on a eu Invision aussi qui a voulu se lancer avec Invision studio. Mais ça a été quand même une petite déception pour nous. Ils avaient fait un teaser de folie. Mais bon…. je sais pas, j’espère que ils pourront revenir dans la course, mais pour l’instant on parle. C’est vrai que Sketch a été pendant très longtemps LE logiciel pour les designers. C’était vraiment le meilleur logiciel en fait de design écran mais – et je pense que tu veux en parler- mais ils ont qu’a fait une erreur cruciale à mon avis.

C’est que Sketch n’existait que pour Mac, ils ont ciblé les designers qui bossaient sur mac. Et ils sont dit voilà on fait le meilleur logiciel de design écran, hé en c’est logiciel qui s’installe sur les mac. – Tout à fait c’est resté quand même en travers de la gorge de beaucoup de monde, le fait qu’on puisse lui uniquement l’utiliser sur Mac .

En ayant mon équipe de designers j’ai toujours voulu faire de la veille quand même pour me tenir informé sur les logiciels. Donc parallèlement à l’évolution de Sketch j’ai aussi étudié d’autres logiciels comme UXpin. qui était quelque part un précurseur de Figma puisque l’objectif d’UXpin c’était d’avoir deux prototyper en live et au travers d’un navigateur. C’était à mon sens déjà une bonne direction à prendre. Et puis s’en est suivis d’autres logiciels comme Axure qui a également lancé sa version cloud Proto.io.

Figma

Enfin et bien pour le coup FIGMA est arrivé comme ça et est venu un petit peu chambouler les logiciels de prototypage. Quand il est arrivé, alors j’ai regardé tout à l’heure sur la sur Wikipédia visiblement la première version date de 2012, mais moi personnellement j’ai commencé à l’utiliser aux alentours de 2017 me chercher sur le site. Le site de figma en fait officiellement été créé en 2015 par Dylan Field aux Etats Unis.

Julien, si tu peux partager ton écran, comme ça on pourrait regarder le site de Figma. Donc c’est un logiciel qui vient un petit peu comme un cheveu sur la soupe dans un écosystème. On en a parlé, où il y avait plein de logiciels qui se tirent la bourre qui cherchent à être le meilleur logiciel de design écran. Et puis Figma arrive comme un acteur de plus, mais ils font des choix assez radicaux par rapport aux autres.

Le premier choix qu’ils font et je pense que c’est vraiment l’une des clés du succès, c’est un choix très stratégique. C’est de se dire c’est un logiciel qui va être dans le browser (donc dans le navigateur). C’est à dire qu’à la différence de Sketch de Photoshop ou Illustrator c’est un logiciel qu’on va pas avoir besoin d’installer. On va simplement a besoin d’avoir un compte et on va pourra l’utiliser dans son navigateur web. Dans tout navigateur web ce qui est quand même déjà assez fort dès le départ.

C’est un logiciel qui se veut au départ plutôt simpliste. On pouvait pas du tout faire dans Figma à ce que l’on pouvait faire avec Sketch ou Photoshop. C’était plutôt vrai que ça allait suivre un peu la logique de UXpin ou de Axure. Quelque chose centré un sur les wireframes, sur des maquettes en noir et blanc, assez simplistes vraiment pour de l’UX. Je sais pas ce que tu en penses Julien, mais la première réaction des designers professionnels -les vieux de la vieille comme nous, on était un petit peu dédaigneux par rapport à ce logiciel. On trouvait pas ça hyper intéressant parce qu’on disait « mais attendez il ya déjà tellement de bons logiciels qui existent Sketch, Photoshop Illustrator sont là. Tu viens avec ton truc qui est un petit peu laggy, le truc était un peu lent pas très fluide.

Tu bougeais un rectangle mais ça faisait tic tic tic… comme ça, c’était un peu trop simple on voit pas tout faire on pouvait pas faire des dégradés. On pouvait pas faire, voilà, plein de choses qui sont des basiques ailleurs. Et puis surtout il y avait ce problème, je dirais, presque fondamental et là Julien, j’aimerais savoir comment tu l’as vécu, mais c’est que Figma été pensé comme un logiciel de collaboration. C’est à dire que tu peux envoyer un lien à n’importe qui et qui, du coup, n’a pas besoin de l »installer (donc PC / Mac etc…)

Je clique sur le lien, je crée un compte quand même, et j’ouvre le fichier Figma. Je peux commencer à collaborer dans le fichier et ça a été pensé dès le départ et ces fonctions là, c’est quand même quelque chose d’assez puissant parce que d’un coup tu peux intégrer des gens dans le projet qui ne sont pas designer. Ca peut être des chefs de projet, des gens qui vont s’occuper des textes. Ca peut être ton boss etc et du coup il ya des personnes qui ne sont pas designers qui se retrouvent à travailler sur ton fichier de design… Comment toi Julien tu as vécu ce shift?

Ben complètement, alors moi ce qui a été assez perturbant, c’est de me dire « ok jusqu’à présent on a utilisé des logiciels qu’on installait et que ce soit sur windows sur mac. Que ce soit photoshop, que ce soit Sketch et là d’un seul coup on nous propose une grosse alternative ou maintenant on peut designer directement via Chrome via Firefox » je me dis « ouah mais dans quelle mesure ça va pas cracher ? ».

On a des centaines, voire des milliers de maquettes à réaliser donc voilà… j’étais quand même assez dubitatif puis surtout en termes de fonctionnalités me dire mais c’est incroyable d’avoir une application qui tourne comme ça, où on est capable d’avoirbles mêmes features on peut faire des interactions. C’était assez fou, et j’ai quand même attendu un petit peu que le logiciel mûrisse. Ce n’était pas pour il était pas prêt tout comme Sketch au départ j’ai pas migré de suite.

J’ai toujours attendu une bonne année que le logiciel ait une certaine maturité avant de migrer. Parce que bon ben derrière, c’est quand même un gros boulot de migrer des composants des maquettes. A chaque fois je voulais vraiment m’assurer que je faisais le bon choix. Et du coup j’ai listé un certain nombre d’avantages pour les gens qui s’interrogent sur Figma qui sont encore sur un autre logiciel comme Sketch par exemple ou Adobe XD. Qui se disent « pourquoi pas… mais du coup comment ça va se passer? Est-ce que je vais pouvoir récupérer les composants? » etc… Donc il y a quelques semaines de ça j’ai eu l’occasion de migrer un gros projet et puis du coup je vous expliquerai comment ça s’est passé.

Si c’était facile, si j’ai pu récupérer l’ensemble de mes éléments et puis aussi, je vais vous expliquer les différents avantages que je vois utiliser Figma au quotidien… Peut-être Julien si tu arrives partager ton écran pour nous montrer à quoi ça ressemble ce fameux Figma?

Oui du coup, alors Figma, je vais vous montrer. Voilà l’interface qui est très minimaliste. – Ah oui c’est sobre! Voilà donc là c’est vraiment un fichier brut quand vous ouvrez Figma ça ressemble à ça. Pour petit rappel de ce qu’on fait au quotidien avec Steph. Nous on est spécialisés dans le design sprint, donc c’est un workshop d’innovation que l’on peut mener donc soit en présentiel soit en remote. On en fait plus en plus avec la situation actuelle… mais on design également des produits donc des applications mobiles des sites web, des consoles d’administration (dashboards) et on intervient également donc des écoles où on donne des Masterclasses aussi d’un point de vue éducation du coup.

Je vais vous expliquer un petit peu pourquoi on a fait le choix de travailler de plus en plus avec Figma, et de quasiment travailler qu’avec Figma d’ailleurs.

Jusqu’à l’année dernière ont travaillé avec avec Sketch encore avec les dernières versions de Sketch et du coup ce qui nous a donné l’envie de bouger sur Figma, la première chose c’est la compatibilité parce que comme tu l’expliquais tout à l’heure Figma est compatible sur Windows, Mac et Linux, il suffit simplement d’avoir internet d’avoir un navigateur récent du type Chrome, Firefox ou Edge et ça fonctionne.

C’est aussi très facile à mettre en place quand on n’intervient que ce soit dans un workshop ou pour donner des Masterclasses, ou des cours pour des étudiants. Et bien il ya aucun logiciel à installer, il y a simplement à leur dire d’aller sur Figma de créer un compte. Eventuellement si le projet déjà créé on les invite au projet ils nous rejoignent direct. C’est très simple… Ensuite un autre point très important, c’est que il n’y a pas de notion de mise à jour. En fait dès que vous ouvrez votre navigateur que vous allez sur Figma, vous êtes à la dernière version. Voilà il y a une version desktop que vous pouvez télécharger. Si vous le souhaitez ne pas utiliser votre navigateur, mais c’est ni plus ni moins que la même vue embarquée dans une application. Franchement y’a pas un avantage fou d’avoir la version installée.

Desktop plutôt que la version online… Exactement, et il existe également une version mobile d’ailleurs. Qui était déjà présente pour l’App store et ils ont sorti dernièrement la version pour Android. C’est une version qui est très pratique pour faire du mirroring en fait puisque vous n’avez pas forcément besoin d’un câble vous pouvez la lier à votre téléphone grâce au wifi. Il suffit d’être connecté sur le même réseau vous pouvez directement voir en live votre proto. Julien, juste pour expliquer en deux mots ce que c’est. Quand vous fabriquez un design un prototype dans Figma, après l’idée c’est de le tester. Dont le vrai monde avec des personnes, donc leur donner un téléphone avec la « vraie-fausse » application qui a été créé. Et du coup il y a une application qui permet de le faire, c’est l’application mirroring de Figma qui permet de montrer le design dans un téléphone.

Exactement et également dans l’application vous avez accès à l’ensemble de vos projets que vous pouvez parcourir donc c’est plutôt pratique. Julien là je suis sur ton écran, dans Figma. Peut-être, est-ce que tu peux nous faire un petit tour du propriétaire? Et nous expliquer ce qu’est ce qu’on voit et comment ça fonctionne?

Figma à une interface très simple très minimaliste qui suit les patterns de la plupart des logiciels de ce type genre Adobe XD ou Sketch. En haut vous avez votre toolbar, vous allez retrouver bas les outils déplacement, l’outil frame, l’outil pour designer vos différentes formes. On voit les carrés des ronds, des triangles des flèches, etc… L’outil plume, l’outil texte, l’outil de déplacement et vous avez également un outil avec une petite bulle pour mettre des commentaires. Ca c’est plutôt pratique parce que les commentaires vous pouvez les mettre soit sur la maquette telle qu’elle est en train d’être éditée. Et après on verra que une fois que vous avez terminé votre prototype, vous pouvez le présenter.

Cette fois ci aux utilisateurs finaux qui vont aussi pouvoir ajouter des commentaires. En haut vous avez des onglets vous pouvez travailler sur plusieurs fichiers en même temps. Vous pouvez renommer votre projet, ici vous avez un bouton share sur lequel vous allez pouvoir inviter une personne pour rejoindre le projet. Donc soit en rentrant une adresse email et en spécifiant le type de droit, soit en lecture seule, soit en écriture. Et puis vous avez la possibilité d’envoyer un lien public ce qui est vraiment très intéressant et sans forcément avec un compte Figma.

Et d’ailleurs au niveau du partage des liens, je pense, que quelque chose d’important à noter c’est que vous pouvez envoyer deux types de liens. Il y a des liens que vous envoyez à des collaborateurs qui vont aller dans le fichier design et travailler avec vous sur le design. Donc des liens publics, et aussi des liens qui vont être envoyés. Des gens qui vont juste voir le prototype. Le résultat final, donc vous pouvez vraiment décider à qui est-ce que vous envoyez, aux bons acteurs du projet.

Voilà, le résultat final vous l’avez en cliquant sur le petit « Play » ici, vous ouvrir un nouvel onglet et ensuite vous pourrez faire de la même manière un partage avec un lien et la personne ne verra que la présentation et non le fichier d’édition. Ensuite sur votre gauche vous avez un panel. Vous allez retrouver les différents calques, donc là je vais créer élément. Je crée un carré, vous allez retrouver les différents calques et puis ici dans les assets vous allez pouvoir retrouver l’ensemble des librairies et des composants que vous pouvez récupérer et directement ajouter à votre projet.

Petite note juste sur Figma pour les francophones, alors ça ne s’est pas traduit l’interface tout est en anglais c’est un logiciel américain et qu’ils ont pour l’instant jamais pensé à le traduire en français ce qui serait relativement intéressant, mais je pense qu’on s’oriente quand même relativement facilement en tant que francophone, finalement c’est toujours les mêmes actions qu’on fait donc.

Complètement, donc vous avez la possibilité de créer différentes tâches par défaut chez une seule page. Vous pouvez créer différentes pages, et puis sur la partie droite ou en cliquant sur un élément vous allez retrouver les propriétés de l’élément. Donc sa couleur vous allez retrouver le stroke, donc c’est le border, les effets si vous voulez mettre des ombres et puis vous allez pouvoir exporter les différents éléments que vous sélectionnez. En haut, vous avez trois petits onglets un onglet design qui vous permet de concevoir un onglet prototype vous allez pouvoir créer des interactions.

Peut-être tu pourrais nous montrer la logique, juste créer rapidement deux artboards et les relier entre-elles comme ça on comprend bien cette notion? Alors je vais créer un premier artboard, donc pour créer un art board il faut utiliser en fait cet outil sur la droite on vous propose directement différentes différents types de frames. Donc là on va par exemple prendre un iPhone, comme ça. On va créer un premier un artboard qui s’appelle la vue A et puis on va créer un artboard vue B.

Alors là vous voyez vraiment des vues de téléphone, des écrans de téléphone. J’allais pouvoir faire, je fais deux visuels différents. Mais on va prendre par exemple ça, c’est la vue A et là la vue B et ensuite. Vous pouvez créer des interactions en cliquant donc sur l’onglet « Prototype ». Vous voyez, quand on sélectionne un élément où vous avez ici un petit cercle avec un plus il y a juste à faire un drag and drop et l’envoyer sur votre page de destination. Si vous voulez qu’en cliquant sur le carré rouge on revienne sur la vue A, vous faites exactement la même chose voilà. Là vous avez créé une interaction. C’était extrêmement simple. Voilà comment ça fonctionne, j’y reviendrai plus tard mais en tout cas Figma vous permet non seulement de concevoir mais également de prototyper

Tu peux peut-être nous montrer le « Play » maintenant? Quand on clique sur « Play ». Juste attendre que sa charge un peu. Donc là, j’ai ma vue A et quand je vais cliquez sur le bouton gris, je tombe bien sûr la vue B. Si je re-clic sur le carré rouge, je retombe sur la vue A. C’est un exemple hyper basique, un hyper simpliste ici. Mais imaginez bien la puissance de cet outil là. C’est qu’en quelques minutes, on est capable de simuler des écrans d’un produit, d’une application, d’un site web, d’une plateforme.

Alors après il faut voir le bon designer pour après mettre les bons contenus, les bonnes images etc. Mais voyez la vitesse et à quel point on peut simuler un produit qu’ils allaient réaliste et ses interactions. C’est ça qui est vraiment gérer un game-changer dans ce monde du design. C’est que voilà on peut extrêmement facilement simuler un produit fini plutôt que de construire le véritable produit pendant des mois avant de le montrer à quelqu’un.

Complètement et pour terminer vous avez le troisième onglet donc c’est la partie « Inspect ». Je la montrerai mieux un peu plus tard mais ça ça permet que une fois que vous avez terminé votre prototype il faudra le transmettre à votre développeurs. Le développeur va pouvoir en cliquant sur les différents éléments récupérer le code CSS pour l’intégrer. Donc je dirais que en termes d’apprentissage on est vraiment sur un apprentissage rapide. Vous êtes sûr des patterns connus. C’est une interface qui est vraiment épurée et intuitive.

Comme je le disais tout à l’heure le fait de passer sur Figma c’est réunir cinq applications en une. Pourquoi cinq applications? Donc la première c’est la conception de design, ensuite le prototypage, ensuite vous avez donc un mode de présentation que vous pouvez transmettre à votre utilisateur pour qu’il puisse vous faire des feedbacks. Vous avez l’inspection pour les développeurs et enfin vous avez Figjam.

Figjam

Figjam c’est un nouveau module de Figma (en fait un logiciel complet qui se lie à Figma). C’est comme un tableau blanc en fait. Souvent le comparer un logiciel comme Miro ou Mural. C’est un logiciel qui va permettre en fait de faire de l’idéation du design thinking, et de pouvoir collaborer à plusieurs de la même manière que vous pouvez le faire au niveau de la conception. Vous pourrez le faire en amont.

Alors je vais vous montrer à quoi ça ressemble. Donc là j’ai créé un fichier Figjam, et puis vous retrouvez un petit peu les différents outils que vous pouvez avoir dans Miro ou Mural. Des post-it des gommettes etc – Alors pour être francs on l’utilise pas encore dans nos designs sprint. A l’heure actuelle on utilise plutôt Miro ou Mural, mais on n’est pas du tout opposés à l’idée d’utiliser Figjam, qui est encore un peu jeune comme logiciel.

Ouais tout à fait, mais je pense qu’il faut garder un œil sur Figjam, parce que il est quand même pratique et surtout il est intégré dans Figma. Donc comme on utilise de plus en plus pour le prototypage ça pourrait être intéressant de l’utiliser en amont pour la partie réflexion, idéation.

Pour nous aussi dans un design sprint l’idée c’est de fournir les outils les plus simples possible à nos participants. C’est sûr que si on peut partager un seul lien de projet, par exemple, et que on a Figjam et Figma tout intégré. Et puis on passe toute la semaine avec les mêmes logiciels plutôt que de passer d’un logiciel à l’autre au cours de la semaine. Pour nous on a vraiment tout à y gagner donc ça a été un peu pensé de ce point de vue là vu. Que les designers utilisent Figma pour prototyper et il essaient de remonter un peu plus haut en on proposant Figjam – Exactement.

Figma – logiciel collaboratif

Ensuite un des gros avantages et ça tu l’a très bien dit Steph, au niveau de Figma, c’est que c’est avant tout un logiciel collaboratif donc l’objectif quand on fait un proto, ou quand on travaille au quotidien sur du design d’interface. Quand on est tout seul bon bah on peut utiliser effectivement n’importe lequel. Mais quand on commence à travailler avec plusieurs designers dans son équipe, eh ben, c’est quand même vraiment appréciable de pouvoir faire intervenir différentes personnes. Que ce soit des designers, que ce soit des personnes qui vont intervenir sur les textes, sur le wording. Ou encore des personnes qui sont à l’autre bout de la chaîne comme des développeurs qui vont intégrer et donc grâce à la puissance de Figma on peut intégrer. Alors j’ai vu jusqu’à 1000 utilisateurs simultanément donc ça paraît incroyable, mais parce qu’on n’a pas été jusque là…

Je pense pas que ça soit une très bonne idée d’ailleurs de faire bosser mille personnes en même temps sur le même fichier. Ca va pas donner grand chose. Non en tout cas d’expérience Steph, on a déjà eu une bonne dizaine de personnes, et l’outil est très stable donc ça c’est une bonne chose.

D’ailleurs quelque chose de vraiment intéressant au niveau de la collaboration sur Figma et ça revient un petit peu ce qu’on disait au début. En tant que designer c’est pas facile de lâcher. C’est à dire il y a un chemin mental à faire, il faut faire un peu de chemin pour accepter que d’autres personnes entrent dans son fichier de travail. Finalement parce que traditionnellement le designer il un peu maître de son fichier. Il est maître de son design graphique et c’est vrai que c’est pas très agréable d’avoir plein de personnes autour de vous qui commencent à pousser des pixels, il commence à changer les textes.

C’est un apprentissage que vous devez faire sur vous même. Et en fait on se rend compte nous en tant que designer, la qualité que ça amène parce que finalement. Vous pouvez travailler en direct avec les meilleurs experts du domaine. Typiquement vous êtes en train de créer un proto, si vous voulez mettre des vrais chiffres, vous même vous n’êtes pas un expert de l’énergie solaire, par exemple, mais vous pouvez travailler avec des gens qui sont experts de ça. Donc ils vont pouvoir prendre l’outil texte mettre les vrais chiffres et votre fichier en fait ils s’améliore presque tout seul parce que tout le monde collabore au sein du fichier.

Ca demande un petit peu d’ouverture d’esprit, un petit peu de savoir comment travailler aussi … de ne pas arriver sur les plates-bandes de l’autre. Mais quand on sait travailler, quand on sait le faire. Le gain de temps et la qualité de ce qui en ressort est absolument phénoménale. Je pense que c’est vraiment un des apports massifs de ce logiciel Figma.

Tout à fait, et on peut rajouter également que Figma a depuis peu proposé une nouvelle fonctionnalité. C’est une fonctionnalité qui permet de faire des conversations audio. Donc tout en travaillant sur un projet, vous pouvez totalement appeler un de vos collègues et partager votre expérience sans forcément quitter le logiciel ou utiliser un autre logiciel comme Zoom ou Meet. Vous pouvez tout faire directement dans Figma.

Intéressant ouais, peut-être Julien tu voudrais partager avec nous du coup un fichier plus complet où on voit un vrai fichier de travail? Il y a de cela deux mois j’ai commencé à m’interroger sur le fait de migrer un gros projet sur lequel je travaille depuis deux ans sur Figma. Donc, croyez moi, je me suis posé mille questions de me dire « est ce que tu fais mon choix? ». En sachant que jusqu’à présent je travaillais sur Sketch, que Sketch me convenait il était robuste je travaillais avec un combo Sketches et Invision.

Et qu’à chaque fois je devais synchroniser mes design sur Invision et ça me prenait beaucoup de temps. Et puis du coup de l’autre côté j’avais un développeur qui me demandait à chaque fois ci c’était la dernière version. Et là je me suis dit « bon, est ce que ce serait pas l’occasion de tester une migration sur Figma? ». Donc je vais vous en parler après mais tout ça pour vous dire que le fichier que vous voyez là c’est le projet sur lequel je travaille.

Tu as combien d’écrans sur ce projet? Alors je pense que je dois approcher un plus de 100 artboards. Vous voyez il y a la version desktop, la version mobile avec à chaque fois c’est décliné mais voilà il y en a un paquet. Donc je vous expliquerai comment ça s’est passé.

Est-ce que j’ai eu des sueurs froides? Ou est ce que finalement ça a été très simple de migrer? Juste pour la petite histoire, quand vous voyez un fichier comme ça. Donc ça c’est vraiment un fichier professionnel de en fichier final quasiment d’une application, avant qu’elle soit envoyée aux développeurs. Vous voyez ici tous les liens entre les pages des interactions. C’est des mois de travail pour aboutir à ça.

Vous voyez bien la masse d’informations qu’il y a et le niveau de détails… Peut-être si tu peut zoomer sur un ou deux écrans comme ça on voit mieux. Mais en fait je pense que c’est important que vous rendiez compte du travail qui est fait par les designers derrière. Quand on peut donc créer un produit et du travail qui est engagé.

Quand on crée une nouvelle App, j’ai des fois les clients qui viennent et qui ont un budget de 2000 euros pour faire une App. Et qui croient que ce sera fait en une semaine. NON vous voyez? Voilà ce que ça représente de créer une app. Parce qu’il faut tout penser, maquetter, tous les états tous les écrans, parce que dès qu’on commence à développer (coder) quelque chose il faut que ce soit plutôt bien organisé et complet. Car sinon les développeurs sont un peu perdus et ne savent pas comment progresser.

Ca c’est vraiment le travail de Julien en tant que UI designer de passer ce temps-là, cette énergie à designer tous ces écrans. Exactement donc voilà je vous en parlerai un petit peu plus tard ce que je voudrais souligner mais pour aller un petit peu plus loin pour des gens qui s’intéressent davantage à Figma. Moi ce que ce que j’aime particulièrement dans le logiciel c’est les possibilités en termes d’interactions. J’ai essayé Invision, Sketch ou Adobe XD. Ils permettent certaines choses mais à chaque fois il y a quelque chose que j’ai pas…

Dans Figma je peux faire du clic je peux faire des drags-drop je peux faire du swipe, que je peux faire du hover je peux définir qu’il avoir une interaction après un délai, et je peux créer plusieurs interactions sur un même élément. Ensuite c’est les animations proposées ce que je peux avoir du move-in, du push, je peux avoir du slide et même du « smart animate ».

Alors le « smart animate » c’est c’est génial hein vous avez deux vues: une vue A et une vue B et vous arrivez à créer une interpolation entre les deux vues ce qui donne des animations plutôt sympa.

Ensuite dans Figma vous avez la possibilité de partager des librairies de composants donc quand on travaille en équipe. On essaie de travailler on va dire pour être le plus productifs, le plus efficace possible. L’objectif c’est de pouvoir ne pas réinventer la roue, et quand des composants sont prêts, c’est de pouvoir les mettre à disposition du reste de l’équipe. Et pour ça vous pouvez créer des librairies c’est des librairies ensuite que vous allez pouvoir activer.

Imaginons que vous avez un nouveau collaborateur qui rentrent de votre équipe et bien lors de l’onboarding, vous lui dites « on met à disposition notre librairie de composants » et de suite il va avoir accès aux boutons, aux inputs, aux checkboxes, aux radio buttons… A tous les composants qui composent votre design d’interface. Et lui il aura plus qu’à faire des drag and drop et de cette manière là.

Vous avez la possibilité de mettre à jour la librairie et du coup d’actualiser automatiquement l’ensemble des projets sur lesquels sont utilisés ces composants. C’est extrêmement puissant.

Ce qui est vraiment super intéressant avec Figma c’est que c’est autant un logiciel de prototypage rapide où on peut être à 7,8 sur un fichier et bouger les choses très rapidement. Mais c’est aussi un logiciel de production design vraiment finale où on va pouvoir transmettre en fait ces design aux développeurs. Comme tu en parlais avant Julien, si tu cliques sur un élément par exemple on verra qu’il y a le mode « Inspect ». Le développeur peut directement en fait récupérer les morceaux de code.

Ici vous voyez du code CSS, de la feuille de style, et il récupère exactement les dimensions de l’élément. Il peut récupérer les codes couleurs etc. Donc ça va quand même vraiment très loin comme logiciel. C’est extrêmement pointu. Et je pense que d’une réticence au départ de beaucoup d’entreprises avant de passer sur Figma c’était « oui mais on a tout construit dans ce Sketch », avec Zeppelin et des plugins comme ça qui permettent le lien vers les développeurs, et bien on se rend compte que Figma maintenant a intégré tout ça et on peut vraiment « at scale ».

Donc pour des très grands entreprises qui travaillent sur des produits finis extrêmement complexes on peut absolument tout faire maintenant avec Figma. Dans le navigateur, ce qui est assez impressionnant.

Ensuite dans les choses que j’apprécie particulièrement c’est la flexibilité au niveau des composants. donc là je rentre on va dire en profondeur à part dans les détails de de figues ma mais en face que ce que j’apprécie vraiment c’est le film que dans Figma la montre est vraiment les composantes les propriétés des composants de manière individuelle. En fait vous pouvez override est un composant un composant.

Qu’est ce que c’est d’abord. C’est un élément que vous allez pouvoir utiliser à plusieurs reprises typiquement un bouton. Tu pourrais nous montrer un exemple? Ouais tout à fait donc ça par exemple, c’est un composant que j’ai créé au départ. Je me suis dis que dans mon design d’interface j’allais avoir plein de boutons et j’ai pas envie à chaque fois de devoir recréer un bouton.

L’idée c’est qu’il y ait un composant maître, c’est celui-là qui est ma référence, donc voilà à quoi ça ressemble. Voilà ça c’est mon composant maître. Je peux également lui définir différents états on peut imaginer que quand on va présenter la maquette à l’utilisateur. Ben il pourra voir que quand on passe sur le bouton il y a un léger hover on peut créer différents états et donc l’idée c’est de se dire ce composant. Là on va l’utiliser partout sur les maquettes et à chaque fois qu’on va l’utiliser et bien prenons ici.

Je propose que tu change la couleur de tous tes boutons en vert caca d’oie. Est ce que tu es capable de le faire en deux minutes? Ouais tout à fait… (rires). Là on peut imaginer que. J’ai lui fait détruire son App en live (rires). Alors ce bouton là actuellement il est en rose voilà. « Vert caca d’oie, Comic Sans ».

Hum, alors du coup lui donner une autre couleur on va les mettre en vert, et vous allez voir. En fait que tous mes boutons dans l’application ont été changés en vert sur 150 écrans d’un coup. Exactement. Donc là, on va par exemple voir si j’ai bien fait les choses. On s’aperçoit que tous les boutons ils ont été changés en vert et alors ce qui est très intéressant, c’est que vous pouvez bien évidemment les overrider. Parce que le bouton au départ je vous ai mis le texte « enregistrer » et on peut imaginer ici mettre « valider ».

Peut-être vous vous demandez pourquoi ce qui fait pas des sauvegardes en fait de son fichier. Tu peux nous en parler? Alors, effectivement Steph l’avantage de Figma, c’est qu’il garde toutes vos modifications en Live. Il n’y a absolument pas besoin de le faire un fichier sauvegardé ou un « Pomme+S ». Tous les éléments sont sauvegardés un petit peu de la même manière que Google docs.

D’ailleurs c’est intéressant ce que tu dis parce que Google docs a vraiment été l’inspiration de départ de Figma je l’ai pas dit avant. Mais donc en 2012, 15 -on sait pas exactement mais à peu près dans ces eaux là- quand les créateurs de Figma lancent le logiciel dans un marché qui est déjà over saturé. Ils viennent avec cette idée de lancer quelque chose dans le navigateur. Donc sans installation PC et Mac etc. Mais voilà ils viennent aussi avec cette idée, cette référence à Google docs. Que c’est un simple lien qu’on peut partager et les gens peu facilement fait le modifier, ça autosave, et c’est cette référence à Google docs qui accélère vraiment le processus.

Cette logique en fait a vraiment inspiré Figma tout comme d’ailleurs Sketch avait été inspiré par Apple Keynote, par exemple. C’est intéressant de voir des logiciels en fait de création de slide, qui inspirent des logiciels de design. Je trouve vraiment ça intéressant. Complètement, et au même titre que la sauvegarde la synchronisation tout ce que vous faites finalement le l’utilisateur final qui est en mode « preview » il a directement accès à la dernière version de notre fichier.

Ca c’est vraiment pas mal. Et puis vous avez également une notion de versioning. Donc on peut imaginer qu’un jour, vous avez fait une grosse bêtise vous dites « oh là là mais en fait on a tout pété » et ben vous avez la possibilité de revenir en arrière. De revenir à une version antérieure et de restaurer cette version. Donc ça c’est vraiment un gros point fort.

Alors moi j’aimerais bien vous parler en fait de cette migration que j’avais effectuée depuis Sketch. Parce que pour le coup je me suis dit « Comment ça va se passer? » C’était très simple, j’ai créé un nouveau projet j’ai demandé en fait à Figma d’importer un fichier Sketch, parce que oui,

Figma importe des clichés Sketch! et puis j’ai laissé mouliner, mais alors il faut savoir que mon fichier était quand même assez assez gros… c’est pas un énorme cliché mais je pense qu’il pesait un peu plus de 100 mégas – Donc c’était ce fichier-ci, c’est ça? Voilà, c’était ce fichier qui ressemblait plus ou moins à ça dans Sketch. Que j’ai un petit peu reformaté et puis j’ai laissé mouliner.

Mais j’ai attendu peut-être dix minutes. Ca dépend de votre connexion et au bout de 10 minutes on, m’a dit « c’est votre fichier il est prêt » et là surprise. J’ai ouvert le fichier et je me suis rendu compte que tout avait été conservé. Et quand je vous dis tout a été conservé ça allait jusqu’aux composants. Donc je me suis dit « non mais c’est pas possible, comment ils ont fait? »

J’ai vraiment regardé l’ensemble des artboards qui était devenus maintenant des frames dans Figma. Et je dois dire que j’ai été relativement surpris par la qualité d’importation et la restitution.

Qu’est-ce que j’ai fait ensuite? Parce que forcément j’ai quand même travaillé un petit peu pour le remettre en forme évidemment. J’ai refait les interactions parce que les interactions je les avais pas faites dans Sketch mais dans Invision. Donc ça je les ai perdues mais je le savais, et ensuite je me suis refait mon petit design system avec mes composants, mes différentes couleurs, mes différents composants avec des input. J’ai même créé des interactive composants, puisque maintenant dans Figma vous avez la possibilité de créer différents états.

Vous voyez par exemple là vous avez une checkbox vide et une checkbox cochée. Pareil pour les radios buttons, je me suis de suite amusé avec les nouvelles fonctionnalités que je pouvais pas avoir dans Sketch. Je dois dire que je ferais pas machine arrière maintenant qu’il est bien propre mon fichier. Je vais continuer utiliser Figma jusqu’à ce qu’il y a un autre logiciel qui le devance (rires).

Alors c’est ça donc vous voyez que Julien est devenu un peu un fanboy de Figma, et moi aussi je dois dire. Mais on n’est pas du tout mariés à Figma. Le jour où quelqu’un d’autre par exemple Adobe XD mettent les bouchées doubles et font quelque chose de vraiment mieux. Par exemple ils intègrent la vidéo vraiment bien, c’est pas du tout impossible qu’on on re-migre vers un autre logiciel. On reste vraiment flexible.

Pour l’instant en 2022 au moment où on vous parle Figma nous sommes clairement au dessus de la mêlée. Pour ses fonctionnalités de partage facilité d’intégrer les gens dans le projet de composants de librairies et tout ça. On a vraiment l’impression que c’est un logiciel qui est voilà qui est dans l’air du temps qui permet autant de prototyper et des choses rapidement que d’avoir des fichiers de production d’une extrêmement haute qualité.

Est-ce qu’on passe à la partie combien ça coûte! « Combien ça coûte? » est ce que peut-être tu pourrais trouver la page pricing sur leur site? Parce que on se le dise on n’y comprend rien on sait pas du tout combien c’est pas du tout clair. Ca a l’air clair en fait, mais en vrai c’est pas très clair. Donc vous avez un plan Figma gratuit.

Peut-être Julien parle-nous du gratuit. Oui tout à fait. Alors faut savoir que le gratuit il est peut être avantageux pour les personnes qui ont peu de projets. Là en l’occurrence sur le plan Starter vous pouvez créer jusqu’à trois projets. Pour vous donner un exemple le projet que vous avez vu précédemment, il est fait avec un plan Starter.

Alors dans le plan Starter vous allez être simplement limité au nombre de pages en l’occurrence j’utilise trois « pages » donc c’est le maximum autorisé. Alors justement, ça il faut dire quelque chose: les « pages » c’est pas les vues des applications peut-être ça pourrait montrer à quoi ça ressemble? C’est vraiment pas clair du tout.

Les pages c’est les pages que vous retrouvez ici, si vous en créez plus de 3 Figma va vous dire vous de les placer sur un plan professionnel ou payant. Donc ce qu’ils appellent une page c’est plus une sorte de gros fichier qu’une collection d’art board. Par contre ils ont changé un petit peu leur pricing puisque maintenant vous pouvez intégrer autant de collaborateurs, autant d’éditeurs sur votre projet. Chose qui était limitée avant.

Et vous avez également un accès donc la possibilité de créer trois Figjam files. Donc le fameux tableau blanc pour faire du design thinking ou de l’idéation, c’est déjà plutôt un plan qui est assez avantageux. Et puis donc pour les plans professionnel du coup c’est moi qui vous en parle. C’est moi qui paye chaque mois les licences ce qu’il faut bien comprendre déjà c’est que à la différence d’un logiciel comme Adobe ou Sketch jadis, où on achetait le logiciel dans sa boite. On met le cd room.

Vous souvenez de cette époque? Où Photoshop coûtait 700 dollars mais du coup vous l’aviez pour toute la vie? Ben non on m’attendait vraiment dans des modèles d’abonnement. En fait on va payer au mois, donc soit vous pouvez vous avez un petit projet vous travaillez seul restez sur le Starter il sera gratuit pour toujours. Et ça c’est quand même très très malin d’avoir ce modèle freemium pour commencer.

Nous on est maintenant dans une agence et on utilise Figma de manière professionnelle, donc c’est normal qu’on paie chaque mois et nous on est sur le plan vert « Professionnal ». Qui est le plan donc à 12 dollars par éditeur par mois est en fait donc nous en fait, on n’a pas acheté le plan annuel, on a acheté le plan à 15 dollars par mois par éditeur. Et j’ai eu quelques petites surprises avec ça.

Parce que ce qu’ils appellent un éditeur, c’est que dès qu’on invite des personnes, qui peuvent modifier le fichier ils deviennent des éditeurs. Donc notre métier c’est de faire des workshops. On fait un workshop qui dure une semaine on a sept – huit personnes qui nous rejoignent le temps d’une journée pour prototyper. Et qui repartent. Et une fois j’ai reçu la mauvaise surprise de recevoir comme ça une facture de Figma de 450 dollars pour 1 mois. Parce que en fait pour de vrai on est une petite agence et on n’a que quelques comptes designers.

Donc habitués à payer environ 45 – 50 dollars par mois et là d’un coup j’ai eu 450 dollars: pourquoi? Parce que j’avais invité des clients qui on travaillé avec nous un jour, et qui étaient restés en éditeurs. Et du coup ça a fait monter la facture, bah oui. Donc je m’étais un peu énervé je leur avais envoyé un e-mail etc pour leur dire « non mais il y a une erreur, ils ont participé qu’un jour ». Et très sympas, ils m’ont remboursé la différence.

Six mois ont passé et j’ai reçu un nouvel email donc je payais mes 45 dollars etc chaque mois, et j’ai reçu un nouvel email à 350 dollars et je me dis « non qu’est ce qui s’est passé de nouveau? Et c’est le même problème? » mais en fait il y avait une petite différence dans l’email. C’est qu’en fait c’était pas une facture j’ai pas été facturé. C’était juste une note qui me disait « dans cinq jours vous allez être facturé des 350 $ parce que vous avez 15 éditeurs sur votre compte Figma ».

Et ça change tout! Parce que ce qu’ils ont fait c’est très malin. Il vous envoient ça. En fait c’est un récapitulatif de combien vous avez de personnes sur votre compte actifs, en tant qu’éditeurs, et combien ça va coûter mais ça VA coûter. C’est un état futur et vous avez un petit lien dans cet email.

Là je vous explique comment payer moins cher sur Figma. Donc écoutez moi bien- vous avez donc ce relevé de combien vous devrez payer dans quelques jours, vous avez un petit lien, vous pouvez cliquer. Puis là, ça vous envoie au tableau d’administration et vous pouvez en fait enlever des personnes en éditeur. Donc si c’est par erreur vous avez des clients qui ne doivent plus rester en éditeur vous pouvez les décocher, les mettre en visiteur simplement.

Du coup vous allez être facturé simplement 15 $ pour les vrais éditeurs que vous utilisez donc voilà. C’est vraiment un conseil que je peux vous donner ne laissez pas à Figma juste en auto pilote vous facturer chaque mois comme ça. Ayez une vision assez fine de ce qui est dépensé. Pour n’importe quel type d’entreprise ça peut être une petite entreprise comme la nôtre, une grande entreprise parce que il y a de bonnes chances que vous payez beaucoup trop parce qu’en fait vous payez pour des gens qui sont complètement inactifs qui ont été invités une fois et qui sont repartis.

Faites vraiment attention avec ça. Si vous êtes attentif et vous contrôlez chaque mois combien vous allez payer vous aurez aucun problème avec Figma. Et vraiment cette solution pour la qualité de ce qu’elle amènent qui est extrêmement abordable.

Exactement et je peux même rajouter je fais un petit parenthèse concernant les étudiants qui voudraient se former à Figma.C’est totalement gratuit. Il faut simplement faire une demande. Il y a un petit lien ici qui vous emmène sur un formulaire et vous recevez votre licence très très rapidement. C’est fait sous 24 heures en général, donc que vous soyez étudiant au formateur n’hésitez pas à demander votre licence étudiante. Et du coup c’est totalement gratuit.

Est-ce que là juste en regardant les fonctionnalités du plan « Organisation ». Est ce que tu vois un intérêt en fait qui c’est qui devrait passer sur ce plan-là? Je pense que là déjà on s’adresse à des organisations où il y a des départements de design, voire même des cross-départements, où il y a probablement des interactions entre différents acteurs. Je pense que ça peut valoir le coup quand, dans une organisation où il y a déjà plus de dix personnes qui utilisent Figma. Sprès je pense que ça va être on va dire plus sur du management, sur des choses beaucoup plus pointues. Sur le fait d’avoir des branches de pouvoir merger des projets.

Là on rentre vraiment sur des sur des choses qui sont poussées, qui ne touchent pas la majorité des utilisateurs. En tous cas nous on est sur un plan professionnel un plan vert et on est tout à fait contents avec ça. Mais je peux imaginer qu’ils y ait des besoins pour des très grandes entreprises. Mais j’avoue que je suis un petit peu perdu par à quel point le prix augmente par éditeur. Enfin voila j’ai un peu de peine à comprendre honnêtement ce pricing pour les grandes organisations.

Peut-être si quelqu’un regarde cette vidéo chez Figma, c’est volontiers si vous pouvez nous amener des précisions parce qu’on trouve un peu cher..Voilà voilà (rires)

Je pense que on va a conclure: qu’est ce qu’on peut dire: à qui s’adresse Figma, Steph? « A qui s’adresse Figma? » je dirais, bon évidemment aux designers qui vont faire du design UI et donc des dizaines d’écrans de sites web et d’applications mobiles etc…

Bien sûr, mais aussi aux chefs de produit, à aux équipes qui collaborent avec des designers. Nous on est vraiment dans le design sprint donc dans ces workshops d’innovation, c’est aussi un excellent logiciel de prototypage rapide. Donc je dirais à toute équipe ou start-up qui doivent mettre en image des concepts en fait et rendre tangible les idées des prototypes.

Donc ça peut être des start up qui cherchent du financement, qui veulent présenter des choses à des investisseurs. Ca peut être voilà la personne passionnée qui veut faire des apps dans son coin. Je pense que c’est vraiment extrêmement ouvert comme marché. Et c’est plus du tout la petite niche de designers experts qui utilisaient Mac qui était visé par Sketch à l’époque.

Ca c’est vraiment énormément démocratisé. Exactement!

Top Julien, un grand merci d’avoir partagé tout ça avec nous, vraiment hyper cool. J’espère que cette vidéo vous a plu n’hésitez pas à vous abonner à la chaîne ça nous fait plaisir déjà. Comme ça on va refaire d’autres vidéos sur peut-être d’autres outils!

On vous laisse avec ça, à très bientôt!

Pour en savoir plus sur le prototypage lors d’un design sprint: Prototyper

L’application présentée dans l’épisode désignée par Julien: https://auto-ecole.app