Comprimir las exportaciones de imágenes de Figma

Cómo seleccionar los ajustes de exportación y comprimir las exportaciones de imágenes de Figma con TinyImage.

TinyImage detecta los ajustes y formatos de exportación que has definido en las capas de tu página de Figma y te permite exportarlas como imágenes comprimidas con el plugin TinyImage.

Los análisis automáticos de la página omiten las capas que están dentro de contenedores ocultos. Las capas que seleccionas explícitamente en Figma se siguen comprobando según su propia visibilidad y sus ajustes de exportación. No tienes que cambiar tus ajustes de exportación guardados.

Para ver una guía completa sobre los ajustes de exportación de Figma y cómo funcionan, consulta la guía oficial de exportaciones en Figma en la ayuda de Figma.

Las capas que quieras comprimir necesitan al menos un ajuste de exportación. Si una capa no tiene ningún ajuste de exportación, TinyImage no sabrá que quieres comprimirla y exportarla, y no aparecerá en la lista de imágenes exportables del plugin.

Añadir y actualizar los ajustes de exportación ​

Para empezar a exportar imágenes comprimidas desde Figma, primero tienes que asegurarte de que has definido ajustes de exportación de imagen en las capas que quieres comprimir.

Añadir ajustes de exportación a las capas de Figma ​

Para añadir ajustes de exportación a una o varias capas, selecciónalas en Figma y, en el panel de propiedades de Figma, haz clic en el icono + que hay junto a Export. Si haces clic en + varias veces, puedes añadir a esa capa tantos ajustes de exportación como quieras. Así puedes exportar una misma capa en varios formatos y tamaños a la vez (por ejemplo, SVG, JPG @1x, JPG @2x, PDF, etc.).

Actualizar las capas de Figma después de cambiar sus ajustes de exportación ​

Si ya has añadido ajustes de exportación a una capa, pero quieres añadir o quitar alguno con el plugin TinyImage abierto, hazlo como en el paso anterior. Cuando estés conforme con los nuevos ajustes de exportación de la capa, haz clic en el icono Refresh de la barra de herramientas de TinyImage para actualizar tus capas de Figma y mostrar las opciones de exportación actualizadas en la lista de imágenes exportables de TinyImage.

Definir el porcentaje de calidad de compresión o el peso objetivo ​

TinyImage te permite indicar el porcentaje de calidad de compresión, del 1 % al 100 %, o definir un peso máximo objetivo (en kilobytes) para tus exportaciones de imágenes. Un número más bajo genera archivos más ligeros, pero también imágenes de menor calidad. Un número más alto genera archivos más pesados, pero también imágenes de mayor calidad.

  • 0 %-50 %: calidad baja (72dpi para PDF)
  • 50 %-75 %: calidad buena (150dpi para PDF)
  • 75 %-100 %: calidad máxima (300dpi para PDF)

Ajustar el porcentaje de calidad de compresión ​

Puedes definir el nivel de calidad de todas tus exportaciones de imágenes, del 1 % al 100 %, con el control deslizante de compresión de la barra de herramientas de TinyImage. Haz clic (o mantén pulsado) y arrastra el control deslizante para indicar el nivel de calidad que quieres. Este ajuste se aplica a todas tus exportaciones de TinyImage.

Definir un peso máximo (kb) como objetivo de compresión ​

También puedes definir un límite de peso máximo objetivo (en kilobytes): activa el interruptor Size Target e introduce un valor en kilobytes en el campo de tamaño. Así TinyImage intentará que cada una de tus imágenes quede por debajo de ese peso máximo.

Ten en cuenta que esto suele ser más lento que usar el control deslizante de porcentaje de calidad, porque cada imagen se tiene que comprimir de forma progresiva hasta alcanzar el límite deseado.

¿Prefieres definir el peso máximo de TinyImage desde Figma en lugar de desde la interfaz? Puedes usar el sufijo de los ajustes de exportación de Figma en cualquier capa exportable. Añade un guion bajo seguido de un número terminado en kb (por ejemplo, _250kb) y TinyImage usará ese valor como peso máximo de esa capa. Ejemplos de sufijos válidos: _250kb, @2x_500kb, @1x_300kb

Los pesos objetivo no se aplican a las exportaciones PDF ni GIF. Ten en cuenta que la opción de compresión con peso objetivo no tiene efecto en las exportaciones PDF o GIF de TinyImage; solo se aplica a las imágenes JPG, PNG, SVG, AVIF y WebP.

Sustituir la calidad o el peso de compresión en cada exportación ​

Además de definir el nivel de calidad con el control deslizante, TinyImage te permite indicar niveles distintos de calidad o de peso para cada formato de imagen, que sustituyen el valor global definido con el control deslizante de calidad o con el campo de peso objetivo de la cabecera del plugin.

Para indicar la calidad de un formato de imagen concreto, haz clic en el campo numérico de calidad que hay junto a la imagen cuya calidad quieres cambiar. Puedes introducir cualquier número del 1 % al 100 %, y ese número pasará a ser el ajuste de calidad con el que se exporta la imagen.

Si trabajas con un peso máximo objetivo, puedes indicar un valor distinto haciendo clic en el campo numérico de KB que hay junto a la imagen cuyo peso objetivo quieres cambiar. Puedes introducir cualquier número entre 1 y 9999 (KB), y ese número pasará a ser el peso objetivo con el que se exporta la imagen.

Seleccionar las imágenes que quieres comprimir ​

Cuando hayas añadido ajustes de exportación a las capas que quieres comprimir, las verás en la lista de imágenes exportables de TinyImage. Pero no tienes por qué exportar a la vez todas las imágenes de tu página de Figma (si no quieres). TinyImage te permite seleccionar (y deseleccionar) con casillas las imágenes exportables que quieres comprimir.

Marcar y desmarcar imágenes exportables ​

Para seleccionar (o deseleccionar) una imagen para exportarla, haz clic en la casilla que hay junto a su miniatura en la lista de imágenes exportables de TinyImage. Si desmarcas una imagen, no se comprime ni se exporta; y, al revés, si la marcas, se incluye en la exportación.

Seleccionar o deseleccionar rápidamente todas las capas. Para seleccionar o deseleccionar de golpe todas las imágenes de la lista, haz clic en la casilla de la barra de herramientas de TinyImage, encima de la lista de imágenes exportables.

Cargar solo las capas seleccionadas al abrir TinyImage ​

Para evitar que TinyImage analice una página grande al arrancar, resalta en Figma las capas exportables que necesitas antes de abrir el plugin. TinyImage cargará al principio solo las capas seleccionadas que ya tengan ajustes de exportación.

Si cambias la selección de Figma con TinyImage ya abierto, se pueden filtrar las capas que ya están cargadas, pero no se lanza otro análisis ni se cargan capas nuevas en segundo plano. Si la nueva selección contiene capas que no estaban en el conjunto cargado al principio, TinyImage te pedirá que hagas clic en Refresh All Exportable Layers. Así se analiza la página actual en busca de capas exportables, incluidas las capas y los ajustes de exportación que hayas añadido, y se omiten las capas que están dentro de contenedores ocultos.

Si, después de esa actualización, la selección actual sigue sin tener ninguna coincidencia exportable, TinyImage mantiene visible la lista de toda la página para que puedas seguir trabajando. Al cambiar la selección o de página, se recupera el filtrado normal por selección.

Actualizar los ajustes de exportación de las imágenes seleccionadas ​

Si una o varias capas seleccionadas todavía no tienen ajustes de exportación, ve al panel de propiedades de Figma, haz clic en el icono + que hay junto a Export y añade los ajustes que necesites.

Cuando estés conforme con los nuevos ajustes de exportación, haz clic en el icono Refresh de la barra de herramientas de TinyImage. TinyImage volverá a analizar la página actual y mostrará las opciones de exportación actualizadas en la lista de imágenes exportables.

Exportar tus imágenes comprimidas ​

Cuando hayas seleccionado las imágenes exportables que quieres comprimir, haz clic en Export en la barra de herramientas de TinyImage para empezar a comprimir las imágenes seleccionadas una a una. Verás un indicador de progreso que muestra qué imagen se está comprimiendo en cada momento, junto con el ahorro de peso al terminar cada compresión. Espera a que terminen de comprimirse todas las imágenes; cuantas más imágenes tengas y más grandes sean, más tardarán.

Velocidad de compresión de PNG y PDF. Ten en cuenta que comprimir exportaciones PNG y PDF puede tardar más que las exportaciones JPG y SVG, sobre todo si son muy detalladas o tienen dimensiones grandes. TinyImage te avisará si una imagen es demasiado grande para comprimirla.

Guardar el archivo zip exportado ​

Cuando se hayan procesado todas las imágenes, verás una notificación de confirmación que te indica que se han comprimido, y se iniciará automáticamente la descarga de tu archivo .zip.

Exportaciones de una sola imagen Si solo exportas una imagen comprimida, TinyImage no la mete en un archivo .zip; podrás guardar ese archivo de imagen en tu ordenador tal cual.

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 guardado el archivo .zip desde Figma en tu ordenador, abre el explorador de archivos en la carpeta donde se guardó. Haz doble clic en el archivo .zip exportado para descomprimir su contenido y usar todas tus imágenes comprimidas.