Naviguer jusqu'au contenu principal

Guide pratique pour une migration optimale vers Figma

Illustration d'un workflow avec des formes abstraites, des coches et des flèches représentant un processus de design dynamique.Illustration d'un workflow avec des formes abstraites, des coches et des flèches représentant un processus de design dynamique.

La migration ne consiste pas seulement en un changement d'outils, mais aussi en l'adoption de nouvelles méthodes de travail. Dans ce guide, Clara Ujiie, designer advocate, passe en revue chaque étape et offre des connaissances et des conseils pratiques pour assurer la réussite de votre transition vers Figma, en douceur.

Partager Guide pratique pour une migration optimale vers Figma

Hero de Derek Abella.

La migration vers un nouvel outil de design comme Figma n'est pas qu'un grand pas en avant, c'est une série d'étapes réfléchies. Ce processus, qui englobe la planification, la communication, la reconstruction, l'intégration et l'adaptation des normes culturelles, exige une collaboration approfondie (et votre boisson préférée en abondance : café ou thé, au choix !). En tant que designer advocate, j'ai aidé de nombreuses équipes tout au long de ce processus, en recueillant des informations précieuses pour que la transition vers Figma soit non seulement optimale, mais aussi satisfaisante. Si la migration peut sembler intimidante au début, il s'agit d'un investissement stratégique pour garantir votre productivité future.

Planifiez votre migration vers Figma

La gestion du changement implique la mise en place de stratégies visant à préparer et à aider les collaborateurs, les équipes et les entreprises à s'adapter aux changements organisationnels pouvant impacter les ressources, les processus d'entreprise, les allocations budgétaires ou les méthodes opérationnelles.

Vous avez décidé de migrer vers Figma, félicitations ! Pour commencer, il est important de comprendre les motivations fondamentales de ce changement. Figma est en général choisi pour améliorer la collaboration, la transparence et simplifier les processus. Ce sont ces avantages clés qui conduisent à la transformation. Mais surtout, rappelez-vous qu'il s'agit d'une aventure collective. Elle implique chaque membre de l'équipe et nécessite d'importantes mesures de gestion du changement.

Constituez votre équipe de contributeurs

Ce groupe sera sans doute également responsable de la communication avec Figma (👋😉 ). Si vous envisagez de migrer vers Figma, contactez-moi (Clara) sur Twitter ou contactez notre équipe de ventes ici.

La formation d'une équipe centrale de contributeurs à la migration vers Figma est essentielle pour assurer la réussite du processus. Je conseille de réunir des représentants de divers services tels que le développement, le product management et les groupes de parties prenantes. Cette équipe jouera un rôle crucial en faisant des retours objectifs, en créant un espace de travail Figma qui convienne à tous, en gérant les communications à l'échelle de l'entreprise et en supervisant le transfert de la bibliothèque.

Des entreprises comme Wells Fargo, Uber et JPMorgan Chase ont déjà mis en place cette stratégie. Chez Wells Fargo, une équipe d'experts et de passionnés de Figma (surnommés les « Figma Jedis ») a mené la transition en interne. Chez Uber, les équipes ont mené un atelier sur le design system actuel qu'elles ont associé à une formation et à des démonstrations de base de Figma, pour l'intégrer progressivement à leur workflow. JPMorgan Chase a trouvé ses contributeurs parmi les passionnés de son design system, notamment les dirigeants et les groupes transverses. Ces exemples soulignent l'importance de sélectionner des collaborateurs enthousiastes dans divers services, et de s'appuyer sur les initiatives existantes pour mettre en place une transition optimale.

Sollicitez de l'aide en transverse

Main tenant des chaussettes FigmaMain tenant des chaussettes Figma

Certains des articles mentionnés ci-dessus, achetés par Adam Noffsinger.

Adam Noffsinger, senior product designer travaillant sur les design systems chez Dropbox, explique comment l'entreprise a migré vers Figma dans l'article Design Tooling at Scale.

Il est essentiel d'obtenir l'adhésion non seulement de l'équipe design, mais aussi des développeurs, des product managers et des parties prenantes. Chez Dropbox, Kyle Turman, alors design manager, et Sarah Lin, staff design program manager, ont élaboré avec leur équipe une proposition à l'intention de la direction, en mettant en avant les avantages et les inconvénients. Pour convaincre le reste de l'entreprise, ils mis en commun leurs efforts en organisant des ateliers, en partageant les bonnes pratiques, en donnant un accès anticipé aux bibliothèques et aux composants et, bien sûr, en distribuant des quantités de goodies Figma ».

Texte manuscrit indiquant « Figma Migration Toolkit » (Boîte à outil de migration vers Figma) avec un organigramme stylisé et des éléments d'interface sur un fond violet dégradéTexte manuscrit indiquant « Figma Migration Toolkit » (Boîte à outil de migration vers Figma) avec un organigramme stylisé et des éléments d'interface sur un fond violet dégradé

Consulter ma Boîte à outils de migration vers Figma pour savoir comment faire migrer d'autres outils vers Figma.

Apprenez des autres équipes

Il peut également être utile de prendre contact avec des équipes qui ont elles-mêmes franchi le pas. Martin Hardee aide les grandes entreprises à migrer vers Figma. Lorsqu'il a commencé à déployer Figma à grande échelle en tant que head of design frameworks chez Wells Fargo, Martin s'est posé la question suivante : « Comment assurer un déploiement efficace et optimal à grande échelle ? ». Cette question l'a amené à contacter des personnes d'autres grandes entreprises ayant réalisé des migrations similaires. Ces dernières ont partagé leurs idées et leurs bonnes pratiques, telles que les formations, les livrets et les pages de couverture (ainsi que des conseils sur les choses à éviter), qui ont finalement joué un rôle capital dans la réussite de leur propre migration. (Plusieurs de ces outils d'apprentissage sont résumés dans les conseils de Martin pour déployer un design à l'échelle de l'entreprise avec Figma.)

Comment le processus se déroule-t-il concrètement ? Écoutez les témoignages de Workday, Uber et Dropbox lors de ce livestream.

Définissez votre calendrier de migration

Définissez un calendrier idéal, en tenant compte des engagements de l'équipe et des dates d'expiration des outils. L'heure de la planification annuelle approche, ou un abonnement arrive à son terme ? Ces moments seront importants à gérer et influenceront votre stratégie. Ma Boîte à outils de migration vers Figma comprend un modèle de calendrier que vous pouvez utiliser. Sinon, vous pouvez créer le vôtre en utilisant ce modèle de diagramme de Gantt dans FigJam.

Illustration d'un tableau de gestion de projet divisé en colonnes, chacune représentant une étape différente, avec des barres horizontales de différentes nuances de violet, de vert et d'orange, symbolisant les tâches ou les étapes.Illustration d'un tableau de gestion de projet divisé en colonnes, chacune représentant une étape différente, avec des barres horizontales de différentes nuances de violet, de vert et d'orange, symbolisant les tâches ou les étapes.

Utilisez les diagrammes de Gantt pour visualiser l'organisation de votre équipe, de vos projets, etc. Pour l'anecdote, nous utilisons ce modèle pour planifier FigJam (c'est méta, je sais !). Luis Ouriach, designer advocate, a également créé cet outil de création de calendrier de migration vers Figma.

Élaborez un plan de communication efficace

Au fur et à mesure que votre calendrier de migration prend forme, vous devez préparer un plan de communication détaillé. Vous devrez probablement envoyer plusieurs notifications à différentes équipes pour les accompagner dans ce processus. Voici quelques-uns des messages dont vous pourriez avoir besoin :

  • Informer les équipes de votre volonté de changer d'outils
  • Invitation au programme pilote de mise en place des outils
  • Décisions concernant la migration vers Figma
  • Annonces des ateliers à venir, avec de nombreuses démonstrations pour susciter l'enthousiasme des équipes
  • Formation à des applications spécifiques, dédiées à certaines fonctions
Grille de rectangles colorés disposés selon un motif sur un fond pointillé, représentant la gestion d'un projet ou la configuration d'un projet.Grille de rectangles colorés disposés selon un motif sur un fond pointillé, représentant la gestion d'un projet ou la configuration d'un projet.

Utilisez ce plan de communication pour aider vos collègues à comprendre quand et comment informer les parties prenantes de l'évolution du projet, et qui garder dans la boucle.

Les notifications peuvent être diffusées de différentes manières. Certaines peuvent justifier une présentation complète, tandis que d'autres peuvent être communiquées par l'intermédiaire d'un canal d'équipe. Adaptez vos méthodes de communication à chacun. Lorsque l'équipe Help Scout se préparait à passer officiellement à Figma, Buzz Usborne, alors principal designer, a présenté une vidéo de démonstration de 20 minutes sur Figma expliquant les principes de base de son utilisation et certains de ses avantages. « Cette vidéo a rencontré un vif succès et a permis de faciliter la transition pour les personnes qui étaient peut-être un peu hésitantes au départ », explique Buzz.

Comme pour toute communication, la répétition est essentielle. N'hésitez pas à surcommuniquer. Soyez disponibles, vous et votre équipe, en faisant le point lors de réunions régulières et en prévoyant des discussions au bureau. Que ce soit en différé, en ligne ou en présentiel, soyez là pour clarifier, rassurer et soutenir. « Nous avons utilisé tous les canaux de communication disponibles », explique Andrew Garber-Browne, VP et designOps program manager chez JPMorgan Chase. La société avait constaté que des communautés se formaient naturellement dans les tchats de l'entreprise. Les designers et les développeurs consultaient régulièrement ces espaces pour discuter, poser des questions et se tenir informés.

Posez les bases

Une fois que tout le monde est d'accord, les choses sérieuses peuvent commencer. Bien sûr, vous pourriez techniquement importer les fichiers de votre ancien outil et vous arrêter là, mais vous passeriez alors à côté d'une occasion en or : celle de restructurer vos fichiers et vos processus. Qu'il s'agisse de nettoyer la bibliothèque, d'harmoniser les référentiels de code ou d'établir des règles claires, profitez de cette occasion pour prendre un nouveau départ.

C'est là que votre équipe de contributeurs à la migration vers Figma entre vraiment en jeu. L'avantage de Figma, c'est qu'il favorise la collaboration. La collaboration sur des éléments fondamentaux tels que les noms de variables, les modes de ces variables, les propriétés des composants, la configuration des variantes, la structure des fichiers, les noms des filiales et la structure des équipes vous aidera à garantir une intégration optimale de Figma au sein de votre workflow. La présentation de Dev Mode aux développeurs permet également de vous assurer que les variables, les modes et les noms de composants configurés dans votre design system et vos bibliothèques sont en phase avec le développement.

Diagramme à thème sombre indiquant « Meilleures pratiques », suivi de « Structure de l'espace de travail et recommandations », avec un graphique montrant des cases d'organisation.Diagramme à thème sombre indiquant « Meilleures pratiques », suivi de « Structure de l'espace de travail et recommandations », avec un graphique montrant des cases d'organisation.

Ce guide sur la structure de l'espace de travail de l'entreprise écrit par Luis Ouriach, designer advocate, est un excellent point de départ pour l'organisation de vos équipes et de vos fichiers (Remarque : cette ressource s'adresse aux détenteurs de forfaits Entreprise). Vous pouvez également utiliser ce fichier de Joey Banks, passionné de Figma, pour créer des noms d'équipe, des descriptions et des icônes à partager avec vos collègues.

N'oubliez pas : la définition de ces bases peut facilement basculer du simple au complexe. Certains de ces éléments peuvent également être traités ultérieurement, mais soyez attentifs aux changements de processus que vous devrez apporter après coup. Toutes les décisions fondamentales doivent également être mises en évidence dans votre plan de communication.

Graphique à thème sombre mettant en évidence la « structure du design system » avec un encadré intitulé « Meilleures pratiques » et des éléments tels que « Alerte », « En-tête », « Pied de page » et « Zone de texte » reliés par un organigramme.Graphique à thème sombre mettant en évidence la « structure du design system » avec un encadré intitulé « Meilleures pratiques » et des éléments tels que « Alerte », « En-tête », « Pied de page » et « Zone de texte » reliés par un organigramme.

Vous cherchez des conseils pour structurer votre design system ? Consultez ce dossier partagé avec la communauté par Luis Ouriach, designer advocate chez Figma, pour obtenir des recommandations sur la manière de construire votre design system pour les équipes, les projets et les fichiers, quel que soit votre forfait.

Selon Kyle, quand Dropbox a migré de Sketch à Figma, cela a été plus qu'un simple transfert. Ce processus a duré un mois et a permis de peaufiner le design system, de résoudre les problèmes existants et d'apporter des améliorations en créant un environnement de travail plus flexible et décentralisé, qui facilite l'accès et le partage de fichiers de design. Les utilisateurs peuvent désormais récupérer efficacement les bibliothèques, les modifications apportées aux bibliothèques de niveau supérieur pouvant se répercuter de manière optimale sur les bibliothèques de niveau inférieur, ce qui garantit la cohérence et facilite la mise à jour du design system. Les commentaires dans l'application permettent d'obtenir des retours directs et informels.

Chez JPMorgan Chase, la migration a été perçue comme une occasion de désencombrer et de réorganiser les éléments de design accumulés, en favorisant un nouveau départ au lieu de s'attarder sur des tâches plus anciennes, ce qui représente un gain de temps sur le long terme. D'autres équipes ont combiné une migration vers Figma avec des mises à jour majeures du design system, ce qui leur a permis de tirer parti des capacités uniques de Figma en matière de composants.

Martin Hardee insiste lui aussi sur l'importance d'une migration sélective et déconseille de migrer des design systems obsolètes. « Avez-vous vraiment besoin de reprendre un projet datant d'il y a trois ans ? », demande Martin. « En général, il vaut mieux réinventer votre design system dans Figma et ne reprendre que les projets en cours ou récents. On découvre souvent que la liste des projets à migrer est bien plus réduite qu'on le pensait à l'origine ». Cette approche stratégique met l'accent sur la qualité et la pertinence plutôt que sur la quantité.

Votre équipe peut tirer parti de la migration pour évaluer, affiner et améliorer vos design systems existants. C'est également l'occasion de pallier les manques d'efficacité de vos anciens processus de design. Profitez pleinement du changement d'outil pour reprioriser les éléments de votre design system que vous souhaitez traiter ou améliorer. Il est peut-être temps de mettre en place des design tokens, de réorganiser la structure de vos tokens ou de réaliser un audit complet de vos bibliothèques. Réglez les derniers détails et repartez sur de nouvelles bases.

Présentation de Figma à votre équipe

Une fois les éléments fondamentaux de votre migration vers Figma définis, l'étape suivante consiste à présenter l'outil à l'ensemble de votre équipe. Plutôt que d'imposer un choix, Dropbox et Uber ont adopté une approche organique et ascendante pour cette phase. Dropbox a impliqué son équipe en organisant un atelier pour les développeurs, les UX writers et les designers, complété par un microsite rempli de conseils utiles, d'astuces et de guides de démarrage, développés au cours de la Hack Week. Uber a opté pour des ateliers « Tout savoir sur Figma », pour présenter les fonctionnalités de l'outil, ce qui a permis de prendre conscience des avantages de la collaboration en temps réel et de favoriser un dialogue interactif par le biais de commentaires et de retours.

Wells Fargo a adopté une stratégie similaire, en organisant des démonstrations et des ateliers pour faciliter l'apprentissage. Dans un premier temps, les horaires de bureau ont été aménagés plusieurs fois par semaine pour faciliter la tenue de ces ateliers, puis leur fréquence a progressivement diminué à mesure que l'équipe se familiarisait avec Figma. « Une fois tous les utilisateurs habitués à l'outil, les sujets abordés pendant les heures de bureau portent moins sur le fonctionnement de Figma, et plus sur l'utilisation générale du design system et des modèles de design », explique Martin. « C'est quelque chose que j'ai souvent observé, et dans de nombreuses entreprises. Cette phase est cruciale pour favoriser à la fois l'apprentissage de l'outil, encourager la curiosité, et garantir une adoption large.

Voici d'autres techniques pour favoriser l'adoption de Figma par votre équipe :

  • Intégrez Figma à la documentation : ajoutez des descriptions de Figma à toutes les ressources internes pour en faciliter la découverte et l'accès.
  • Utilisez Figma pour l'onboarding des nouvelles recrues : incorporez Figma aux documents d'intégration comme les organigrammes et les pratiques d'équipe pour aider les nouveaux arrivants.
  • Créez un centre de formation Figma : développez une section dans Figma avec des vidéos, des tutoriels, des environnements de test et d'autres ressources, en utilisant à la fois des sources communautaires et Internet, ainsi que des supports de formation spécifiques à l'entreprise.

Justyna Sieczka et Alicja Gancarz, product designers, ont mis au point ce modèle d'atelier pour les développeurs, qui comprend des slides, des données et un livre électronique.

  • Organisez des ateliers d'onboarding : proposez des ateliers pour l'intégration des nouvelles recrues avec des programmes variés adaptés aux différents postes.
  • Aménagez les horaires de bureau : réservez des créneau pour répondre aux questions et apporter une aide personnalisée.
  • Participez aux évènements du secteur : montrez votre engagement en participant aux évènements du secteur ou liés à Figma avec votre équipe.
  • Encouragez la formation continue : lancez des programmes et des rituels pour partager des conseils et des compétences au sein de l'équipe. (Pourquoi pas instaurer un Figma Friday, par exemple ?)
  • Impliquez-vous dans la communauté Figma : encouragez la communication avec la grande communauté Figma pour apprendre et partager des ressources.

Préparez-vous à une transition culturelle

La transition vers Figma ne se limite pas à l'apprentissage d'un nouvel outil, elle nécessite un changement fondamental de culture pour aller vers une approche de collaboration et d'ouverture. Passer d'espaces de travail cloisonnés à un environnement plus homogène et transparent nécessite de mettre l'accent sur l'adaptation culturelle autant que sur la formation technique.

D'après mon expérience des différentes migrations, la réticence face à Figma ne vient pas de la complexité technique, mais de la transformation culturelle que cela entraîne. Les designers et les personnes qui créent des produits sont généralement curieux par nature et s'adaptent facilement aux nouvelles technologies. Toutefois, le changement culturel que représente le développement de produits à plusieurs dans Figma peut présenter des difficultés. Par exemple, Wells Fargo a évolué vers une collaboration plus synchrone et asynchrone entre les designers, les développeurs et les équipes produits après la migration. De même, chez JPMorgan Chase, le rôle de l'expérience utilisateur a été redéfini, passant d'une approche axée sur les services à un partenariat plus stratégique, ce qui a nettement stimulé la collaboration et augmenté l'efficacité.

Ressources supplémentaires

Chaque migration vers Figma est unique et implique des difficultés et des victoires qui lui sont propres. Néanmoins, avec un plan stratégique, des partenariats solides et un état d'esprit ouvert, la transition vers Figma peut être une expérience totalement satisfaisante, qui préparera votre équipe à de futures réussites communes.

Vous cherchez d'autres ressources ? Consultez notre guide des bonnes pratiques pour migrer vers Figma ou contactez notre équipe pour bénéficier d'une aide personnalisée.

Créez et collaborez avec Figma

Lancez-vous gratuitement