Avant de commencer
Qui peut utiliser cette fonctionnalité
Toute personne disposant au minimum d'un accès pour voir un fichier peut ajouter des paramètres d'exportation et exporter des ressources.
Exportez vos designs depuis Figma lorsque vous êtes prêt à les partager. Les paramètres d'exportation vous permettent de personnaliser la manière dont Figma exporte vos ressources. Cela vous permettra ainsi de définir ce que vous souhaitez exporter et comment vous souhaitez le faire.
Définissez le format et tout autre paramètre pertinent lorsque vous ajoutez un paramètre d'exportation à votre sélection.
Formats d'exportation
Exporter au format PNG
(Portable Network Graphics)
PNG est un format d'image graphique raster ou bitmap, généralement utilisé pour transférer des images sur Internet. Dans une image bitmap, chaque pixel ou « bit » représente une couleur unique. Ces bits sont placés sur une « map » pour former l'image complète.
PNG est un format bitmap sans perte, ce qui signifie que la qualité d'image n'est pas réduite lors de la compression de la ressource. Ainsi, vous conservez la qualité originale de l'image lorsque vous l'exportez.
Figma prend en charge les formats PNG 32 bits à l'aide du système de couleurs RGBA. La lettre A dans RGBA fait référence au canal alpha, qui contrôle l'opacité d'un pixel. Il n'est pas possible d'exporter au format PNG sans valeur alpha.
Vous voulez partager sans exporter ?
Faites un clic droit sur un objet et sélectionnez Copier/Coller > Copier au format PNG. Figma ajoutera un PNG à votre presse-papiers (avec une taille 2 fois plus grande par défaut. Toutefois, si des paramètres d'exportation sont déjà définis pour l'objet, Figma utilisera le paramètre d'exportation le plus grand). Vous pouvez également utiliser ces raccourcis :
- Mac : Cmd Maj C
- Windows : Ctrl + Maj + c
Paramètres d'exportation pris en charge : Contenus uniquement
Exporter au format JPG
(Joint Photographic Group)
JPG est également un format d'image se basant sur les pixels. Contrairement au format PNG, chaque JPG a des dimensions fixes. L'exportation d'un fichier au format JPG est la compression d'une image avec perte. Par conséquent, on constate une réduction de la taille de l'image, mais aussi de la qualité de cette dernière.
Ceci explique pourquoi le format JPG est utilisé dans le design d'impression et la photographie, mais pas sur Internet.
Paramètres d'exportation pris en charge : Contenus uniquement
Exporter au format SVG
(Scalable Vector Graphics)
SVG est un format graphique vectoriel basé sur le XML. Il s'agit de formes définies par des valeurs numériques et des coordonnées que vous pouvez appliquer sur n'importe quel écran.
SVG est un format flexible car il ne repose pas sur des pixels. Comme les SVG peuvent être représentés dans des scripts ou des codes, le format SVG est très utilisé pour le design numérique.
Figma ne prend en charge que les exportations au format SVG à l'échelle x1. Vous pourrez toujours modifier l'échelle d'un SVG en ajustant les valeurs du code ou en utilisant les variables de largeur et de hauteur. Par exemple : <img
src="image.svg" width="50px">.
Certaines fonctions de Figma ne sont pas prises en charge au format SVG.
- Les dégradés angulaires ou en losange. Figma les exportera en tant que dégradés radiaux.
- Figma n'exporte pas de flous en arrière-plan au format SVG. Vous devrez flouter ces calques directement.
- Par défaut, Figma exporte tout texte sous forme de glyphes. Cela signifie que vous ne serez plus en mesure d'éditer du texte exporté au format SVG. Pour conserver la modification de texte, cliquez sur et décochez le paramètre Ébauche de texte dans le menu.
- Figma exporte les contours au format SVG en tant que remplissages.
Paramètres d'exportation pris en charge :
Exporter au format PDF
(Portable Document Format)
Le format PDF vous permet de partager des mises en forme complexes et interactives. Les PDF incluent du texte, des polices, des graphiques et des images dans une mise en forme fixe.
Le format PDF vous permet de présenter et de manipuler des éléments individuels d'un design dans n'importe quel système. Polyvalent, ce format peut être utilisé dans tous les logiciels, matériels et systèmes d'exploitation.
Le langage de développement mobile d'Apple, Xcode, prend en charge le format PDF. Cela en fait un outil précieux dans la conception d'applications iOS. Utilisez le format PDF dans Figma pour exporter des diapositives de présentation ou partager des ressources dans le cadre d'un développement iOS. Vous pouvez également l'utiliser pour les maquettes de design d'impression.
- Figma prend uniquement en charge les exportations au format PDF à l'échelle x1. Sélectionnez un autre format pour exporter des ressources à une autre échelle.
- Figma ne prend actuellement pas en charge l'exportation de texte modifiable. Vous ne pourrez pas modifier de texte dans un PDF exporté depuis Figma. Vous aurez toujours la possibilité de sélectionner et copier du texte en affichant le PDF dans un navigateur ou dans tout autre logiciel compatible.
Autres paramètres d'exportation
Accédez aux autres paramètres lorsque vous ajoutez des paramètres d'exportation à votre sélection.
Cliquez sur dans la section Exporter du panneau des propriétés pour afficher et régler les paramètres d'exportation.
Ignorer les chevauchements de calques
Cette option est disponible pour les formats PNG, JPG et SVG.
- Activé : Figma inclut uniquement les calques sélectionnés dans l'exportation. Tout autre objet qui entrecoupe ou chevauche l'objet sélectionné ne sera pas exporté.
- Désactivé : Figma inclut tous les calques qui entrecoupent le calque ou le groupe sélectionné.
Inclure le cadre de sélection
Cette option est uniquement disponible lors de l'exportation de calques de texte aux formats PNG, JPG et SVG.
- Activé : Figma détermine la taille de l'exportation en fonction des dimensions du texte. Figma va ainsi rogner et ignorer tout espace situé entre les caractères du texte et le cadre de sélection.
- Désactivé : Figma détermine la taille de l'exportation par le cadre de sélection du calque de texte. Si le cadre de sélection est plus grand que le texte, Figma inclura l'espace libre dans l'exportation. S'il est plus petit, Figma rognera et ignorera les parties de texte situées à l'extérieur du cadre de sélection.
Inclure un attribut « id »
Cette option est uniquement disponible pour les exportations au format SVG.
Quand ce paramètre est sélectionné, Figma ajoutera une balise « id » aux métadonnées du fichier SVG. Figma place la balise « id » sur le nom de l'objet dans le panneau des calques.
Ébauche de texte
Cette option est uniquement disponible pour les exportations au format SVG . Figma active ce paramètre par défaut.
Avec ce paramètre activé, Figma convertira les calques de texte en glyphes. Si vous souhaitez conserver la mise en forme du texte, désactivez ce paramètre. Cela vous permettra de régler les chaînes de texte dans d'autres systèmes.
Contour simplifié
Dans Figma, vous pouvez appliquer un contour interne, central ou externe aux calques. Le format SVG prend uniquement en charge le contour central.
Le contour simplifié s'assurera que les contours internes et externes s'affichent correctement sur d'autres systèmes. Ce paramètre est uniquement disponible pour les exportations au format SVG et est activé par défaut. Le contour simplifié est disponible si les conditions suivantes sont respectées :
- Le format d'exportation est SVG
- Le calque est un réseau vectoriel et non pas une forme classique
- Le calque utilise un contour interne ou externe appliqué au réseau vectoriel
Remarque : si vous choisissez de ne pas simplifier le contour, Figma augmentera l'épaisseur de tous les contours et appliquera un masque. Bien que le visuel reste identique, Figma devra ajouter des lignes supplémentaires au code du SVG.
Exporter des ressources depuis Figma
Accédez aux options d'exportation dans la barre latérale de droite :
- Les collaborateurs disposant d'un accès
peut voir peuvent accéder aux paramètres d'exportation depuis l'onglet Exporter dans la barre latérale de droite.
- Les collaborateurs disposant d'un accès
pour éditer peuvent trouver la section Exporter dans l'onglet Design.
Effectuer votre sélection
Sélectionnez les objets et calques que vous souhaitez exporter. Il peut s'agir d'un seul objet ou calque, d'une sélection d'objets ou de tout autre élément du canevas.
Vous pouvez également utiliser l'outil Tranche pour exporter une partie de votre canevas.
Ajouter des paramètres d'exportation
Les paramètres d'exportation contrôlent la manière dont Figma exporte vos ressources, notamment l'échelle, le format et d'autres paramètres spécifiques au format. Affichez, ajoutez et supprimez les paramètres d'exportation dans la section Exporter de la barre latérale de droite.
Astuce ! Si vous avez déjà appliqué des paramètres d'exportation, vous pouvez utiliser le raccourci clavier pour exporter votre sélection.
- Mac : Maj Cmd E
- Windows : Maj + Ctrl + E
Vous pourrez alors utiliser les paramètres d'exportation pour déterminer comment vous souhaiteriez les exporter.
Vous pouvez ajouter autant de paramètres d'exportation pour votre sélection que vous le souhaitez. Il peut s'agir d'une combinaison de différents formats ou échelles.
- Cliquez sur dans la section Exporter de la barre latérale de droite.
- Sélectionnez un format d'exportation à l'aide du champ Suffixe. Choisissez entre PNG, SVG, JPG ou PDF.
- Sélectionnez une échelle dans la liste par défaut, ou utilisez le champ prévu à cet effet pour saisir la taille ou l'échelle de votre choix. Saisissez un nombre ainsi que la lettre suivante :
- Ajoutez un
x après la valeur pour l'utiliser en tant que multiplicateur.
- Ajoutez un
w après la valeur pour définir une largeur fixe.
- Ajoutez un
h après la valeur pour définir une hauteur fixe.
- Cliquez sur pour ouvrir le menu Options d'exportation et régler les autres paramètres d'exportation.
- Cliquez sur à côté de l'Aperçu pour voir à quoi va ressembler votre fichier.
Astuce ! Exportez vos designs avec un plus grand multiplicateur afin de créer des exportations aux résolutions plus élevées et ainsi d'éviter des exportations floues. Cela résultera en un fichier plus grand et une résolution plus élevée.
Remarque : Figma considère le symbole « / » dans le nom des calques comme une hiérarchie et organisera alors l'exportation de votre sélection en dossiers. Vous pouvez renommer les calques pour supprimer la hiérarchie et ainsi éviter que Figma n'exporte les ressources via une hiérarchie de dossiers . Découvrez comment renommer les calques →
Modifier ou supprimer un paramètre d'exportation
Vous pouvez supprimer ou modifier des paramètres d'exportation à tout moment.
- Cliquez sur l'un des champs du paramètre.
- Cliquez sur l'icône située en haut de la section Exporter.
- Nous supprimerons ce paramètre de la sélection en cours.
Exporter les ressources
Figma effectuera un enregistrement de tous les paramètres d'exportation que vous appliquez à une sélection dans la liste Exporter du fichier. Cela vous permet d'exporter chaque ressource enregistrée dans votre liste d'exportation en une seule action
Vous pouvez choisir d'exporter une sélection spécifique de calques ou d'objets, ou d'exporter l'ensemble de vos ressources.
Exporter une sélection spécifique
Exportez n'importe quelle sélection avec des paramètres d'exportation. Vous pouvez le faire lorsque vous appliquez pour la première fois des paramètres d'exportation à une sélection, ou en effectuant une sélection qui dispose déjà de paramètres d'exportation.
- Sélectionnez les calques que vous souhaitez exporter.
- Ajoutez ou réglez les paramètres d'exportation.
- Cliquez sur le bouton Exporter dans la barre latérale de droite.
- Figma exportera votre sélection en cours.
Exporter de manière groupée
Exportez des ressources groupées à l'aide de la liste d'exportation. Cela inclut toutes les sélections auxquelles vous avez ajouté des paramètres d'exportation.
- Cliquez sur le menu . Ensuite, sélectionnez Fichier, puis Exporter dans les options. Vous pouvez également utiliser le raccourci clavier :
- macOS : Maj Cmd E
- Windows : Maj + Ctrl + E
- Le modal Exporter affichera toutes les sélections pour lesquelles vous avez des paramètres d'exportation. Pour chaque sélection, vous pouvez :
- Voir l'échelle, le format et la dimension de la ressource
- Passer le curseur sur la miniature ou le nom du calque pour afficher le nom du fichier exporté
- Cliquer sur la miniature pour visualiser cette sélection sur le canevas
- Cochez la case à côté de chaque sélection que vous souhaitez exporter.
- Cliquez sur le bouton Exporter pour exporter les ressources sélectionnées.
Astuce ! Enregistrez vos designs en tant que fichier .fig pour exporter l'ensemble du fichier Figma. Cela n'inclura pas les commentaires, l'historique des versions ou les permissions du fichier d'origine. Vous pouvez uniquement ouvrir les fichiers .fig à l'aide de Figma.
- Cliquez sur
pour ouvrir le menu.
- Sélectionnez Fichier > Enregistrer une copie locale.
- Figma téléchargera une copie du fichier dans votre dossier de téléchargements.
