Comment migrer des designs et maquettes Sketch vers Figma ?

Tutoriel
3 min
Publié le Apr 24, 2022
Dernière mise à jour le
logo sketch sur fond bleu et logo figma sur fond noir avec flèche qui va de sketch vers figma
Résumez cet article avec une IA
Points clés de l'article

La migration de vos maquettes web, wireframes, et autres visuels Sketch vers Figma peut se faire très simplement.

Vous pourrez tout d'abord importer un fichier Sketch (.sketch) entier dans Figma, ce qui créera automatiquement un nouveau fichier Figma, reprenant l’ensemble des éléments graphique. Cette conversion d’un modèle graphique Sketch vers Figma se fait à 4 niveaux :  

  • Conversion des pages
  • Conversion des symboles
  • Conversion des polices
  • Conversion des styles

Conversion des pages Sketch

Figma vous permet de créer plusieurs pages au sein d’un même fichier. Chacune des pages de votre fichier Sketch seront donc recréées à l’identique lors de l’importation. Vous pourrez retrouver vos nouvelles pages Figma dans le panneau de Layer sur la gauche du mode éditeur.

Conversion des symboles en components

Figma dispose d’un fonctionnalité “Components”, semblable à la fonctionnalité “Symbols” de Sketch. Lors de l’exportation Sketch vers Figma, chacun de vos symboles seront donc transformés en components, et une page “Symbols” sera créée pour regrouper tous les nouveaux components du fichier.

Conversion des polices dans Figma

Les polices utilisées sur votre Fichier Sketch seront également reprises dans Figma lors de l’importation, à condition qu’elles existent déjà dans Figma. Figma utilise les polices du catalogue Google Web Font.

Il est possible que l’importation des polices ne se fasse pas correctement, vous aurez alors un message d’erreur "Missing fonts”. Pour résoudre ce problème, vous devrez importer vos nouvelles polices dans Figma, puis utiliser la fonctionnalité “Replace fonts” pour mettre à jour tous les textes d’un coup.

Conversion des styles

Les styles que vous aurez créé dans Sketch ne pourront malheureusement pas être copier dans Figma. Pour faciliter le design vous devrez donc créer des nouveaux styles dans Figma.

Importer un fichier Sketch dans Figma

Il existe plusieurs méthodes pour migrer des éléments ou fichiers Skecth vers Figma.

  • Glisser / Déposer un fichier .sketch depuis un bureau vers le tableau de bord Figma.
  • Télécharger un fichier .sketch depuis un nouveau fichier Figma
  • Copier / Coller des éléments graphiques depuis un projet Sketch vers une page Figma

Voici comment importer un nouveau fichier Sketch depuis un fichier Figma :

interface editeur figma avec panneau d'importation de fichier sketch ouvert
  1. Cliquer sur le menu en haut à gauche
  2. Aller sur l’onglet “File”
  3. Cliquer sur “New from Sketch File
  4. Sélectionner le fichier .sketch pour l’importer
Thomas Labonne
Thomas Labonne
Co-fondateur

Articles qui devraient vous intéresser

Interface de Webflow Optimize affichant le tableau de bord d’analyse et les opportunités d’optimisation des conversions, avec suivi du trafic et des sources organiques.
Documentation
Webflow

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing
Graphique de performance boursière d'Apple Inc. montrant les variations de prix intrajournalières et les données de marché dans une interface sombre.
Documentation
Développement

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?
Projection du logo Digidop sur la façade d'un bâtiment dans une grande ville la nuit, symbolisant la visibilité de la marque.
Storytelling
Digidop

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Transformez votre site web en un moteur de croissance.

Nous contacter