Du PSD au design system : migrer 20 ans de legacy vers Figma

Vingt ans de fichiers PSD : un patrimoine à transformer

Je connais cette situation de l'intérieur. Après plus de vingt ans de pratique professionnelle, j'ai accumulé un patrimoine graphique considérable : des milliers de fichiers Photoshop, Illustrator et InDesign représentant des centaines de projets pour des dizaines de clients. Ces fichiers contiennent des années de décisions de design, de déclinaisons validées et de logiques visuelles qui constituent la mémoire créative de mon activité. Chaque PSD est un instantané d'un moment créatif, figé dans un format qui ne répond plus aux exigences de collaboration et de scalabilité modernes.

La migration vers Figma n'est pas un simple changement d'outil — c'est une transformation fondamentale de la manière dont le design est structuré, partagé et maintenu. Les fichiers PSD sont des artefacts statiques où chaque variation est un calque, chaque état un groupe, chaque adaptation une copie. Figma propose un écosystème vivant de composants connectés, de variables partagées, de modes et de collaboration en temps réel. Le fossé entre les deux paradigmes est considérable, et le franchir exige une stratégie méthodique.

L'urgence de cette migration s'est accentuée avec l'annonce de la discontinuation d'Adobe XD en 2024. Les équipes qui avaient déjà effectué une première migration vers XD se retrouvent face à un deuxième changement d'outil en quelques années. Figma s'impose comme la destination finale crédible, et cet article documente le processus que j'ai développé et affiné sur plusieurs projets de migration à grande échelle.

Les réalités techniques de l'import PSD vers Figma

Commençons par un fait important : Figma n'importe pas nativement les fichiers PSD. C'est la première surprise pour beaucoup de designers qui s'attendent à un bouton d'import magique. Figma peut importer les fichiers .sketch de manière robuste, les SVG depuis Illustrator et les PDF avec conversion des éléments vectoriels. Mais pour les PSD, il faut passer par des solutions intermédiaires.

Plusieurs options existent, chacune avec ses compromis. Photopea, un éditeur en ligne gratuit qui ouvre les PSD dans le navigateur, permet d'exporter les calques individuels en SVG ou PNG pour les importer dans Figma. Magicul est un convertisseur web qui gère les conversions entre Sketch, Figma, XD et PSD avec des résultats variables selon la complexité du fichier source. Des plugins communautaires comme 'PSD to Figma' existent sur le Figma Community mais leur qualité est inégale et ils ne gèrent pas les effets de calque avancés.

Ma méthode préférée pour les fichiers complexes est d'utiliser Photoshop lui-même pour exporter chaque calque ou groupe en SVG quand le contenu est vectoriel, et en PNG haute résolution quand il est bitmap. Ce processus manuel est fastidieux mais il préserve la qualité et me permet de prendre des décisions de décomposition intelligentes à chaque étape. Pour les fichiers simples, l'export direct en SVG global depuis Illustrator ou l'import via un fichier Sketch intermédiaire fonctionnent correctement.

Stratégie de migration en cinq phases

La migration réussie suit un processus en cinq phases que j'ai éprouvé sur plusieurs projets. La première phase est l'audit et l'inventaire exhaustif de tous les assets existants. Je catalogue chaque fichier en identifiant son contenu, sa date de dernière modification, son niveau d'utilisation actuel et sa valeur stratégique. Cette cartographie révèle invariablement que vingt pour cent des fichiers concentrent quatre-vingts pour cent de la valeur. C'est sur ce noyau essentiel que la migration se concentre en priorité.

La deuxième phase consiste à définir le design system cible. C'est le moment critique où l'on décide de ne pas reproduire le chaos existant dans un nouvel outil. Je profite de la migration pour rationaliser : réduire le nombre de couleurs, harmoniser les espacements, unifier les styles typographiques, identifier les composants récurrents. Chaque décision de simplification améliore la cohérence du système futur. Le design system cible est une vision idéalisée mais pragmatique de ce que le patrimoine graphique devrait être.

Les trois dernières phases sont la construction de la fondation Figma avec les variables, styles et collections, la migration des composants reconstruits nativement avec Auto Layout plutôt que convertis mécaniquement, et enfin la migration des assets statiques — icônes en SVG, logos en SVG, images en formats optimisés. Chaque composant est reconstruit à partir de sa logique fonctionnelle, pas de son apparence dans le PSD. Un bouton n'est plus un groupe de calques figés mais un composant interactif avec des variantes, des propriétés et des contraintes de redimensionnement.

Construire la fondation Figma : variables, modes et Dev Mode

Les Figma Variables sont la fondation technique du design system moderne. Quatre types — couleur, nombre, chaîne et booléen — permettent de modéliser l'intégralité des tokens de design. J'organise mes variables en collections thématiques : une collection pour les couleurs primitives, une pour les alias sémantiques, une pour les espacements, une pour la typographie. Chaque collection supporte des modes qui permettent de gérer les thèmes clair et sombre, les marques blanches ou les variations régionales avec un seul jeu de composants.

Le scoping des variables est un mécanisme de gouvernance essentiel. Je restreins la portée de chaque variable aux propriétés CSS pertinentes : une variable de couleur de fond n'est applicable qu'au fill, une variable d'espacement n'est applicable qu'aux gaps et paddings. Cette discipline empêche les utilisateurs du design system d'appliquer des tokens dans des contextes non prévus, ce qui préserve la cohérence à l'échelle de l'organisation.

Figma Dev Mode est l'interface qui connecte le design system aux développeurs. Il génère des snippets CSS, SwiftUI et Compose à partir des composants, expose les noms de tokens avec la syntaxe code configurée et signale les composants marqués comme 'ready for development'. L'extension VS Code de Figma permet aux développeurs de consulter les spécifications directement dans leur éditeur de code. Pour les équipes en plan Enterprise, le branching et le merging de bibliothèques offrent une gouvernance comparable à Git pour le design system.

Pièges courants et stratégies d'évitement

Le piège le plus fréquent est de tenter de reproduire la structure du PSD à l'identique dans Figma. Les calques Photoshop n'ont pas d'équivalent conceptuel dans Figma — ils sont remplacés par des frames, des composants et des contraintes d'Auto Layout. Chercher une correspondance un-à-un produit des fichiers Figma qui héritent de toutes les faiblesses du PSD sans bénéficier des forces de Figma. La migration doit être une reconstruction, pas une conversion.

La perte de formatage textuel est un problème récurrent. Les styles de caractère Photoshop — kerning personnalisé, effets de texte, déformations — ne se transfèrent pas. Les couleurs dérivent souvent entre les espaces colorimétriques RGB et CMYK. Les effets raster comme les ombres portées complexes, les biseaux et les textures de calque n'ont pas d'équivalent natif et doivent être repensés avec les outils Figma ou exportés en images. Chaque divergence doit être documentée et validée avec les parties prenantes.

L'échelle est le défi le plus sous-estimé. Un patrimoine de plusieurs milliers de fichiers PSD ne se migre pas en quelques semaines. La résistance au changement des équipes habituées à Photoshop est un facteur humain qu'il ne faut pas négliger. Je recommande une approche progressive : migrer un projet pilote complet, mesurer les gains, former l'équipe sur ce cas concret, puis élargir progressivement. La déprécation de l'ancien système doit être planifiée avec des périodes de transition suffisantes pour que personne ne se sente abandonné.

Accompagner le changement et mesurer le retour sur investissement

La migration technique n'est que la moitié du travail. L'autre moitié est l'accompagnement humain. Les designers qui ont travaillé dans Photoshop pendant des années doivent modifier des réflexes profondément ancrés. La pensée en composants réutilisables, la logique de contraintes d'Auto Layout, la collaboration en temps réel, le versioning intégré — chaque aspect de Figma représente un changement de mentalité que la formation technique seule ne suffit pas à opérer.

J'organise des ateliers pratiques où les designers reconstruisent dans Figma des maquettes qu'ils connaissent bien de Photoshop. Partir d'un résultat familier pour découvrir une méthode nouvelle réduit l'anxiété et accélère l'apprentissage. Je mesure le progrès par la capacité à créer des composants réutilisables plutôt que des compositions statiques. Quand un designer commence spontanément à penser en termes de variantes et de propriétés, la transformation culturelle est engagée.

Le retour sur investissement d'une migration bien conduite est substantiel. Les équipes que j'ai accompagnées rapportent une réduction de cinquante à soixante-dix pour cent du temps de production de maquettes après la phase d'adaptation initiale de quatre à six semaines. Le design system, une fois en place, devient un accélérateur dont le rendement augmente avec chaque nouveau projet. Mais le bénéfice le plus précieux est qualitatif : la cohérence visuelle à l'échelle de l'organisation, qui était impossible à maintenir avec des milliers de fichiers PSD indépendants.