Recortar y redimensionar imágenes por lotes a varios tamaños

Recorta y redimensiona imágenes por lotes con ajustes predefinidos, tamaños personalizados, puntos focales inteligentes y opciones de exportación.

Tutorial en vídeo: recortar y redimensionar imágenes

Este vídeo muestra cómo recortar y redimensionar imágenes por lotes desde Figma con el plugin HyperCrop.

Al cambiar de página en Figma se cargan los tamaños de recorte y los ajustes de exportación guardados para esa página. Una página sin tamaños de recorte guardados empieza con los ajustes predefinidos de serie.

HyperCrop incluye decenas de ajustes predefinidos de tamaño para que puedas recortar y exportar por lotes tus imágenes para las plataformas y los dispositivos más populares sin tener que buscar e introducir a mano las dimensiones de cada uno.

Puedes añadir (y quitar) cualquiera de estos tamaños desplazándote por la lista y haciendo clic en la casilla de cada elemento. Al marcar un tamaño, se añade a tu lista de tamaños seleccionados, y al desmarcarlo, se quita.

Puedes elegir entre decenas de ajustes predefinidos de estas categorías:

  • Facebook
  • Google Ads
  • Instagram
  • LinkedIn
  • Papel
  • Teléfonos
  • Pinterest
  • Pantallas
  • Snapchat
  • Tablets
  • Twitch
  • Twitter (X)
  • YouTube.

Añadir ajustes predefinidos de tamaños de recorte personalizados ​

Puedes añadir (y quitar) cualquiera de estos tamaños desplazándote por la lista y haciendo clic en la casilla de cada elemento. Al marcar un tamaño, se añade a tu lista de tamaños, y al desmarcarlo, se quita.

Usar un ancho o un alto "Auto" ​

Si quieres indicar solo el ancho o el alto y que HyperCrop calcule automáticamente la otra dimensión, rellena el campo Crop Width o el campo Crop Height y deja el otro vacío. El texto de ejemplo del campo vacío cambiará a Auto para indicarlo. Cuando el ancho o el alto fijo te parezca bien, haz clic en el botón Add Custom Crop Size + para añadirlo a tus tamaños de recorte personalizados disponibles.

Eliminar un ajuste predefinido de recorte personalizado ​

Para quitar un ajuste predefinido personalizado de tu lista de recortes disponibles, haz clic en el icono Trash junto al tamaño de recorte personalizado y, después, en Delete para confirmarlo. Se quitará de tu lista de tamaños seleccionados y se eliminará por completo de la lista de recortes disponibles.

Seleccionar imágenes para el recorte por lotes ​

Todas las imágenes disponibles para el recorte por lotes aparecen en la parte derecha del plugin HyperCrop. Haciendo clic en la casilla de cualquier imagen de la lista, le indicas a HyperCrop si debe incluirla o excluirla del proceso de recorte por lotes.

El número de imágenes que selecciones se multiplica por el número de tamaños de imagen que elijas, y el resultado es el total de imágenes que exportará HyperCrop.

Las imágenes necesitan ajustes de exportación para aparecer en HyperCrop. Para que tus imágenes o capas de Figma aparezcan en el plugin HyperCrop, asegúrate de haber añadido al menos un ajuste de exportación a la capa que quieres recortar haciendo clic en el icono + de la columna derecha de Figma, bajo el encabezado Export.

Seleccionar o deseleccionar rápidamente. Para deseleccionar (o volver a seleccionar) todas las imágenes a la vez, haz clic en la casilla de la parte superior de la lista, junto a la etiqueta X of XX Images Selected.

Indicar los puntos focales del recorte ​

De forma predeterminada, HyperCrop recorta y redimensiona las imágenes del lote con el anclaje Center/Center; es decir, el punto focal de la imagen siempre será su centro exacto.

A veces querrás cambiarlo para que el punto focal esté en otra parte de la imagen, por ejemplo Top/Left o Center/Right.

Para hacerlo, pasa el ratón por encima de la imagen cuyo punto focal quieres cambiar, haz clic en los desplegables vertical (↕) y horizontal (↔) y elige la opción que quieras en cada uno.

Activar las funciones de recorte inteligente ​

Si no quieres indicar a mano un punto focal con los desplegables vertical (↕) y horizontal (↔), puedes usar los interruptores Content Aware y Detect Faces.

Puedes activar cualquiera de estas funciones (o las dos) pasando el ratón por encima de la imagen en la que quieres activarlas (o desactivarlas) y haciendo clic en el interruptor de cada una.

Content Aware ​

Al activar la opción Content Aware, HyperCrop usa modelos de recorte inteligente para determinar dónde están las partes focales importantes o interesantes de tu imagen. Si tu imagen no tiene un conjunto de tamaños complicado en el que recortar caras, no hace falta activar este ajuste, ya que el recorte de las imágenes tardará más con él activado.

Detect Faces ​

Al activar la opción Detect Faces, HyperCrop usa modelos de reconocimiento facial para determinar dónde están las caras de tu imagen. Si tu imagen no contiene caras o no tiene un conjunto de tamaños complicado en el que recortar caras, no hace falta activar este ajuste, ya que el recorte de las imágenes tardará más con él activado.

Compatibilidad con navegadores. Por problemas de compatibilidad con los navegadores, la función Detect Faces de HyperCrop no es compatible con Safari. Ejecuta el plugin en otro navegador (como Chrome) o en la app de escritorio de Figma.

Configurar los ajustes de exportación del recorte por lotes ​

Cuando hayas seleccionado los tamaños de recorte y las imágenes, y estés conforme con los ajustes de recorte de cada una, ya puedes preparar el recorte y la exportación por lotes de tus imágenes.

Para abrir el panel de ajustes, haz clic en el botón Batch Crop de la cabecera de HyperCrop.

En el panel de ajustes del recorte por lotes puedes elegir opciones como Image Format (JPG o PNG), Image Compression (para indicar la calidad o el tamaño de la imagen) e Image Fill (que solo se aplica a los recortes no inteligentes).

Añadir un formato de nombre de archivo personalizado ​

En los recortes por lotes, HyperCrop te permite indicar un formato de nombre de archivo personalizado que se aplicará a todas las imágenes exportadas. Es muy útil para seguir una convención de nombres coherente o agrupar las imágenes en estructuras de subcarpetas lógicas.

Este campo es opcional; si lo dejas vacío, se usará el valor predeterminado #{collection}/#{name}_#{width}x#{height}.

Variables disponibles para los nombres de archivo ​

Puedes combinar como quieras cualquiera de las variables siguientes en tu patrón personalizado de subcarpetas y nombres de archivo, junto con texto y caracteres normales (como guiones bajos, letras o números).

  • #{name} El nombre de la capa de Figma (por ejemplo, "My Figma Layer Name")
  • #{collection} El nombre de la colección del ajuste predefinido de tamaño (por ejemplo, "facebook")
  • #{label} La etiqueta de la colección del ajuste predefinido de tamaño (por ejemplo, "profile")
  • #{width} El ancho de la imagen redimensionada (por ejemplo, "1024")
  • #{height} El alto de la imagen redimensionada (por ejemplo, "768")

Crear subcarpetas. Para crear una subcarpeta, añade una "/" en cualquier parte de tu formato de nombre de archivo personalizado. Por ejemplo, #{collection}-crops/#{width}x#{height}/#{name} crearía una estructura de carpetas dinámica como facebook-crops/1024x768/my_figma_layer_name.jpg (donde las variables se sustituyen para cada colección y cada combinación de ancho y alto).

Descargar las imágenes del recorte por lotes a tu ordenador ​

Cuando hayas configurado todas las opciones y el formato del nombre de archivo a tu gusto, haz clic en el botón Crop & Download Images para iniciar el proceso de recorte y redimensionado por lotes de "HyperCrop".

Ten en cuenta que se procesarán todos los tamaños seleccionados para cada imagen seleccionada, así que cuantas más imágenes y tamaños tengas, más tardará.

Cuando termine el recorte por lotes, verás una pantalla de confirmación que te indica que tus imágenes están listas para descargar. Para descargar el archivo .zip de Figma a tu ordenador, haz clic en el botón Download your .zip file del plugin HyperCrop.

Guardar archivos descargados desde Figma Si usas la aplicación de escritorio de Figma, verás un aviso para descargar el archivo. En cambio, si usas Figma en un navegador web, el archivo se descargará automáticamente en tu ordenador (normalmente en la carpeta Descargas).

Abrir el archivo .zip exportado ​

Cuando hayas descargado el archivo .zip de Figma a tu ordenador, abre el explorador de archivos en la carpeta donde se guardó. Al hacer doble clic en el archivo .zip exportado, las imágenes se descomprimirán en una carpeta con todas las imágenes y subcarpetas (según el patrón de subcarpetas y nombres de archivo que indicaste en los ajustes de exportación de HyperCrop).

Insertar las imágenes del recorte por lotes en tu archivo de Figma actual ​

Otra opción, cuando hayas configurado todas las opciones y el formato del nombre de archivo a tu gusto, es insertar las imágenes recortadas directamente en Figma haciendo clic en el botón Crop & Insert to Figma. Se creará una página nueva en tu archivo de Figma actual y se insertarán en ella todas las capas de imágenes recortadas.