Recadrer et redimensionner des images par lots, en plusieurs tailles

Recadrez et redimensionnez des images par lots avec des préréglages, des tailles personnalisées, des points focaux intelligents et des options d’export.

Tutoriel vidéo : recadrer et redimensionner des images

Cette vidéo montre comment recadrer et redimensionner des images par lots depuis Figma avec le plugin HyperCrop.

Lorsque vous changez de page Figma, HyperCrop charge les tailles de recadrage et les réglages d’export enregistrés pour cette page. Une page sans tailles de recadrage enregistrées démarre avec les préréglages par défaut.

HyperCrop inclut des dizaines de préréglages de tailles qui vous permettent de recadrer et d’exporter facilement vos images par lots pour les plateformes et appareils courants, sans avoir à rechercher et saisir vous-même les dimensions de chacun.

Vous pouvez ajouter (et retirer) n’importe laquelle de ces tailles en faisant défiler la liste et en cliquant sur la case à cocher à côté de chaque élément. Cocher une taille l’ajoute à votre liste de tailles sélectionnées, et la décocher la retire.

Vous pouvez choisir parmi des dizaines de préréglages dans les catégories suivantes :

  • Facebook
  • Google Ads
  • Instagram
  • LinkedIn
  • Papier
  • Téléphones
  • Pinterest
  • Écrans
  • Snapchat
  • Tablettes
  • Twitch
  • Twitter (X)
  • YouTube.

Ajouter des préréglages de tailles de recadrage personnalisées ​

Vous pouvez ajouter (et retirer) n’importe laquelle de ces tailles en faisant défiler la liste et en cliquant sur la case à cocher à côté de chaque élément. Cocher une taille l’ajoute à votre liste de tailles, et la décocher la retire.

Utiliser une largeur ou une hauteur « Auto » ​

Si vous voulez indiquer soit une largeur, soit une hauteur, et laisser HyperCrop calculer automatiquement l’autre dimension, remplissez le champ Crop Width ou Crop Height et laissez l’autre vide. Le texte indicatif du champ vide devient alors Auto pour le signaler. Une fois la largeur ou la hauteur fixe définie, cliquez sur le bouton Add Custom Crop Size + pour l’ajouter à vos tailles de recadrage personnalisées disponibles.

Supprimer un préréglage de recadrage personnalisé ​

Pour retirer un préréglage personnalisé de votre liste de recadrages disponibles, cliquez sur l’icône Trash à côté d’une taille de recadrage personnalisée, puis cliquez sur Delete pour confirmer. Elle est alors retirée de votre liste de tailles sélectionnées et entièrement supprimée de la liste des recadrages disponibles.

Sélectionner les images à recadrer par lots ​

Toutes les images disponibles pour le recadrage par lots apparaissent dans la partie droite du plugin HyperCrop. En cliquant sur la case à cocher à côté d’une image de la liste, vous indiquez à HyperCrop s’il doit l’inclure dans le recadrage par lots ou l’en exclure.

Le nombre d’images sélectionnées est multiplié par le nombre de tailles d’image sélectionnées, ce qui donne le nombre total d’images qu’HyperCrop exportera.

Les images doivent avoir des réglages d’export pour apparaître dans HyperCrop. Pour que vos images ou calques Figma s’affichent dans le plugin HyperCrop, vérifiez que vous avez ajouté au moins un réglage d’export au calque à recadrer, en cliquant sur l’icône + dans la colonne de droite de Figma, sous l’intitulé Export.

Sélection et désélection rapides. Pour désélectionner (ou resélectionner) toutes les images d’un coup, cliquez sur la case à cocher tout en haut de la liste, à côté du libellé X of XX Images Selected.

Définir les points focaux du recadrage ​

Par défaut, HyperCrop recadre et redimensionne les images par lots avec un ancrage Center/Center : le point focal est alors toujours le centre exact de l’image.

Il arrive que vous vouliez placer le point focal dans une autre partie de l’image, par exemple Top/Left ou Center/Right.

Pour cela, placez votre souris sur l’image dont vous voulez modifier le point focal, cliquez sur les listes déroulantes verticale (↕) et horizontale (↔), puis choisissez l’option voulue pour chacune.

Activer les fonctionnalités de recadrage intelligent ​

Si vous ne voulez pas définir un point focal à la main avec les listes déroulantes verticale (↕) et horizontale (↔), vous pouvez utiliser les interrupteurs Content Aware et Detect Faces.

Vous pouvez activer l’une de ces fonctionnalités (ou les deux) en plaçant votre souris sur l’image concernée et en cliquant sur l’interrupteur de chacune pour l’activer (ou la désactiver).

Content Aware ​

L’option Content Aware demande à HyperCrop d’utiliser des modèles de recadrage intelligent pour repérer les zones importantes ou intéressantes de votre image. Si votre image n’a pas une série de tailles délicate pour le recadrage des visages, il n’est pas nécessaire d’activer ce réglage, car le recadrage de vos images prend plus de temps lorsqu’il est activé.

Detect Faces ​

L’option Detect Faces demande à HyperCrop d’utiliser des modèles de reconnaissance faciale pour repérer le ou les visages dans votre image. Si votre image ne contient aucun visage ou n’a pas une série de tailles délicate pour le recadrage des visages, il n’est pas nécessaire d’activer ce réglage, car le recadrage de vos images prend plus de temps lorsqu’il est activé.

Compatibilité des navigateurs. En raison de problèmes de compatibilité, la fonctionnalité Detect Faces d’HyperCrop n’est pas prise en charge dans Safari. Lancez plutôt le plugin dans un autre navigateur (comme Chrome) ou dans l’application de bureau Figma.

Configurer les réglages d’export du recadrage par lots ​

Une fois vos tailles de recadrage et vos images sélectionnées, et les réglages de recadrage de chaque image configurés à votre goût, vous pouvez préparer le recadrage et l’export par lots de vos images.

Pour ouvrir le panneau des réglages, cliquez sur le bouton Batch Crop dans l’en-tête d’HyperCrop.

Dans le panneau des réglages du recadrage par lots, vous pouvez choisir notamment Image Format (JPG ou PNG), Image Compression (pour définir la qualité ou le poids de l’image) et Image Fill (qui ne s’applique qu’aux recadrages non intelligents).

Ajouter un format de nom de fichier personnalisé ​

Pour les recadrages par lots, HyperCrop vous permet de définir un format de nom de fichier personnalisé appliqué à toutes vos images exportées. C’est très pratique pour adopter une convention de nommage cohérente ou regrouper vos images dans une structure de sous-dossiers logique.

Ce champ est facultatif. Si vous le laissez vide, il prend par défaut la valeur #{collection}/#{name}_#{width}x#{height}.

Variables disponibles pour vos noms de fichiers ​

Vous pouvez combiner librement n’importe laquelle des variables ci-dessous dans votre modèle personnalisé de sous-dossiers et de noms de fichiers, avec du texte et des caractères ordinaires (comme des tirets bas, des lettres ou des chiffres).

  • #{name} Le nom du calque Figma (par exemple « My Figma Layer Name »)
  • #{collection} Le nom de la collection de préréglages de tailles (par exemple « facebook »)
  • #{label} Le libellé de la collection de préréglages de tailles (par exemple « profile »)
  • #{width} La largeur de l’image redimensionnée (par exemple « 1024 »)
  • #{height} La hauteur de l’image redimensionnée (par exemple « 768 »)

Créer des sous-dossiers. Pour créer un sous-dossier, ajoutez un « / » n’importe où dans votre format de nom de fichier personnalisé. Par exemple, #{collection}-crops/#{width}x#{height}/#{name} crée une structure de dossiers dynamique comme facebook-crops/1024x768/my_figma_layer_name.jpg (les variables sont remplacées pour chaque collection et chaque combinaison largeur/hauteur).

Télécharger les images recadrées par lots sur votre ordinateur ​

Une fois toutes les options et votre format de nom de fichier configurés comme vous le souhaitez, cliquez sur le bouton Crop & Download Images pour lancer le recadrage et le redimensionnement par lots d’« HyperCrop ».

Notez que cette opération traite toutes les tailles sélectionnées pour chacune des images sélectionnées : plus vous avez d’images et de tailles, plus elle prend de temps.

Une fois le recadrage par lots terminé, un écran de confirmation vous indique que vos images sont prêtes à être téléchargées. Pour télécharger le fichier .zip depuis Figma sur votre ordinateur, cliquez sur le bouton Download your .zip file dans le plugin HyperCrop.

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é ​

Après avoir téléchargé le fichier .zip 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 décompresser les images dans un dossier qui contient toutes les images et tous les sous-dossiers (selon le modèle de sous-dossiers et de noms de fichiers défini dans les réglages d’export d’HyperCrop).

Insérer les images recadrées par lots dans votre fichier Figma ​

Une fois toutes les options et votre format de nom de fichier configurés comme vous le souhaitez, vous pouvez aussi insérer vos images recadrées directement dans Figma en cliquant sur le bouton Crop & Insert to Figma. Une toute nouvelle page est alors créée dans votre fichier Figma actuel, et tous les calques d’images recadrées y sont insérés.