Au revoir, Adobe. Bonjour, Figma ! 👋

Tout le monde me parle de Figma et j’hĂ©sitais Ă  reprendre une licence Sketch, il fallait que je comprenne de quoi il retourne avec Figma. Rien de mieux que l’avis d’un designer :

Signe Roswall đŸ™‹đŸŒâ€â™€ïž, digital product designer Danois nous parle de ses diffĂ©rentes relations et de son dernier coup de coeur, le logiciel de design collaboratif Figma :

Ma relation avec Adobe a commencĂ© il y a plus de dix ans, lorsque, adolescent peu sĂ»r de lui et tachetĂ©, j’ai dĂ©couvert Photoshop et les merveilles de l’outil Clone.

Plus tard, c’est avec Photoshop que j’ai crĂ©Ă© mon tout premier site web avant de passer minutieusement Ă  Illustrator. J’ai mĂȘme eu une brĂšve romance avec Dreamweaver dans laquelle j’ai Ă©crit une partie de mon tout premier code.

Bien qu’une dĂ©cennie ne soit sans doute pas beaucoup par rapport Ă  une vie entiĂšre, elle a Ă©tĂ© une pĂ©riode de changements massifs, tant technologiques que sociaux, y compris dans le domaine du design. Et avec la version bĂȘta de « XD » d’Adobes (que je lis encore comme un smiley qui rit), j’Ă©tais heureux de continuer dans la suite Adobe.

Mais le jour est venu oĂč j’ai ouvert Figma.

Attends, et Sketch ?

J’entends presque tous les gens de Sketch qui me disent : « Pourquoi n’utilises-tu pas Sketch ? Sketch est gĂ©nial ! » Et bien sĂ»r, je suis d’accord.

Bien qu’il soit sorti en 2010, je n’avais pas encore essayĂ© Sketch avant d’accepter un poste oĂč je devais l’utiliser Ă  la place de XD. Et mĂȘme si cela signifiait que je devais apprendre un tout nouvel outil de conception tout en devant fournir rapidement des conceptions de qualitĂ© (oui), j’ai fini par aimer Sketch.

J’ai crĂ©Ă© et utilisĂ© des symboles pour une conception rapide et cohĂ©rente et j’ai installĂ© des plugins comme Auto Layout pour un redimensionnement facile et rĂ©actif. J’ai Ă©galement ajoutĂ© un gĂ©nĂ©rateur de contenu, ce qui m’a permis de gagner beaucoup de temps et, il faut bien l’admettre, a donnĂ© Ă  mes maquettes un aspect plus professionnel avec des espaces rĂ©servĂ©s appropriĂ©s au lieu de Dark Vador, Kitty Whiskers et le vĂ©nĂ©rable prĂ©nom Lastname, R.I.P.

Je pouvais structurer mes dessins de maniĂšre Ă  n’avoir Ă  faire des changements qu’Ă  un seul endroit – la mĂȘme logique que celle que j’ai tant apprĂ©ciĂ©e en utilisant Sass pour le dĂ©veloppement du frontend. Le fait de travailler pendant un an et demi sur Sketch pour la refonte complĂšte d’une plate-forme SaaS m’a beaucoup fait mĂ»rir en tant que designer.

Mais Sketch a un Ă©norme inconvĂ©nient : il n’est pas disponible pour Windows.

À l’heure actuelle, tous les autres concepteurs de Mac crachent une bouchĂ©e de cafĂ© : « Quoi ? Vous utilisez un PC ?! » Et bien que je ne jure que par ma fidĂšle bĂȘte de somme pour le jeu, je prĂ©fĂšre effectivement utiliser un Mac pour mon travail.

Mais aprĂšs avoir Ă©tĂ© licenciĂ© par la sociĂ©tĂ© qui prĂ©fĂ©rait Sketch, j’ai trouvĂ© un nouveau travail au sein d’une Ă©quipe oĂč les dĂ©veloppeurs et mĂȘme l’autre concepteur utilisaient Windows. Cela excluait complĂštement Sketch comme option et signifiait – vous l’avez devinĂ© – le retour Ă  XD. Au dĂ©but, cela m’a rendu heureux, enfin rĂ©unis ! Mais je me suis vite retrouvĂ© Ă  dĂ©sirer la facilitĂ© de Sketch. J’avais l’impression d’avoir conduit une Tesla pendant une longue pĂ©riode, mais de devoir ensuite retourner sur une Fiat.

Quoi qu’il en soit, lorsque mon premier projet est entrĂ© en production vers mars 2019, les dĂ©fis posĂ©s par l’utilisation de XD pour toute l’Ă©quipe sont devenus douloureusement Ă©vidents :

  • Les dĂ©veloppeurs n’Ă©taient pas satisfaits de la prise en main qui n’Ă©tait pas intuitive et se sentaient mal Ă  l’aise dans la navigation.
  • Le partage des fichiers de conception sous forme de liens publics semblait peu sĂ»r, mais l’ajout d’une protection par mot de passe a Ă©galement rendu la situation tout simplement frustrante.
  • J’avais du mal Ă  assurer une conception cohĂ©rente alors que le partage des Ă©lĂ©ments essentiels du systĂšme de conception tels que les couleurs et les styles de texte entre les fichiers n’Ă©tait pas possible dans XD Ă  cette Ă©poque.
  • Je ne pouvais pas non plus crĂ©er de symboles, ce qui rendait les dessins terriblement difficiles Ă  mettre Ă  jour alors que la moindre modification prenait des heures Ă  appliquer partout.

De plus, en tant que deux designers et potentiellement plus Ă  l’avenir, nous avions vraiment besoin de la bibliothĂšque de design « one source of truth« . Mais cela signifiait aussi que nous devions finalement ĂȘtre contraints Ă  la spirale descendante du dĂ©sespoir administratif avec des dossiers et des fichiers de dessins partagĂ©s. Des copies contradictoires, des copies contradictoires partout !

Donc, lorsque deux des dĂ©veloppeurs ont suggĂ©rĂ© indĂ©pendamment Figma, nous avons achetĂ© un abonnement mensuel et avons dĂ©cidĂ© de l’essayer. Aujourd’hui, Ă  peine un an et un nouveau travail plus tard – deux en fait, je suis trĂšs pointilleux – je suis toujours dans le train de Figma et voici pourquoi.

Une meilleure vue d’ensemble

L’un des plus grands et des meilleurs changements introduits par Figma, Ă  mon avis, est que la gestion des fichiers n’est plus une mer de fichiers localement sur votre ordinateur ou enfouis dans des dossiers partagĂ©s ; tout est dans Figma derriĂšre votre login et tout le monde dans l’Ă©quipe regarde la mĂȘme structure.

Personnellement, j’Ă©tais un peu inquiet de la façon dont Figma fonctionnerait avec ma propre structure ou plutĂŽt de mon absence totale de structure. En tant que designer et personne, je m’Ă©panouis mieux dans le chaos. Je n’envisage pas de nettoyer la maison avant que mon chemin vers les zones les plus importantes de celle-ci – mon bureau/PC, ma chambre, l’endroit oĂč se trouve le chat et le rĂ©frigĂ©rateur – ne soit littĂ©ralement obstruĂ©. De mĂȘme, mes dossiers sont pleins d’idĂ©es, d’UI Ă  moitiĂ© cuites, de variations de design et aussi de maquettes finies.

Cependant, si la conception de produits m’a appris quelque chose, c’est que la tendance Ă  ĂȘtre dĂ©sordonnĂ© et nĂ©gligent avec la structure pourrait ĂȘtre due Ă  un manque de bonnes options. Et Figma a de nombreuses options de ce type pour organiser l’espace de travail :

  • Équipes
  • Projets dans le cadre des Ă©quipes
  • Fichiers Ă  l’intĂ©rieur de chaque projet
  • Pages Ă  l’intĂ©rieur de chaque dossier
  • Cadres Ă  l’intĂ©rieur de chaque page (« artboards »)

Il existe un million de façons de structurer les dossiers de conception et il n’y a pas de bonne ou de mauvaise façon de le faire – il n’y a que la façon qui vous convient, Ă  vous et Ă  l’Ă©quipe. Il serait toutefois bon d’aligner les conventions de dĂ©nomination sur celles de vos collĂšgues en dĂ©veloppement, afin que vous parliez tous des mĂȘmes « cartes ».

En parlant de cartes, un collĂšgue m’a appris qu’il faisait des images de couverture pour les fichiers de vos projets, ce qui donne Ă  tout un aspect de premier ordre.

Quant Ă  mes tendances dĂ©sordonnĂ©es, elles n’ont pas Ă©tĂ© corrigĂ©es par Figma, mais plutĂŽt par une collaboration avec un chef de produit allemand pendant prĂšs d’un an. « Ordnung muss sein ! » Il criait tout en me fouettant Ă  plusieurs reprises avec les sangles de son Lederhosen. En pratique, j’ajoute gĂ©nĂ©ralement une page au fichier appelĂ©e (idĂ©es) oĂč je peux jouer et jeter des trucs sans avoir Ă  nettoyer.

Une meilleure façon de collaborer

Un autre des plus grands et des meilleurs changements que Figma a également introduit est évidemment la collaboration en direct, surnommée « Multiplayer ».

La crĂ©ation et l’invitation de personnes Ă  faire partie d’une Ă©quipe leur donnera accĂšs soit comme rĂ©dacteurs ($), soit comme visionneurs (gratuit), les premiers Ă©tant gĂ©nĂ©ralement les concepteurs et les chefs de produit et les seconds principalement les dĂ©veloppeurs et les QA. Toute personne ajoutĂ©e peut voir ou modifier, ajouter des commentaires, jouer des prototypes et Ă©galement inspecter les conceptions.

Source : cet article de Figma

Étant une autocritique impitoyable, j’Ă©tais particuliĂšrement sceptique quant Ă  l’exposition de mes dessins inachevĂ©s Ă  n’importe quel membre de l’Ă©quipe. Cela m’a Ă©galement fait douter que j’ose encore essayer des idĂ©es nouvelles ou diffĂ©rentes en sachant que d’autres concepteurs et dĂ©veloppeurs pourraient les voir. J’avais peur d’ĂȘtre… « surveillé ».

Certes, c’est un peu effrayant quand quelqu’un d’autre surgit soudainement dans un de vos fichiers et commence Ă  cliquer. Mais d’aprĂšs mon expĂ©rience, les gens sont gĂ©nĂ©ralement trop occupĂ©s par leurs propres affaires pour garder un Ɠil sur les vĂŽtres (et s’ils ne le sont pas, eh bien, cela en dit plus long sur eux que sur vous, n’est-ce pas ?) La plupart du temps, je travaille seul et c’est aussi comme ça que je le prĂ©fĂšre, mais chaque fois que la lune est bleue, j’ai aussi fait du « design en binĂŽme ». Pouvoir dĂ©placer les objets de l’autre et les modifier donne l’impression de construire quelque chose ensemble. Mon impression gĂ©nĂ©rale est Ă©galement que la plupart des dĂ©veloppeurs sont trĂšs positifs quant Ă  leur participation au processus de conception et Ă  l’accĂšs aux fichiers de conception. D’un point de vue pratique, pour les revues de conception, cela fonctionne Ă©videmment trĂšs bien lorsque chacun peut accĂ©der aux dessins sur son propre Ă©cran. En fin de compte, plus vous aurez d’yeux sur vos dessins ou modĂšles, mieux ils se porteront.

Aussi : le curseur de la souris est Ă  cinq pattes ! Et comment !

Une meilleure configuration des composants

Pendant que nous essayions Figma pour l’Ă©quipe en 2019, nous travaillions sur une refonte complĂšte de la plate-forme. Cela signifie que j’ai commencĂ© par les maquettes finies sur XD et ensuite, comme un chat laissĂ© seul avec un rouleau de papier toilette, j’ai tout dĂ©coupĂ© en morceaux dans Figma.

Chaque morceau de papier toilette dĂ©chiquetĂ© avait des styles comme les couleurs, la typographie, les icĂŽnes qui, si on les combinait Ă  nouveau… Ă  travers le… renversement… du temps… ou un travail de collage vraiment mĂ©ticuleux, peut-ĂȘtre… dans un morceau entier de papier toilette, on pourrait distinguer des Ă©lĂ©ments de mise en page comme les cartes, les en-tĂȘtes et la navigation. Finalement, j’aurai des feuilles entiĂšres de papier toilette pour construire… des mises en page entiĂšres… đŸ€”

EN FIN DE COMPTE, LES COMPOSANTS DE FIGMA SONT COOL, OK ?

La plate-forme que nous avons redessinĂ©e utilisait Bootstrap 4 et bien que je n’aie pas de fĂ©tichisme pour Bootstrap en particulier, j’aime l’idĂ©e d’avoir un cadre frontal comme base de conception. Les frameworks utilisent souvent des modĂšles d’interface trĂšs communs et bien Ă©tablis, avec une bonne convivialitĂ©, et peuvent servir de point de dĂ©part ou de « guide » pour structurer vos composants. La documentation rĂ©vĂšle gĂ©nĂ©ralement tous les diffĂ©rents Ă©lĂ©ments et leurs variations, ainsi que la façon dont ils sont nommĂ©s du point de vue du dĂ©veloppement.

J’ai beaucoup expĂ©rimentĂ© avec les composants de boutons avant de me dĂ©cider pour une structure qui fonctionnait. J’ai fini par crĂ©er des boutons dans les trois variantes de taille de Bootstrap ; Small, Medium (par dĂ©faut) et Large avec diffĂ©rentes options de texte et d’icĂŽnes – le tout dans des variations solides et contournĂ©es.

Chaque fois que j’avais besoin d’un bouton, je prenais simplement un de ces Ă©lĂ©ments et je lui donnais la bonne couleur en utilisant des styles de couleur.

Ajoutez Ă  cela l’Auto-Layout de Figma, qui vient de sortir, et vous ĂȘtes prĂȘt Ă  voler.

Vous pouvez Ă©galement crĂ©er de nouveaux composants pour diffĂ©rentes couleurs de bouton en tant que copies des composants du bouton principal, mais j’ai trouvĂ© qu’il Ă©tait tout aussi facile d’avoir les couleurs, primaire, secondaire, alerte, etc. Le texte du bouton utilise un style de texte et si vous le modifiez, Figma donnera une option de mise Ă  jour dans tous les fichiers oĂč le style est utilisĂ©. Oui. Donc, lorsque la direction dĂ©cide de faire appel Ă  une agence de luxe pour crĂ©er une nouvelle image de marque, mĂȘme si vous ĂȘtes parfaitement compĂ©tent pour le faire en interne, vous devrez peut-ĂȘtre adopter des mots de marque bullshit comme « digne de confiance » et « durable », mais bon, au moins vous ne passerez pas des semaines Ă  mettre Ă  jour tous vos dessins !

Une autre chose qui mĂ©rite d’ĂȘtre mentionnĂ©e est la fonction de grille de mise en page qui m’a permis d’ajouter rapidement la grille de mise en page sur les nouvelles pages. J’ai Ă©galement crĂ©Ă© un fichier dans le systĂšme de conception avec tous mes espaces communs comme styles de grille afin de pouvoir les ajouter aux cadres et aux composants lors de la conception.

Et à ce propos, la possibilité de modifier le montant de la prime pour les petits et les grands coups de pouce ? Sacré génie.

Une meilleure façon de réaliser un prototype

L’heure de l’histoire : Lorsque j’Ă©tudiais pour devenir dĂ©veloppeur web en 2011, le design Ă©tait quelque chose qui se passait pendant que je construisais un site web.

En gĂ©nĂ©ral, je crĂ©ais une page d’accueil ou un moodboard dans Photoshop et je le traduisais en style. Je me souciais beaucoup de l’apparence d’un site web et j’ai Ă©galement commencĂ© Ă  Ă©tudier les principes d’ergonomie en parallĂšle. Certains de mes professeurs pensaient que je passais trop de temps sur le design et trop peu sur la programmation.

Donc, en m’Ă©loignant du dĂ©veloppement pour me concentrer sur le design, je suis aussi passĂ© de la conception de l’interaction Ă  la crĂ©ation d’une maquette. Je suis passĂ© de la construction de la maison Ă  la rĂ©alisation d’une image, en dessinant le plan de l’Ă©tage, en essayant de visualiser aux autres comment la maison devrait ĂȘtre. J’ai fini par rĂ©aliser que cela signifiait qu’une grande partie de mon design manquait dĂ©sormais dans l’interaction elle-mĂȘme.

Mais voir un plan d’Ă©tage n’est pas la mĂȘme chose que de se promener dans une maison.

C’est la raison pour laquelle je suis passĂ© Ă  XD au dĂ©part, car il a introduit le prototypage directement dans le programme de conception – plus tard avec une fonction de prĂ©visualisation qui vous permet de « jouer » le design sur votre tĂ©lĂ©phone. Cela m’a semblĂ© rĂ©volutionnaire, maintenant je peux faire une visite vidĂ©o de la maison ! C’Ă©tait au moins un peu mieux et cela m’a aussi aidĂ© Ă  concevoir le design comme un voyage Ă  travers diffĂ©rentes piĂšces.

De la mĂȘme maniĂšre, le point d’inflexion pour moi avec Figma a Ă©tĂ© la façon dont le prototypage s’intĂšgre parfaitement en parallĂšle avec le design – il n’y a pas de fossĂ© gĂȘnant entre les deux oĂč il faut changer de programme ou aller sur un site web.

Le prototypage dans Figma offre Ă©galement de nombreuses possibilitĂ©s de dĂ©clencheurs et d’animations. Les options comprennent mĂȘme des paramĂštres de prĂ©sentation du prototype oĂč vous pouvez sĂ©lectionner le type d’appareil et la couleur de fond, ce qui permet de gagner beaucoup de temps lors de la crĂ©ation de gifs pour les articles de taille moyenne que je pourrais ajouter. Mais la fonctionnalitĂ© la plus intĂ©ressante jusqu’Ă  prĂ©sent est le comportement Overflow qui vous permet – et pour cela vous devriez probablement vous asseoir si ce n’est pas dĂ©jĂ  fait – de faire glisser verticalement les curseurs dans les prototypes mobiles et de faire dĂ©filer les pages avec des menus fixes. Ouais !

Une meilleure façon de concevoir

Figma a placĂ© la barre trĂšs haut avec le slogan « une meilleure façon de concevoir » sur la premiĂšre page de son site web Ă  partir d’avril 2019, surtout si l’on considĂšre qu’ils ne se comparent Ă  aucun autre outil de conception en particulier, juste… meilleur en gĂ©nĂ©ral. Et jusqu’Ă  prĂ©sent, pour moi, ils ont tenu leurs promesses et continuent Ă  le faire en publiant des fonctionnalitĂ©s essentielles. Prenez un moment pour rĂ©flĂ©chir Ă  ce qu’il faut vraiment, Ă  ce qu’il faut pour affronter un gĂ©ant tel qu’Adobe.

Plus d’une dĂ©cennie s’est Ă©coulĂ©e depuis l’ouverture de Photoshop pour la premiĂšre fois.

Depuis la migration de tous mes dessins vers Figma l’annĂ©e derniĂšre, je n’ai pas eu un seul programme Adobe sur mon ordinateur de travail dans les deux postes prĂ©cĂ©dents que j’ai occupĂ©s. Cela me semble trĂšs dĂ©finitif. Une Ă©poque de ma vie est dĂ©finitivement, officiellement terminĂ©e.

Mais quand je regarde l’ensemble de ma relation avec Adobe – qui a variĂ© partout dans le spectre entre l’excitation de haut vol et l’enfer sur terre – je sais maintenant que dire au revoir Ă  Adobe, c’est pour le mieux.

C’est pour une meilleure façon de concevoir.

Via Medium

Pour d’autres ressources sur Figma, regardez ici : Ux-highlight et le compte Medium de Figma.

 

 

 

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.