D'une production fermée à la création collaborative

Chez Capcom, Figma joue un rôle central dans le workflow de production web. En effet, l'outil est utilisé pour le site corporate, les sites de jeux et les microsites de campagne. Au-delà de la création des maquettes, Capcom se concentre également sur la conception d'un design system unifié pouvant être partagé à la fois en interne et en externe. Actuellement, l'entreprise organise et standardise ses principales ressources de design afin d'établir les fondations d'une production créative plus cohérente et efficace.

De plus, Figma sert de plateforme collaborative à des projets communs impliquant des partenaires de production externes, en particulier dans le développement des sites de jeux et de campagnes promotionnelles, ce qui fluidifie le travail d'équipe et accélère l'exécution.

Capcom a adopté Figma en mars 2024. La transition a été orchestrée par Yosuke Fujimoto et Kei Kanazawa, qui dirigent l'équipe de gestion web du service de production, ainsi que par Sadataka Inoue, web designer au sein du même service. Ils ont piloté le passage à Figma ensemble, ce qui a profondément transformé leur workflow en seulement un an.

Fujimoto évoque le contexte de cette transition : « C'était juste au moment d'une restructuration organisationnelle, et mon service se trouvait également à un tournant. Alors qu'une collaboration plus étroite entre les équipes de Tokyo et d'Osaka devenait nécessaire, nous devions établir des règles communes et partager la même compréhension des choses. À l'époque, notre environnement de production s'appuyait sur des logiciels de design locaux, et en raison du haut niveau de confidentialité nécessaire, il était courant de travailler dans des environnements fermés. Les fichiers de design étaient rarement partagés, et le feedback était isolé. En y réfléchissant, rien ne nous empêchait réellement de partager notre travail. C'était la norme, tout simplement.

De plus, certains projets suivaient un processus de développement en cascade, et les designers n'avaient pas le même vocabulaire que les développeurs. Le personnel sur le terrain demandait plus de flexibilité, et nous avons fortement ressenti le besoin de revoir nos processus de design et nos workflows. D'après mon expérience précédente, j'étais convaincu que Figma était le meilleur outil pour relever ce défi de collaboration, et nous avons donc commencé par le tester sur quelques projets. »

Cependant, il y a eu plusieurs obstacles à surmonter lors de la mise en œuvre. Fujimoto se souvient : « Le premier vrai problème est venu d'un décalage entre les workflows des équipes. Celle d'Osaka produisait des sites de jeux, et celle de Tokyo des sites de campagnes et d'enquêtes. Elles nécessitaient donc des compétences différentes. De plus, leurs périmètres de travail et leurs approches divergeaient également. Par exemple, pour certains projets, nous n'avions même pas créé de wireframes. Trouver comment aplanir et unifier ces différences a été notre premier grand défi. »

En passant à la nouvelle plateforme, les designers ont perçu une augmentation temporaire de la charge de travail.

Fujimoto explique : « Juste après la mise en place de Figma, la charge de travail a augmenté car nous avons dû ajuster des composants, ajouter des variantes et enregistrer des variables. En plus du travail intuitif dont nous avions l'habitude, il a fallu nous atteler à des tâches plus "cérébrales" comme la gestion du design. La courbe d'apprentissage pour maîtriser l'outil était abrupte, et certaines personnes ont été déconcertées par le mode de fonctionnement inhabituel et le décalage avec les outils d'avant. Ces différences dans le niveau de maîtrise affectaient à la fois la vitesse et la qualité de production, et lorsque la compréhension de la structure ou du code était insuffisante, les incohérences dans les fichiers de design apparaissaient plus souvent. À nos yeux, cela représentait un défi éducatif.

Ainsi, nous avons abaissé la barrière à l'entrée en commençant par des "transferts visuels" simples plutôt qu'une mise en œuvre à grande échelle. Au lieu de faire nos retours pendant les sessions de travail, nous nous avons laissé le temps à tout le monde d'explorer librement l'outil. De plus, nous avons créé de courtes vidéos tutoriels pour notre wiki interne, afin de concevoir une bibliothèque de référence accessible en permanence. Notre objectif est d'atteindre 100 vidéos, et nous en avons environ 50 pour l'instant. »

« Lors du processus d'optimisation et de normalisation, nous avons rencontré de nouveaux problèmes tels que l'ambiguïté du périmètre de travail, la gestion des autorisations et les méthodes de partage de l'information. La coordination entre les équipes est devenue essentielle. Ainsi, nous avons dû avancer patiemment, tout en restant flexibles et en gardant du recul. Clarifier les rôles et les responsabilités a été très compliqué, et nous avons dû établir des règles détaillées et consacrer énormément de temps à se coordonner à tous les niveaux, du personnel sur site aux responsables.

Il a été difficile de mettre en place une nouvelle structure de A à Z avec seulement quelques membres, mais malgré cela, nous avons choisi Figma car nous avions une confiance instinctive en cet outil. En effet, nous pensions qu'il pouvait être un moteur de changement. Voir des personnes aux fonctions différentes s'impliquer dans un univers autrefois réservé au design, et découvrir qu'elles pouvaient participer à cette étape du processus m'a beaucoup inspiré. Cette expérience m'a donné la confiance nécessaire pour avancer.

Accélérer la production avec une charge de travail divisée par deux

Aujourd'hui, l'impact de Figma sur la structure de production web de Capcom est évident.

Fujimoto indique : « La communication est devenue nettement plus active. Auparavant, la plupart des échanges se faisaient à l'écrit, et les spécifications ou demandes détaillées apparaissaient souvent plus tard dans le processus. Après la mise en place de Figma, nous avons pu discuter des designs tout en les observant en temps réel, ce qui a permis de traiter rapidement les petites erreurs ou les demandes spontanées sur un élément en particulier. Ainsi, le nombre de retouches nécessaires a nettement diminué. Les frictions aussi sont moins nombreuses, et davantage de personnes ont envie d'apprendre à utiliser Figma. Dans l'ensemble, le volume de communication a également augmenté,

ce qui a eu pour effet de réduire le nombre de révisions lors des tests pré-lancement d'environ 70 %. De la production au développement, les heures de travail effectives ont été réduites d'environ 40 à 50 %, et selon les projets, le délai de lancement a été raccourci d'une à deux semaines. Nous avons également pu optimiser le workflow en réduisant le travail manuel, tel que les réunions de coordination, les explications et la documentation destinée à notre wiki interne.

D'autre part, les services de planification et de marketing en ont aussi profité. En effet, grâce aux fonctionnalités de visualisation, aux commentaires et aux prototypes, leurs membres ont moins besoin d'envoyer de messages, d'e-mails et de documents, et partagent facilement leur vision complète, mouvements et transitions d'écran compris. En conséquence, les incompréhensions sont désormais beaucoup moins fréquentes, et coordonner toutes les étapes, de la planification à l'exécution, est bien plus fluide. En fin de compte, je pense que ces fonctionnalités simples ont plus d'impact que nos méthodes précédentes. »

Relier le design au code avec Dev Mode

L'entreprise a également commencé à utiliser Dev Mode. Fujimoto en décrit l'impact, de son point de vue de designer :

« Avec Dev Mode, les développeurs peuvent désormais consulter le code et les spécifications directement depuis les données de design, ce qui rend la communication beaucoup plus fluide. » Les questions sont plus rares, et le temps passé à préciser et expliquer les choses a considérablement diminué. Nous n'avons plus besoin de tenir des réunions seulement pour expliquer les subtilités de nos intentions de design. »

De plus, en tirant parti des variables, l'équipe a conçu un système permettant aux designers de gérer les modifications de l'UI et le déploiement multilingue de manière indépendante, sans dépendre des développeurs.

Fujimoto explique : « Par exemple, si les designers veulent ajouter des questions à une enquête ou inclure plus de boutons radio à une interface, ils peuvent désormais le gérer directement dans Figma avec les variables. La structure des variables est pré-alignée avec les fichiers YAML ou avec les formats de variables que les développeurs utilisent, de sorte que les données peuvent être appliquées telles quelles.

De plus, en changeant simplement les modes de variables, les écrans peuvent passer du japonais à l'anglais, ainsi qu'à de nombreuses autres langues. Même les données d'enquête envoyées par le service marketing au format Excel ou CSV peuvent être importées dans les variables à l'aide d'un plugin et transférées au format JSON. Cela permet également une application en masse des traductions dans plusieurs langues, ce qui accélère considérablement des tâches qui nécessitaient auparavant plusieurs jours. Réduire notre dépendance vis-à-vis du processus de développement a considérablement raccourci les délais et a rendu l'utilisation des ressources plus efficace. »

Kanazawa explique : « Dev Mode permet aux développeurs de vérifier directement les propriétés CSS à partir du design. L'utiliser conjointement aux variables et à Code Connect permet d'avoir beaucoup moins de décalage entre le design et la mise en œuvre. Les fonctionnalités intégrées telles que les annotations sont également très efficaces. Désormais, nous pouvons comprendre les décisions en matière de CSS d'un seul coup d'œil, et l'intention du designer est communiquée instantanément.

En conséquence, les coûts de communication et les tâches liées à la coordination ont diminué, ce qui nous permet de consacrer plus de temps à nos responsabilités premières, comme l'amélioration de l'environnement de développement. Nous avons aussi constaté une qualité plus homogène au niveau global. Par rapport à d'autres outils, Figma s'avère une excellente langue intermédiaire entre designers et développeurs. En poussant la réflexion, j'ai même l'impression qu'avec Figma, il est possible que les développeurs finissent par gérer eux-même le design. Cela montre le potentiel que je vois en l'outil. »

Équilibrer efficacité et cohérence avec un design system

À l'heure actuelle, l'équipe développe son design system, avec pour objectif de l'achever d'ici mars 2026.

Fujimoto explique : « Notre design system transverse est toujours en cours de conception, mais nous avons déjà mis en œuvre des systèmes simplifiés et des guides de style dans nos projets. En utilisant les variables et des modèles basés sur des composants, nous avons pu réduire le temps passé sur des tâches élémentaires, mais aussi promouvoir la réutilisation des ressources existantes et améliorer l'efficacité de la production. Disposer de modèles prêts à l'emploi permet aussi d'arriver plus rapidement au consensus, ce qui réduit les coûts de production et raccourcit les délais de publication.

Bien que l'accent principal soit mis sur le site web de l'entreprise, nous concevons le système pour qu'il soit aussi "primitif" que possible, afin qu'il puisse être appliqué aux sites de jeux et même aux documents internes. Pour éviter d'interférer avec l'identité visuelle unique de chaque jeu, nous veillons à la neutralité du système. Même dans les cas où une application complète n'est pas possible, nous nous efforçons de rendre les composants spécifiques réutilisables et adaptables. »

Faire de Figma une plateforme commune, au-delà de la production web

Pour Capcom, le statut de Figma est voué à passer d'un espace dédié au design à une plateforme commune où chacun peut réfléchir, expérimenter et échanger selon les mêmes méthodes. À l'avenir, l'accent sera mis sur la diffusion des informations acquises sur le terrain et sur une co-création plus étroite avec les équipes qui créent les jeux.

Inoue souhaite partager avec ses collègues les frameworks et les bonnes pratiques qu'il a développés grâce à son travail quotidien.

« J'utilise Figma presque tous les jours, sur plusieurs projets en parallèle. En prenant des wireframes bien conçus comme exemples, j'aide les collègues qui se forment encore sur l'outil à changer d'attitude et à passer du simple placement d'éléments à la structuration de mises en page. Il peut être difficile de communiquer d'un lieu à l'autre et de poser des questions. Cependant, j'ai remarqué qu'il y a de plus en plus de discussions dans Figma, ce qui montre à quel point l'outil a été bien adopté.

À l'époque où nous utilisions des applications de bureau, nous devions créer manuellement chaque variation de couleur d'un bouton. Mais dans Figma, les composants gèrent tout cela automatiquement. Même pour les projets hautement confidentiels où nous ne pouvons pas utiliser les images de production réelles, il est très pratique de mettre à jour nos pages plus tard, simplement en remplaçant un seul composant. Mon objectif est de commencer par montrer des exemples que d'autres voudront imiter et d'utiliser cela pour améliorer les compétences globales de l'équipe. »

En attendant, Fujimoto envisage de faire de Figma une plateforme pour un langage créatif commun.

« Nous souhaitons créer une culture du jeu qui apporte joie et passion, partout dans le monde. Une collaboration étroite entre différentes équipes est nécessaire pour matérialiser cette vision et produire des expressions créatives de qualité, qui capturent la profondeur de nos récits et de nos personnages. Les fonctionnalités de co-édition en temps réel et de prototypage de Figma ont amélioré la communication entre les services, tandis que la possibilité de partager et de réutiliser les ressources de design accumulées nous permet de maintenir la cohérence et la valeur de la marque, ce qui est idéal pour notre entreprise.

À l'avenir, nous allons continuer à améliorer les compétences globales du personnel et à créer un environnement où tout le monde est à l'aise pour travailler sur cette plateforme. De plus, nous voulons que Figma serve non seulement d'outil pour le handoff des spécifications, mais aussi d'espace de communication capable de transmettre les subtilités et les intentions au-delà des mots. En fin de compte, notre objectif est de faire grandir notre savoir collectif et de s'appuyer sur cette base pour créer ensemble au lieu de simplement répondre aux demandes, que ce soit dans le domaine du web, mais aussi sur tous les points de contact, afin d'aligner les objectifs et les expériences partagées dès le début de chaque projet. »