Comment exporter correctement un visuel depuis Figma ?
Exporter depuis Figma se fait en trois grandes étapes : sélectionner l’élément (calque, frame ou Tranche), définir les paramètres d’export (format, résolution), puis lancer l’export. Le choix du format et de l’échelle doit toujours correspondre à l’usage final, web ou print.
Choisissez un calque, un frame ou utilisez l’outil Tranche (raccourci S) pour délimiter une zone précise, même sans calque existant.
Dans l’onglet Design, cliquez sur « + » dans la section Export, puis choisissez le format (PNG, JPG, SVG, PDF) et l’échelle (1x, 2x, 3x) adaptés à la destination.
Prévisualisez le rendu, puis cliquez sur « Exporter ». Pour plusieurs éléments, sélectionnez-les avec Shift avant d’appliquer les mêmes réglages.
Adaptez toujours la résolution à l’usage réel : un export en 3x pour un simple aperçu web alourdit inutilement le fichier.
Chez Seen, nous savons qu’un export réussi conditionne la qualité finale d’un visuel, que ce soit pour le web ou le print. Dans ce guide, nous détaillons chaque étape, de la sélection au format final, pour les débutants comme pour les confirmés.
Sélectionner le contenu à exporter
La première étape consiste à choisir précisément le calque, le cadre ou l’élément que nous souhaitons exporter. Dans le panneau de calques, nous pouvons sélectionner un ou plusieurs éléments simultanément. Nous conseillons de bien nommer chaque calque : c’est ce qui garantit un export clair et organisé, surtout sur des projets volumineux.
Utiliser l’outil Tranche
L’outil Tranche (Slice), accessible via le raccourci S, nous permet de délimiter une zone précise à exporter, même si elle ne correspond à aucun calque existant. Il suffit de dessiner un cadre autour de la portion souhaitée pour créer une zone d’export indépendante.
Par exemple, si nous devons transmettre à un développeur uniquement l’en-tête d’une maquette, sans exporter toute la page, la Tranche est idéale : elle isole exactement la zone voulue, sans toucher à la structure des calques d’origine.
Appliquer les paramètres d’exportation
Une fois l’élément sélectionné, nous retrouvons le panneau d’export dans l’onglet Design, à droite de l’écran. En cliquant sur le bouton « + » de la section Export, nous ajoutons un paramètre. Il est tout à fait possible de cumuler plusieurs formats et résolutions pour un même élément.
Choisir le format (PNG, JPG, SVG, PDF)
Chaque format répond à un usage précis. Voici comment nous les répartissons selon les projets :
| Format | Usage idéal |
|---|---|
| PNG | Images avec transparence, icônes, logos |
| JPG | Photos, visuels lourds à alléger |
| SVG | Vectoriel évolutif, idéal pour le développement |
| Documents destinés à l’impression |
Notre conseil : pour le web, nous privilégions PNG ou SVG ; pour le print, le PDF reste incontournable.
Régler la résolution et l’échelle
Figma propose des échelles 1x, 2x ou 3x selon la destination du visuel. Un export en 2x convient généralement aux écrans Retina, tandis que le 1x suffit pour un usage web léger. Pour des supports mobiles haute densité, le 3x devient pertinent.
Nous recommandons d’adapter systématiquement la résolution à l’usage final : inutile d’exporter en haute définition un visuel destiné à un simple aperçu web, cela alourdirait le fichier sans bénéfice réel.
Exporter le contenu
Une fois les paramètres définis, il suffit de cliquer sur le bouton « Exporter » situé en bas du panneau. Nous apprécions particulièrement la fonction de prévisualisation, qui permet de vérifier le rendu avant de valider l’export final, évitant ainsi les mauvaises surprises.
Exporter une sélection unique
Pour exporter un seul élément, comme un calque, une image ou une icône, nous le sélectionnons, ajoutons un paramètre d’export dans le panneau, choisissons le format souhaité, puis cliquons sur « Exporter ».
Un cas fréquent : exporter un logo en PNG transparent pour l’intégrer sur un site ou un support de communication. Ce format conserve la transparence du fond, essentielle pour une intégration propre sur différents arrière-plans. Pour approfondir l’usage de Figma sur des projets de transfert vers le web, notre article sur le passage de Figma vers WordPress détaille les bonnes pratiques.
Exporter plusieurs éléments groupés
Pour exporter plusieurs calques ou frames simultanément, nous les sélectionnons en maintenant la touche Shift, puis nous appliquons les mêmes paramètres d’export à l’ensemble. Grouper les éléments avant export permet de gagner un temps précieux, surtout sur des projets comportant de nombreux visuels.
C’est particulièrement utile pour exporter une planche d’icônes complète en une seule action : plutôt que de traiter chaque icône individuellement, nous sélectionnons l’ensemble du set, définissons le format et l’échelle une fois, puis lançons l’export global. Le résultat : un dossier complet, prêt à être livré à une équipe de développement ou intégré directement dans une bibliothèque de composants.
Astuces pour des exports nets et optimisés
Pour éviter des exports flous, nous vérifions toujours que l’échelle choisie correspond à la résolution d’affichage cible. Un fichier trop lourd ralentit un site ou complique son partage : nous privilégions donc le format le plus léger possible sans sacrifier la qualité visuelle.
Nommer correctement ses fichiers avant export reste une étape souvent négligée, pourtant essentielle pour s’y retrouver dans une arborescence de production. Nous utilisons également des plugins Figma dédiés à l’automatisation des exports multiples, un gain de temps considérable sur les projets complexes. Pour aller plus loin dans la maîtrise de l’outil, notre guide complet sur Figma couvre l’ensemble de ses fonctionnalités.
Au final, un export bien maîtrisé, c’est une équipe qui gagne en efficacité et des livrables toujours prêts à l’usage, sans allers-retours inutiles.
