Comment migrer des designs et maquettes Sketch vers Figma ?

Tutoriel
24/4/2022
3 min
logo sketch sur fond bleu et logo figma sur fond noir avec flèche qui va de sketch vers figma
Key points

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

Webflow Localization, cas d'utilisation de Credial
Documentation
Webflow

Webflow Localization : guide et cas pratique de Credial

Webflow Localization : guide et cas pratique de Credial
Visuel illustrant le passage de digidop.fr à digidop.com
News
Digidop

Digidop.fr devient Digidop.com

Digidop.fr devient Digidop.com
Photo de l'équipe Digidop avec Logo Digidop 2024
News
Digidop

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Transformez votre site web en un moteur de croissance.

Nous contacter