Compresser vos exports d’images Figma

Comment choisir les réglages d’export et compresser vos exports d’images Figma avec TinyImage.

TinyImage détecte les réglages et formats d’export définis sur les calques de votre page Figma, et vous permet de les exporter en images compressées avec le plugin TinyImage.

L’analyse automatique de la page ignore les calques placés dans des conteneurs masqués. Les calques sélectionnés explicitement dans Figma sont tout de même vérifiés selon leur propre visibilité et leurs propres réglages d’export. Vous n’avez pas besoin de modifier vos réglages d’export enregistrés.

Pour un guide complet sur les réglages d’export de Figma et leur fonctionnement, consultez le guide officiel des exports dans Figma de l’aide Figma.

Chaque calque à compresser doit avoir au moins un réglage d’export. Si un calque n’a aucun réglage d’export, TinyImage ne sait pas que vous voulez le compresser et l’exporter, et il n’apparaît pas dans la liste des images exportables du plugin.

Ajouter et actualiser les réglages d’export ​

Pour commencer à exporter des images compressées depuis Figma, vérifiez d’abord que vous avez défini des réglages d’export d’image sur les calques à compresser.

Ajouter des réglages d’export aux calques Figma ​

Pour ajouter des réglages d’export à un ou plusieurs calques, sélectionnez-les dans Figma, puis, dans le panneau des propriétés de Figma, cliquez sur l’icône + à côté d’Export. Cliquez plusieurs fois sur + pour ajouter autant de réglages d’export que vous le souhaitez à ce calque. Vous pouvez ainsi exporter un même calque dans plusieurs formats et tailles à la fois (par exemple, SVG, JPG @1x, JPG @2x, PDF, etc.).

Actualiser les calques Figma après avoir modifié leurs réglages d’export ​

Si vous avez déjà ajouté des réglages d’export à un calque et voulez en ajouter ou en supprimer alors que le plugin TinyImage est déjà ouvert, procédez comme à l’étape précédente ; une fois les nouveaux réglages d’export en place, cliquez sur l’icône Refresh de la barre d’outils de TinyImage pour actualiser vos calques Figma et afficher les options d’export mises à jour dans la liste des images exportables de TinyImage.

Définir un pourcentage de qualité ou un poids cible ​

TinyImage vous permet de définir le pourcentage de qualité de la compression, de 1 à 100 %, ou un poids maximal cible (en kilo-octets) pour vos exports d’images. Une valeur plus basse donne des fichiers plus légers, mais des images de moins bonne qualité. Une valeur plus haute donne des fichiers plus lourds, mais des images de meilleure qualité.

  • 0 à 50 % : qualité basse (72 dpi pour les PDF)
  • 50 à 75 % : Bonne qualité (150 dpi pour les PDF)
  • 75 à 100 % : qualité optimale (300 dpi pour les PDF)

Régler le pourcentage de qualité de la compression ​

Vous pouvez définir le niveau de qualité de tous vos exports d’images, de 1 à 100 %, avec le curseur de compression de la barre d’outils de TinyImage. Cliquez (ou maintenez le clic) et faites glisser le curseur pour choisir le niveau de qualité voulu. Ce réglage s’applique à tous vos exports TinyImage.

Définir un poids maximal cible (Ko) ​

Vous pouvez aussi définir une limite de poids maximal (en kilo-octets) en activant l’option Size Target, puis en saisissant une valeur en kilo-octets dans le champ de taille. TinyImage essaiera alors de faire passer chacune de vos images sous ce poids maximal.

C’est souvent plus lent que le curseur de pourcentage de qualité, car chaque image doit être compressée progressivement jusqu’à atteindre la limite voulue.

Vous préférez définir le poids maximal de TinyImage dans Figma plutôt que dans l’interface ? Utilisez le suffixe des réglages d’export de Figma sur n’importe quel calque exportable. Ajoutez un tiret bas suivi d’un nombre terminé par kb (par exemple, _250kb), et TinyImage utilisera cette valeur comme poids maximal pour ce calque. Exemples de suffixes valides : _250kb, @2x_500kb, @1x_300kb

Les poids cibles ne s’appliquent pas aux exports PDF ou GIF. L’option de compression par poids cible n’a aucun effet sur les exports PDF ou GIF de TinyImage ; elle ne s’applique qu’aux images JPG, PNG, SVG, AVIF et WebP.

Remplacer la qualité ou le poids pour chaque export ​

En plus du niveau de qualité défini avec le curseur, TinyImage vous permet de définir une qualité ou un poids différent pour chaque format d’image ; cette valeur remplace la valeur globale définie par le curseur de qualité ou par le champ de poids cible dans l’en-tête du plugin.

Pour définir la qualité d’un format d’image précis, cliquez sur le champ numérique de qualité à côté de l’image concernée. Saisissez n’importe quel nombre entre 1 et 100 % : ce nombre devient le réglage de qualité utilisé pour exporter vos images.

Si vous visez un poids maximal, définissez un remplacement en cliquant sur le champ numérique en Ko à côté de l’image concernée. Saisissez n’importe quel nombre entre 1 et 9999 (Ko) : ce nombre devient le poids cible utilisé pour exporter vos images.

Sélectionner les images à compresser ​

Une fois les réglages d’export ajoutés aux calques à compresser, ceux-ci apparaissent dans la liste des images exportables de TinyImage. Vous n’êtes cependant pas obligé d’exporter en même temps toutes les images de votre page Figma. TinyImage vous permet de sélectionner (et de désélectionner) les images exportables à compresser à l’aide de cases à cocher.

Cocher et décocher les images exportables ​

Pour sélectionner (ou désélectionner) une image à exporter, cliquez sur la case à cocher à côté de sa vignette dans la liste des images exportables de TinyImage. Décocher une image l’exclut de la compression et de l’export ; la cocher l’y inclut.

Tout sélectionner ou tout désélectionner rapidement. Pour sélectionner ou désélectionner d’un coup toutes les images de la liste, cliquez sur la case à cocher de la barre d’outils de TinyImage, au-dessus de la liste des images exportables.

Charger uniquement les calques sélectionnés à l’ouverture de TinyImage ​

Pour éviter d’analyser une page volumineuse au démarrage de TinyImage, mettez en surbrillance dans Figma le ou les calques exportables voulus avant d’ouvrir le plugin. TinyImage ne charge d’abord que les calques sélectionnés qui ont déjà des réglages d’export.

Changer la sélection Figma alors que TinyImage est déjà ouvert peut filtrer les calques déjà chargés, mais ne déclenche pas de nouvelle analyse ni de chargement de nouveaux calques en arrière-plan. Si la nouvelle sélection contient des calques hors de l’ensemble chargé au départ, TinyImage vous invite à cliquer sur Refresh All Exportable Layers. La page en cours est alors analysée à la recherche de calques exportables, y compris les calques et réglages d’export ajoutés depuis, en ignorant les calques placés dans des conteneurs masqués.

Si la sélection en cours ne correspond toujours à aucun calque exportable après cette actualisation, TinyImage garde visible la liste complète de la page pour que vous puissiez continuer à travailler. Changer de sélection ou de page rétablit le filtrage habituel selon la sélection.

Actualiser les réglages d’export selon la sélection ​

Si un ou plusieurs calques sélectionnés n’ont pas encore de réglages d’export, cliquez sur l’icône + à côté d’Export dans le panneau des propriétés de Figma et ajoutez les réglages nécessaires.

Une fois les nouveaux réglages d’export en place, cliquez sur l’icône Refresh de la barre d’outils de TinyImage. TinyImage analyse de nouveau la page en cours et affiche les options d’export mises à jour dans la liste des images exportables.

Exporter vos images compressées ​

Une fois les images exportables à compresser sélectionnées, cliquez sur Export dans la barre d’outils de TinyImage pour lancer la compression des images sélectionnées, une par une. Un indicateur de progression montre l’image en cours de compression, ainsi que le gain de poids obtenu à la fin de chaque compression. Attendez que toutes les images soient compressées ; plus vous avez d’images, et plus elles sont lourdes, plus cela prend de temps.

Vitesse de compression des PNG et PDF. La compression des exports PNG et PDF peut prendre plus de temps que celle des exports JPG et SVG, surtout s’ils sont très détaillés ou de grandes dimensions. TinyImage vous avertit si une image est trop grande pour être compressée.

Enregistrer le fichier zip exporté ​

Une fois toutes les images traitées, une notification confirme que vos images ont été compressées, et le téléchargement de votre fichier .zip se lance automatiquement.

Export d’une seule image. Si vous n’exportez qu’une seule image compressée, TinyImage ne la place pas dans un fichier .zip ; vous pouvez enregistrer le fichier image tel quel sur votre ordinateur.

Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).

Ouvrir le fichier zip exporté ​

Une fois le fichier .zip enregistré depuis Figma sur votre ordinateur, ouvrez votre explorateur de fichiers dans le dossier où il a été enregistré. Double-cliquez sur le fichier .zip exporté pour en extraire le contenu et utiliser toutes vos images compressées.