Si un fichier Sketch importé dans Figma est désordonné, ne remplacez pas immédiatement les pages : conservez l’original, créez une copie d’importation et contrôlez séparément les polices, les composants, les styles et les ressources. Les écarts simples se corrigent dans Figma ; si la bibliothèque d’origine, les effets complexes ou l’ouverture du fichier posent problème, revenez dans Sketch sur un Mac, éventuellement par l’intermédiaire d’un Mac distant pour une intervention ponctuelle.

Cet article s’adresse aux designers d’interface qui migrent des projets historiques vers Figma, aux freelances travaillant sous Windows qui reçoivent des fichiers .sketch, ainsi qu’aux responsables produit qui doivent estimer la charge réelle d’une migration de système de design.

Commencez par isoler l’anomalie, pas par refaire l’interface

L’importation d’un fichier Sketch dans Figma produit un fichier Figma indépendant. Les Symbols sont convertis en composants, mais cette conversion ne signifie pas que toute la bibliothèque d’origine devient automatiquement une bibliothèque d’équipe réutilisable. Figma documente aussi les limites liées aux polices, aux styles partagés et aux fichiers volumineux dans sa procédure officielle d’importation des fichiers Sketch.

Avant toute correction, préparez trois éléments :

  • le fichier .sketch original, conservé sans modification ;
  • la copie Figma issue de l’importation ;
  • des captures ou exports des pages de référence dans leur état initial.

Cette séparation évite une erreur fréquente : corriger directement une copie déjà altérée, puis ne plus savoir si un écart vient de l’importation ou d’une modification manuelle.

Commencez par sélectionner une page représentative : écran d’accueil, parcours de formulaire, tableau de bord ou page contenant plusieurs composants. Comparez d’abord la structure générale, puis les détails. Une page qui semble « décalée » peut présenter trois problèmes différents :

  1. une différence d’échelle ou de zoom sans changement réel des dimensions ;
  2. des éléments localement modifiés, par exemple une police ou un effet ;
  3. un fichier Sketch ancien dont la source était déjà incomplète ou obsolète.

Vous pouvez consigner chaque anomalie dans un registre simple. Ne notez pas seulement « rendu différent ». Indiquez la page, le calque, la valeur attendue, la valeur observée et l’action décidée.

Symptôme observé Vérification prioritaire Correction possible dans Figma Retour à Sketch recommandé
Texte renvoyé sur une ligne supplémentaire Nom de police, graisse, version et largeur du bloc Installer ou rendre disponible la bonne police, puis contrôler les textes clés Si la police source ou le fichier original n’est plus identifiable
Bouton visuellement proche mais non réutilisable Composant principal, instance et propriétés Reconnecter ou recréer le composant Si la relation avec une bibliothèque externe est inconnue
Couleur correcte mais structure absente Style partagé, variable, dégradé et effet Recréer le style avec une nomenclature claire Si le système doit être entièrement maintenable
Image manquante ou importation interrompue Ressource incorporée, lien externe et état du fichier Réimporter l’asset depuis une source vérifiée Si le fichier ne s’ouvre pas correctement dans Sketch
Ombre, masque ou fusion différente Effet appliqué et ordre des calques Refaire l’effet après comparaison visuelle Si l’effet est critique sur de nombreuses pages

Cette grille sert à choisir une profondeur de réparation. Pour un export statique, la priorité est la fidélité visuelle. Pour un système de design qui doit vivre dans Figma, il faut également restaurer les relations, les styles et les composants réutilisables.

Première étape : rétablir les polices avant de toucher aux blocs

La question des polices explique une grande partie des décalages visibles après importation. Une police portant le même nom peut différer par sa version, sa graisse disponible, ses métriques ou son fichier réel. Le texte change alors de largeur, les retours à la ligne bougent et les boutons prennent une autre hauteur.

Vérifiez les points suivants dans cet ordre :

  1. le nom exact de la famille ;
  2. la graisse utilisée, par exemple normale, moyenne ou grasse ;
  3. la présence de la variante italique si elle existe ;
  4. la version installée sur l’ordinateur qui ouvre Figma ;
  5. l’environnement utilisé : application Figma ou navigateur.

Dans Figma, une police locale doit être accessible à l’environnement de travail. Consultez la procédure officielle d’ajout d’une police locale dans Figma, puis vérifiez les autorisations d’accès aux polices locales dans le navigateur grâce à la documentation sur l’accès au réseau local de Figma.

Ne lancez pas un remplacement global dès qu’une police manque. Cette action peut rendre le texte lisible tout en modifiant silencieusement plusieurs écrans. Commencez par relever les calques concernés, puis comparez les pages les plus sensibles :

  • titres dont la longueur force un retour à la ligne ;
  • boutons contenant une phrase complète ;
  • champs de formulaire ;
  • cartes avec hauteur automatique ;
  • éléments alignés sur une grille.

Après correction, contrôlez le texte, la hauteur de ligne, la largeur du bloc et la dimension du bouton. Le guide officiel du texte dans Figma rappelle notamment l’importance de vérifier la police réellement utilisée et ses réglages, plutôt que de se fier au seul nom affiché.

La police semble correcte, mais la mise en page reste différente

Dans ce cas, comparez le style de paragraphe, l’interlignage, l’espacement des lettres et le redimensionnement automatique du bloc. Une police disponible ne garantit pas que ses paramètres d’affichage soient identiques à ceux du document source.

Pour la livraison, indiquez les polices requises dans le dossier du projet. Si le destinataire ne peut pas les installer, fournissez aussi un export de référence. Cela ne remplace pas une vérification éditable, mais permet de repérer immédiatement un changement de composition.

Deuxième étape : reconstruire les relations entre Symbols et composants

Les Symbols de Sketch sont convertis en composants lors de l’importation dans Figma, selon la documentation de Figma sur l’importation des fichiers Sketch. Le point délicat est ailleurs : le nom du composant ne prouve pas que son lien avec la bibliothèque originale a été préservé.

Pour chaque famille importante, identifiez :

  • le composant principal ;
  • ses instances placées dans les écrans ;
  • les textes ou images remplacés dans ces instances ;
  • les états imbriqués ;
  • les variantes qui doivent rester synchronisées ;
  • la présence éventuelle d’une bibliothèque Sketch externe.

Une instance peut donc conserver un aspect proche de l’original tout en n’étant plus correctement rattachée à une source. Si vous modifiez le composant principal et qu’aucun écran ne suit, la relation est rompue ou la structure a été convertie d’une manière qui demande une reconstruction.

La décision dépend du devenir du projet :

  • pour quelques écrans destinés à une présentation, corrigez les composants visibles et documentez les limites ;
  • pour une application appelée à évoluer, recréez les composants structurants dans Figma ;
  • pour une bibliothèque externe dont l’origine est incertaine, ouvrez d’abord le projet dans Sketch et vérifiez la source au lieu de deviner à partir des noms.

La documentation Figma sur les composants et les bibliothèques est utile pour distinguer un composant local d’une bibliothèque publiée. Cette distinction détermine directement la charge de maintenance future.

Type de projet après migration Niveau de réparation conseillé Critère d’acceptation
Prototype ou présentation ponctuelle Priorité au rendu des écrans clés Les textes, espacements et exports correspondent aux références
Produit en développement Réparation des composants utilisés dans les parcours actifs Les instances suivent le composant principal et les états sont identifiables
Système de design partagé Reconstruction contrôlée des composants et styles Les noms, propriétés, variantes et règles de publication sont documentés
Fichier historique incomplet Vérification dans Sketch avant migration supplémentaire La source, les bibliothèques et les ressources sont confirmées

Troisième étape : traiter les styles, effets et masques séparément

Un rendu visuellement similaire peut cacher une structure inutilisable. Les couleurs, styles de texte, ombres, dégradés, masques et modes de fusion doivent être contrôlés comme des catégories distinctes.

Pour les couleurs, comparez la valeur, l’opacité et le contexte d’utilisation. Une couleur peut sembler identique dans un écran clair, puis révéler une différence dans un état désactivé ou un mode sombre. Pour les styles de texte, vérifiez la famille, la graisse, la taille, l’interlignage et l’espacement.

Les effets demandent un contrôle manuel plus strict :

  • ombre portée et flou ;
  • dégradé avec plusieurs arrêts ;
  • masque appliqué à une image ;
  • transparence ;
  • mode de fusion ;
  • ordre des calques ;
  • rayon de contour ou de coin.

Figma explique dans sa documentation consacrée aux styles dans Figma Design comment créer et partager ces styles. Après une importation, ne considérez toutefois pas un style visuellement proche comme une équivalence structurelle. Vérifiez s’il est effectivement réutilisable et correctement nommé.

Créez une table de suivi avec trois statuts : « conservé », « modifié » et « à confirmer ». Ajoutez une colonne « usage futur ». Un effet utilisé une seule fois dans une maquette ne mérite pas forcément la même reconstruction qu’un style appliqué à toute une bibliothèque.

Attention : si vous aplatissez rapidement les calques pour obtenir une image identique, vous pouvez résoudre l’écart visuel tout en supprimant la possibilité de modifier proprement l’interface. Réservez cette méthode aux éléments dont l’édition n’est plus nécessaire.

Quatrième étape : débloquer un fichier volumineux ou des ressources absentes

Lorsque l’importation du fichier .sketch échoue, ne concluez pas immédiatement à une incompatibilité générale. Commencez par ouvrir l’original dans une version stable de Sketch disponible dans votre environnement. Contrôlez ensuite si le document contient réellement les images, bibliothèques et ressources attendues.

La documentation Sketch sur la création, l’ouverture et la consultation des documents décrit les opérations de base à effectuer avant de déplacer le fichier. Ses indications sur l’importation et l’exportation permettent également de vérifier si le problème vient du document source ou de l’étape de conversion.

Procédez ainsi :

  1. dupliquez le fichier source sans le renommer de manière ambiguë ;
  2. ouvrez la copie dans Sketch ;
  3. repérez les pages qui contiennent des liens, symboles ou ressources manquantes ;
  4. exportez une version de contrôle des pages importantes ;
  5. dupliquez le document par page ou par fonctionnalité si l’ensemble est trop lourd ;
  6. importez chaque copie dans Figma ;
  7. comparez les résultats avant de réunir ou de reconstruire les éléments.

Une image absente ne doit pas être remplacée par une autre portant un nom similaire. Vérifiez ses dimensions, son cadrage, son profil colorimétrique si la livraison l’exige, et son emplacement dans le dossier de ressources.

Si vous travaillez sous Windows et que vous ne pouvez pas ouvrir le fichier source, vous pouvez demander au propriétaire du document de réaliser cette vérification. Lorsque ce n’est pas possible, un accès temporaire à un Mac distant peut servir à ouvrir Sketch, nettoyer une copie, confirmer les bibliothèques et préparer l’importation. Ce choix ne rend pas la conversion sans perte : il vous donne simplement accès à l’environnement natif nécessaire pour diagnostiquer le fichier.

Cinquième étape : valider une migration avant de la déclarer terminée

La validation ne doit pas se limiter à l’ouverture du fichier Figma. Utilisez une page représentative et vérifiez au minimum les quatre zones les plus exposées : typographie, composants, effets et assets.

Voici une liste d’acceptation que vous pouvez cocher pendant la revue :

  • [ ] Le fichier .sketch original est conservé dans un emplacement distinct.
  • [ ] La copie Figma importée est identifiée par son nom et sa date de traitement.
  • [ ] Les pages de référence disposent d’un export ou d’une capture source.
  • [ ] Les polices utilisées, leurs graisses et leurs versions sont documentées.
  • [ ] Les titres, boutons et champs ne présentent pas de retour à la ligne inattendu.
  • [ ] Les composants principaux et leurs instances ont été identifiés.
  • [ ] Les remplacements de texte, d’image et d’état fonctionnent comme prévu.
  • [ ] Les bibliothèques externes ont été confirmées dans Sketch ou signalées comme inconnues.
  • [ ] Les styles de couleur et de texte ont un statut « conservé », « modifié » ou « à confirmer ».
  • [ ] Les ombres, dégradés, masques et modes de fusion critiques ont été comparés.
  • [ ] Les ressources graphiques manquantes ont été retrouvées ou signalées.
  • [ ] Les exports destinés au développeur ou au client correspondent aux références.
  • [ ] Le registre des anomalies accompagne le fichier livré.
  • [ ] Une personne qui n’a pas effectué l’importation peut reproduire le contrôle.

À la fin, choisissez une seule voie pour chaque problème :

  • Réparation dans Figma si l’écart est local et que la structure importée reste exploitable ;
  • Révision par un Mac distant si l’accès à Sketch est nécessaire pour confirmer la source ou nettoyer le document ;
  • Reconstruction du système si les composants et styles doivent être maintenus sur le long terme.

Vous trouverez aussi des indications utiles dans notre guide consacré aux solutions pour utiliser Sketch sous Windows. Si le contrôle exige un environnement macOS temporaire, consultez les options de Mac distant pour les logiciels de design avant de choisir une organisation de travail.

Ce que la migration ne garantit pas

Figma prend bien en charge l’importation de fichiers Sketch, mais cette fonction ne promet pas une reproduction parfaite de chaque relation, effet ou bibliothèque. Un fichier importé peut être suffisamment fidèle pour une présentation et insuffisant pour devenir la nouvelle source d’un système de design.

Évitez donc trois conclusions trop rapides :

  • « le fichier s’ouvre, donc la migration est terminée » ;
  • « le composant porte le même nom, donc la bibliothèque est intacte » ;
  • « la police est installée, donc les retours à la ligne sont identiques ».

La bonne méthode est de relier chaque décision à l’usage final. Plus le fichier doit être réutilisé, partagé et maintenu, plus la validation structurelle compte autant que la comparaison visuelle.

Quand un Mac distant devient l’option raisonnable

Si votre environnement actuel est Windows, Figma peut couvrir une grande partie du travail quotidien. Il devient toutefois difficile de vérifier un fichier Sketch lorsque vous devez l’ouvrir dans l’application native, inspecter une bibliothèque externe ou préparer une copie propre avant importation.

L’alternative Windows seule présente alors plusieurs limites réelles : impossibilité d’examiner directement certains éléments du fichier source, dépendance à un autre membre de l’équipe pour les vérifications, allers-retours de fichiers et risque de corriger dans Figma une anomalie déjà présente dans Sketch. Acheter un Mac pour une migration ponctuelle ajoute, de son côté, un coût matériel et une machine à maintenir alors que le besoin peut disparaître après la livraison.

Dans ce cas précis, louer auprès de MACCOME un Mac accessible à distance peut être plus cohérent : vous disposez temporairement d’un environnement macOS complet pour ouvrir le fichier, confirmer les bibliothèques, préparer la migration et effectuer la recette. Cette solution reste moins pertinente si vous devez travailler chaque jour avec des périphériques physiques, produire durablement de lourdes sessions audio ou vidéo, ou conserver une station locale stable pendant plusieurs années. Pour une migration ciblée, un contrôle de source et une livraison à court terme, elle évite en revanche de transformer un incident de compatibilité en achat permanent.

Conservez toujours les quatre livrables finaux : l’original Sketch, la version Figma, le registre des écarts et les références visuelles. Si vous avez besoin d’un accès temporaire pour terminer cette vérification native, vous pouvez examiner les formules de Mac distant de MACCOME selon la durée réelle du projet.