Mettre en place la livraison des designers aux développeurs avec Figma et Jira
Les équipes de développement de produits d'Ingka Group, de One.com et de Condé Nast partagent leurs outils et leurs conseils pour atteindre un état de flow quasi insaisissable mais qui peut grandement faciliter la transition du design vers le développement.
Partager Mettre en place la livraison des designers aux développeurs avec Figma et Jira
Illustration de Jaedoo Lee.
Le terme « flow », inventé il y a plusieurs dizaines d'années par le chercheur pionnier Mihaly Csikszentmihalyi, est décrit comme « un état dans lequel les gens sont si absorbés par une activité que rien d'autre ne semble avoir d'importance. L'expérience est si agréable que les gens continuent de s'y adonner, quel que soit le coût, pour le simple plaisir ».
La vitesse de développement des produits, c'est-à-dire la capacité à proposer rapidement les bonnes fonctionnalités, est le Saint Graal de la création d'une expérience utilisateur optimale. Pourtant, il est rare qu'une entreprise parvienne à tenir le rythme à mesure qu'elle évolue. Cette capacité à livrer les bonnes fonctionnalités et à optimiser l'expérience n'est pas le fruit du hasard. Derrière chaque nouvelle fonctionnalité ou mise à jour de produit se trouve une base d'outils, de processus et de rituels qui aident les équipes à mieux travailler ensemble. Ce principe fondamental est essentiel pour atteindre l'état de flow, qui permet aux équipes d'itérer, de collaborer et de livrer un produit aussi efficace que possible.
Dans son célèbre essai intitulé « Maker’s Schedule, Manager’s Schedule », Paul Graham, fondateur de Y Combinator, explique que si les managers peuvent passer d'une activité à l'autre toutes les heures, les créateurs préfèrent planifier leur temps par intervalles d'une demi-journée. Il écrit : « On ne peut pas écrire ou programmer correctement en comptant les heures. C'est à peine si on a le temps de commencer ».
L'état de flow est généralement vécu par une personne travaillant seule, sur une tâche spécifique, sans interruption et pendant une longue période. Cependant, c'est rarement le cas dans la pratique, notamment dans le monde du travail hybride d'aujourd'hui, où les plannings ressemblent à une partie de Tetris et où les exigences changent constamment. Tout comme le maintien du rythme nécessite des efforts, la recherche d'un état de flow dans cet environnement exige d'abord un travail sur les fondamentaux.
Figma recherche en permanence de nouvelles façons de rapprocher les workflows de design et de développement, afin que l'équipe puisse atteindre un état de flow malgré les notifications constantes qui menacent la productivité. Avant le lancement de la nouvelle version de l'application Figma pour Jira, nous avons consulté des équipes de différents secteurs d'activité pour savoir comment elles parvenaient à atteindre cet état.
Obtenez un contexte complet lors de la transformation des designs en code avec Figma pour Jira.
Un prototype vaut mieux qu'un long discours
Au fur et à mesure que les entreprises se développent, les processus ralentissent. Les équipes plus importantes regroupent les personnes et les groupes de travail en silos, et un modèle de travail hybride peut désynchroniser les équipes. Pour que l'équipe reste coordonnée, il faut s'assurer que chacun connaisse ses objectifs et aille dans la même direction. L'alignement constant, qui est particulièrement essentiel dans le processus de développement de produits, nécessite une communication constante.
Favoriser la compréhension mutuelle à partir d'un prototype haute fidélité
Alors que le même mot peut avoir différentes significations d'une personne à l'autre, les designers et les développeurs parlent en général plus facilement le même langage lorsqu'ils disposent d'un prototype concret. Chez One.com, l'équipe design basée au Danemark organise régulièrement des réunions avec les développeurs basés en Inde pour discuter des exigences, des obstacles et des problèmes potentiels. Lors d'une réunion récente, l'équipe design a présenté un prototype pour une nouvelle fonctionnalité de texte. L'équipe de développement s'est réunie pour discuter d'un prototype haute-fidélité dans Figma afin que chacun puisse en suivre et en examiner l'interactivité. Alors qu'un prototype statique basse-fidélité donne une idée générale du design, un prototype interactif haute-fidélité permet aux développeurs de se faire une idée précise du fonctionnement du produit final, avec des détails essentiels tels que l'organisation des parcours utilisateur, la manière dont les fenêtres apparaissent et dont les menus déroulants fonctionnent. « C'est une véritable révolution par rapport aux logiciels que nous utilisions auparavant, qui demandaient de cliquer sur un million de pages en les reliant les unes aux autres. Désormais, nous disposons de prototypes interactifs dans un seul logiciel », explique Nick van der Meulen, group head of UX and design.
Un prototype haute fidélité fournit et préserve également le contexte pour l'équipe élargie qui travaille en différé et à distance. Ce qui se passe au cours d'une réunion est relayé en dehors de celle-ci. Chez Condé Nast, l'équipe de développement de produits organise une réunion quotidienne pour discuter de la progression des projets et des priorités. Ces réunions permettent à l'équipe de se tenir informée, d'anticiper les obstacles et de poser les questions au bon moment. Au cours de l'une de ces réunions, l'équipe a discuté d'un projet de grande envergure présenté sous la forme d'un prototype interactif haute-fidélité dans Figma. « Ce prototype a servi de pont entre le design et le développement. Il a permis à nos développeurs d'interagir réellement avec le design, de consolider notre vision commune et de motiver l'équipe à travailler main dans la main pour lui donner vie », se souvient Tom Smith, senior director of design design.
Présentez votre travail, même s'il est encore en cours
Les designers et les développeurs de l'équipe design systems d'Ingka Group, le distributeur le plus important d'IKEA, aiment partager leurs travaux en cours à l'aide de prototypes basse-fidélité. Si l'équipe d'Ingka Group présente chaque mois ses prototypes les plus aboutis, elle organise également des sessions internes hebdomadaires pour encourager les membres de l'équipe à partager leurs connaissances dans un cadre détendu et informel. « Vous pouvez montrer une simple feuille de papier si vous le souhaitez », indique Henrik Wangström, experience design operations manager.
Les membres de l'équipe s'encouragent mutuellement à présenter des travaux incomplets, même si cela peut être intimidant. « La présentation d'un travail incomplet est souvent un obstacle dans l'esprit de beaucoup de gens. Ils se disent : "Ce n'est pas encore terminé" ou "Je ne suis pas assez satisfait(e)". L'idée est de créer une culture au sein de l'équipe qui permette d'obtenir des retours rapides et fréquents, afin de concevoir des produits qui auront le plus grand succès possible », explique Nouman Tariq, engineering manager au sein de l'équipe design system. Le partage des premiers stades d'un projet, qu'il s'agisse d'un prototype, d'une maquette ou même des résultats d'un brainstorming d'équipe, est essentiel pour itérer et expérimenter rapidement.
L'idée est de créer une culture d'équipe qui permette d'obtenir des retours rapides et fréquents, afin de concevoir des produits qui auront le plus grand succès possible.
Même les mises à jour éphémères ont besoin d'une source de vérité
Dans notre environnement de travail hybride à distance et en présentiel, il y a un bourdonnement constant (et parfois des alarmes) de mises à jour de fichiers, de notifications Slack et d'échéances qui se rapprochent. Dans ce tumulte, il est facile de manquer une mise à jour et de se retrouver à faire un travail qui n'est plus pertinent. Lorsque des personnes prennent des décisions lors d'une réunion ou sur Slack, ces décisions doivent s'appliquer à d'autres domaines. C'est pourquoi il est essentiel d'avoir des retours et des sources d'informations fiables.
Différentes sources pour différentes informations
Bien que de nombreuses équipes cherchent encore à disposer d'une source unique de vérité, il n'est pas toujours judicieux d'avoir un espace ou un forum unique par équipe. Chacune a besoin de différents types d'informations, d'outils et de tactiques.
Figma s'adressant principalement aux designers, les développeurs ont besoin de nombreux outils différents pour accomplir leur travail. « Si nous devons indiquer les détails techniques d'un champ de texte, par exemple, un développeur doit pouvoir définir plusieurs types, tels qu'un nombre ou une chaîne de texte sur le web », explique Carlos Báez, design systems director chez Turo. L'équipe de développement documente les détails techniques dans ses fiches techniques produits (product requirement docs/PRD), qui contiennent des tableaux décrivant les propriétés et la documentation des composants, les dépendances des tokens, l'interaction avec l'utilisateur et le design. « Les tableaux sont assez compliqués pour ces composants, où tout est listé, et nous nous en servons comme source de vérité de l'API du composant », explique Carlos.
Experian classe les informations en fonction de leur caractère stratégique ou tactique. « Figma est parfait pour les cas de figure qui nécessitent de communiquer directement avec l'équipe design au sujet d'un composant donné, et Jira permet à l'équipe de se lancer dans des discussions plus approfondies concernant des fonctionnalités ou des workflows spécifiques », précise Shelby Foster, développeuse design systems.
Figma est parfait pour les cas de figure qui nécessitent de communiquer directement avec l'équipe design au sujet d'un composant donné, et Jira permet à l'équipe de se lancer dans des discussions plus approfondies concernant des fonctionnalités ou des workflows spécifiques.
Cependant, le meilleur moyen de gérer de multiples sources d'informations fiables est de les intégrer. « Nous avons récemment commencé à utiliser l'application Figma pour Jira afin de rassembler toutes les informations relatives au projet en un seul endroit. Cela bénéficie à la fois aux designers et aux développeurs, car nous avons tous accès aux mêmes informations sources, ce qui permet de limiter les changements de tâches et d'applications », explique Keith Barney, design system designer.
Les équipes de développement de design systems et front-end d'Experian utilisent également Dev Mode, l'espace de travail de Figma conçu pour faciliter la gestion du flux de travail des développeurs. « Cela nous a permis de réunir l'ensemble de la documentation et des ressources de nos composants au même endroit, sans recourir à de multiples outils. Nos équipes front-end disposent ainsi d'une source unique fiable pour les composants de notre design system et d'un environnement formidable pour réaliser des tests et interagir avec les équipes », indique Shelby.
Pour découvrir comment vous pouvez travailler plus rapidement avec vos outils préférés grâce à Dev Mode, cliquez ici.
Économies sur le coût de basculement
Lorsqu'il existe plusieurs sources fiables qui ne correspondent pas clairement les unes aux autres, vous payez un coût de basculement qui équivaut au temps, à l'énergie et au contexte perdus en passant d'un élément à l'autre. Cela peut être coûteux et épuisant. Par exemple, l'équipe de développement de produits de Woolworths passait son temps à débattre pour savoir si un ticket Jira contenait les derniers designs que l'équipe annotait au moyen de captures d'écran. En intégrant leurs deux sources fiables, Figma et Jira, les captures d'écran obsolètes ne sont plus un problème.
« Nous utilisons la fonction d'intégration en direct de Figma pour inclure les derniers designs dans nos tickets Jira pour nos équipes de développement », explique Cindy Ramos, user interface design manager. « Cela accélère également la planification des sprints lorsque nous pouvons passer en revue les mises à jour ou les parcours directement dans Jira. Nous utilisons également le widget Jira pour marquer les mises à jour mineures directement dans nos tableaux Figma afin que les développeurs sachent exactement où les trouver ».
De même, Condé Nast utilise Jira pour gérer et suivre les tickets, ainsi que Figma pour les derniers éléments de design et prototypes. L'équipe technologique intègre les deux en reliant directement les fichiers Figma aux tickets Jira.
Bénéficiez d'un contexte complet en transformant vos designs en code grâce à Figma pour Jira.
Le « flow » n'est qu'un cadre reproductible
Lorsqu'un projet de design est marqué comme Prêt pour le développement dans Figma, vous pouvez visualiser le statut correspondant dans les éléments Jira liés.
La cohérence permet de gagner du temps et d'économiser de l'énergie. C'est ce que One.com a cherché à reproduire en s'inspirant de l'une des entreprises les plus cohérentes au monde, McDonald's. « Lorsque l'on entre dans un restaurant McDonald's, on sait exactement à quoi s'attendre. Lorsqu'un développeur reçoit un fichier, le contenu est différent, mais la façon dont il est structuré et nommé est toujours la même », explique Carl Webb, lead UI designer chez One.com. « Cela me facilite également la tâche. Si je reprends le travail d'un autre UI designer, je sais où chaque élément doit se trouver ».
Appuyez-vous sur des modèles
Pour atteindre ce niveau ambitieux de cohérence, One.com crée un fichier de livraison dans Figma. Berrie Schoots, design ops lead chez One.com, décrit le fichier de livraison comme « un modèle qui contient l'ensemble des pages renseignées, de l'environnement de test aux wireframes, jusqu'aux designs réels dans les caractéristiques où vous les saisissez. Toute personne qui utilise le fichier peut voir le travail en cours, tout élément prêt à être codé par les développeurs et tous les éléments déjà codés par les développeurs ».
« Dans les pages de travail en cours et de design, il y a déjà un widget Jira. Le designer n'a plus qu'à lier sa tâche à ce widget. Tout est regroupé dans des sections. Il est donc facile de voir les éléments liés et ceux qui ne le sont pas », explique Carl.
Si ces fichiers contiennent un prototype, ils comportent généralement aussi un organigramme que les développeurs peuvent suivre. Il s'agit d'une cartographie des écrans avec des flèches (copiées de FigJam) et des explications sur les étapes à venir et sur les interactions qui ont lieu. « Je préfère les pages de présentation aux prototypes, car elles mettent les choses en contexte. D'un écran à l'autre, elles nous montrent ce qui se passe, avec des annotations. Je ne clique jamais sur le bouton de lecture », indique Yannick de Lange, senior software engineer.
Il n'y a manifestement pas de solution miracle pour faire avancer les choses au milieu de ce fatras. Une dernière astuce consiste peut-être à en prendre conscience : si l'état de flow semble tout faciliter une fois déclenché, la mise en place des conditions nécessaires pour l'atteindre exige une bonne dose d'huile de coude. Des applications comme Figma pour Jira servent de lien entre ces petits éléments critiques pour vous permettre de vous concentrer sur les grandes décisions, la planification et l'exécution. Pour en savoir plus sur notre dernière version de Figma pour Jira, cliquez ici.
Obtenez un contexte complet lorsque vous passez du design au code avec Figma pour Jira.
