Figma design prend en charge divers formats et paramètres d'exportation. Utilisez cet article pour déterminer le format qui correspond le mieux à vos besoins. Lorsque vous êtes prêt(e) à exporter vos designs, consultez la page Exporter depuis Figma pour savoir comment appliquer ces paramètres.
Formats d'exportation
PNG (Portable Network Graphics)
Le format PNG est un format d'image matricielle qui prend en charge la compression sans perte, la transparence et le contraste des couleurs. La compression sans perte maintient la qualité de l'image originale et la lisibilité du texte lors de l'exportation. Gardez à l'esprit que l'exportation au format PNG créera un fichier beaucoup plus lourd qu'une exportation JPG.
Les fichiers PNG conviennent parfaitement aux images qui utilisent la transparence et aux éléments graphiques qui contiennent à la fois des images et du texte, comme des logos, des graphiques ou des illustrations.
Remarque : Figma prend en charge les formats PNG 32 bits en utilisant le modèle colorimétrique RVBA. Le A de RVBA se rapporte au canal alpha qui contrôle l'opacité d'un pixel. Il n'est pas possible d'exporter au format PNG sans valeur alpha.
Les paramètres d'exportation suivants sont disponibles pour le format PNG :
JPG (Joint Photographic Group)
Le format JPG (ou JPEG) est un format de fichier d'image matricielle qui utilise une méthode de compression avec perte. La compression avec perte réduit la taille du fichier en effaçant de façon permanente certaines données du fichier. Cela crée des fichiers plus légers, mais amoindrit également la qualité de l'image.
Dans la plupart des cas, la qualité JPG est adaptée à une utilisation sur le Web et raccourcit le temps de chargement en raison de sa taille réduite. Les formats JPG peuvent aussi être utilisés pour le design d'impression et la photographie.
Gardez en tête que les fichiers JPG ne prennent pas en charge la transparence et que la compression peut affecter la lisibilité du texte. Si votre image contient du texte ou des éléments transparents, préférez l'exportation au format PNG ou SVG.
Conseil : utilisez l'option Aperçu des pixels pour prévisualiser la façon dont vos designs s'afficheront dans un format tramé. En savoir plus sur l'Aperçu des pixels →
Les paramètres d'exportation suivants sont disponibles pour le format JPG :
SVG (Scalable Vector Graphics)
Le format SVG est un format graphique vectoriel basé sur le XML. Il utilise des formes définies par des valeurs numériques et des coordonnées que vous pouvez appliquer sur n'importe quel écran. Comme les fichiers SVG n'utilisent pas de pixels, ils peuvent s'adapter à n'importe quelle taille, sans dégrader la qualité de l'image. Ils permettent également d'utiliser des éléments transparents.
Les fichiers SVG peuvent être représentés sous forme de scripts ou de code, ce qui les rend populaires pour le design numérique. Utilisez le format SVG pour des logos, des icônes ou des illustrations que vous prévoyez d'inclure dans des designs réactifs.
Remarque :gardez à l'esprit les informations suivantes lorsque vous exportez vers un format SVG :
-
Dégradés angulaires ou en losange :Figma les exporte en tant que dégradés radiaux.
-
Flous en arrière-plan : vous devrez flouter le calque directement.
-
Texte : par défaut, le texte est exporté sous forme de glyphes. Par conséquent, il n'est pas possible de modifier un calque de texte une fois exporté. Pour conserver la mise en forme du texte, cliquez sur et décochez Ébauche de texte
-
Contour : Figma exporte les contours en tant que remplissages.
Les paramètres d'exportation suivants sont disponibles pour le format SVG :
PDF (Portable Document Format)
Les fichiers PDF vous permettent de partager des mises en page complexes et interactives. Ce format inclut le texte, les polices, les dessins vectoriels et les images dans une mise en page fixe, et permet de présenter et de manipuler les é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.
Xcode, le langage de développement mobile d'Apple, prend en charge le format PDF. Cela en fait un outil précieux pour le développement 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.
Remarque : Figma exporte le texte en tant que glyphes, ce qui signifie que vous ne serez pas en mesure de modifier un texte dans le fichier PDF final. 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.
Paramètres d'exportation
Les paramètres d'exportation vous donnent davantage de contrôle sur la façon dont Figma exporte vos designs.
Échelle
Choisissez l'une des options d'échelle proposées par défaut ou saisissez une taille personnalisée dans le champ. Pour personnaliser la taille, saisissez un nombre ainsi que l'un des éléments suivants :
- 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.
Si vous exportez du contenu pour des écrans haute densité (comme les écrans Retina), pensez à définir une échelle supérieure afin d'augmenter la résolution de la ressource.
Par défaut, les ressources exportées en tant qu'images depuis Figma disposent d'un DPI de 72. Pour calculer le DPI d'une image exportée à l'échelle, multipliez 72 par l'échelle choisie. Par exemple, les images exportées à l'échelle x2 ont un DPI de 144. Les images exportées à l'échelle x3 ont un DPI de 216.
Remarque : notez que la taille visuelle d'une image exportée à l'échelle x2 n'augmente pas si vous l'importez à nouveau dans Figma. En effet, Sigma part du principe que les images dotées d'un DPI de 144 seront utilisées dans des designs pour des écrans haute densité et les réduit automatiquement de moitié pour les adapter. Pour en savoir plus, consultez la page Importer du contenu dans Figma →.
Il existe des restrictions de format concernant la mise à l'échelle :
- Figma ne prend en charge que les exportations au format SVG à l'échelle x1. Vous pourrez toujours modifier l'échelle d'un fichier 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">.
- Figma ne prend en charge que les exportations au format PDF à l'échelle x1. Pour exporter des ressources à une échelle différente, vous devrez choisir un autre format.
Suffixe
Il s'agit d'un paramètre optionnel. Tout ce que vous saisissez dans le champ « Suffixe » sera ajouté au nom du fichier une fois ce dernier exporté. Utilisez ce paramètre pour classer vos ressources exportées sans avoir à modifier le nom du calque. Par exemple, si vous exportez un cadre intitulé « PageD'Accueil » en tant que PNG et saisissez « Brouillon » dans ce champ, le nom du fichier exporté sera « PageD'AccueilBrouillon ».
Paramètres d'exportation spécifiques au format
Certains formats offrent des paramètres d'exportation supplémentaires. Cliquez sur dans la section Exporter du panneau Propriétés pour afficher et modifier ces paramètres.
Ce tableau affiche les paramètres disponibles pour chaque format :
Ignorer les chevauchements de calques
Ce paramètre est activé par défaut. Lorsqu'il est activé, Figma, n'inclut que les calques sélectionnés dans l'exportation. Tout autre objet qui entrecoupe ou chevauche l'objet sélectionné n'aura pas d'effet sur l'exportation. Lorsqu'il est désactivé, Figma inclut tout calque qui entrecoupe le calque ou le groupe sélectionné.
Vous exportez une tranche ? Le paramètre Ignorer les chevauchements de calques fonctionne différemment pour les tranches par rapport aux autres objets. Si ce paramètre est activé et que la tranche est incluse dans un cadre ou un groupe, Figma n'exportera que le contenu qui se trouve dans le même contenant que la tranche et qui est visuellement dans les frontières de la tranche.
Si le paramètre Ignorer les chevauchements de calques est désactivé, tout le contenu se trouvant visuellement à l'intérieur des frontières de la tranche sera exporté. Si la tranche n'est pas incluse dans un cadre ou un groupe, activer ou désactiver ce paramètre n'aura aucun effet. Tout le contenu situé visuellement à l'intérieur des frontières de la tranche sera exporté.
Inclure la zone de délimitation
Disponible pour les calques de texte uniquement. Lorsque ce paramètre est désactivé, Figma détermine la taille de l'exportation en fonction de la zone de délimitation du calque de texte. Si la zone de délimitation est plus grande que le texte, Figma inclura l'espace libre dans l'exportation. Si elle est plus petite, Figma rognera et ignorera les parties de texte situées à l'extérieur de la zone de délimitation.
Lorsque le paramètre est désactivé, Figma détermine la taille de l'exportation en fonction des dimensions du texte lui-même. Figma rognera et ignorera tout espace situé entre les caractères et la zone de délimitation.
Inclure un attribut « id »
Lorsque ce paramètre est activé, Figma ajoute une balise « id » aux métadonnées du fichier SVG. Cela permet à JavaScript d'accéder facilement à l'élément <svg> et peut également être utilisé pour désigner un sélecteur d'identifiant spécifique dans une feuille de style. Figma place la balise « id » sur le nom de l'objet dans le panneau des calques.
Ébauche de texte
Ce paramètre est activé par défaut si au moins un calque de texte est sélectionné. Figma convertit tout calque de texte en glyphes afin de préserver la mise en forme. Le texte ne sera pas modifiable après exportation si ce paramètre est activé. Si vous souhaitez continuer à apporter des modifications, désactivez ce paramètre.
Simplifier le contour
Ce paramètre est activé par défaut si l'objet sélectionné est un réseau vectoriel (pas une forme basique) et qu'il inclut un contour interne ou externe. Dans Figma, vous pouvez appliquer des contours internes, centraux ou externes à un objet. Le format SVG prend uniquement en charge le contour central. Ce paramètre assure que les autres systèmes restituent correctement les contours internes et externes.
Remarque : si vous désactivez ce paramètre, Figma augmentera l'épaisseur de tous les contours et appliquera un masque. Bien que le résultat visuel reste identique, Figma devra ajouter des lignes supplémentaires au code du fichier SVG.
