Badge Webflow Award Winner 2023

Comment migrer des designs et maquettes Sketch vers Figma ?

Publié le 
24/4/2022
Modifié le 
27/3/2023
Temps de lecture : 5 min
logo sketch sur fond bleu et logo figma sur fond noir avec flèche qui va de sketch vers figma
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

De Sketch à Figma, votre fichier sera-t-il préservé ? Dans cet article nous analysons la conversion de plusieurs éléments de Sketch à Figma. Nous vous expliquons également comment migrer vos maquettes et designs Sketch vers Figma.

Points clés à retenir

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

Découvrez la comparaison détaillée Figma vs Sketch

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop