Formatos y configuraciones de exportación

Figma design admite una variedad de formatos y configuraciones de exportación. Use este artículo para determinar cuál es el formato que mejor se adapta a sus necesidades. Cuando esté listo para exportar sus diseños, consulte Exportar desde Figma para obtener instrucciones sobre cómo aplicar estas configuraciones.

Formatos de exportación

PNG (Gráficos de Red Portátiles)

PNG es un formato de gráficos rasterizados que admite compresión sin pérdida, transparencia y contraste de color. La compresión sin pérdida mantiene la calidad original de la imagen y la legibilidad del texto al exportar. Tenga en cuenta que exportar como PNG dará como resultado un archivo mucho más grande que exportar como JPG.

Los PNG son ideales para imágenes que implican transparencia y gráficos que contienen tanto imágenes como texto, como los logotipos, las tablas o las ilustraciones.

Los siguientes ajustes de exportación están disponibles para PNG:

• Ignorar capas superpuestas
• Incluir cuadro delimitador (solo capas de texto)

JPG (Joint Photographic Group)

JPG (o JPEG) es un formato de archivo de imagen rasterizada con compresión con pérdida. La compresión con pérdida reduce el tamaño del archivo eliminando permanentemente datos del archivo. Esto resulta en archivos más pequeños, pero también en una calidad de imagen reducida.

En la mayoría de los casos, la calidad de JPG es adecuada para uso en la web y acortará el tiempo de carga debido a su tamaño reducido. Los JPG también pueden usarse para diseño de impresión y fotografía.

Tenga en cuenta que los JPG no admiten transparencia y la compresión puede afectar la legibilidad de cualquier texto. Si la imagen tiene texto o transparencia, exporte como PNG o SVG en su lugar.

Los siguientes ajustes de exportación están disponibles para JPG:

• Ignorar capas superpuestas
• Incluir cuadro delimitador (solo capas de texto)

SVG (Gráficos Vectoriales Escalables)

SVG es una gráfica vectorial basada en XML. Estas son formas basadas en valores numéricos y coordenadas que se pueden representar en cualquier pantalla. Como los SVG no dependen de píxeles, pueden escalarse a cualquier tamaño sin afectar la calidad de la imagen. También admiten transparencia.

Puede representar SVG en guiones o código, lo que los convierte en una opción popular para el diseño digital. Utilice SVG para logotipos, íconos o ilustraciones que planee incluir en diseños responsivos.

Los siguientes ajustes de exportación están disponibles para SVG:

• Ignorar capas superpuestas.
• Incluir cuadro delimitador (solo capas de texto).
• Incluir atributo “id”.
• Contornear texto.
• Simplificar trazo.

PDF (Formato de Documento Portátil)

Los PDF le permiten compartir diseños complejos e interactivos. Incluyen texto, fuentes, gráficos vectoriales e imágenes en un diseño fijo. Los PDF le permiten renderizar y manipular elementos individuales de un diseño, en cualquier sistema. Esto lo convierte en un formato versátil, ya que es independiente del software, hardware o sistema operativo.

Xcode, el lenguaje de desarrollo móvil de Apple, admite PDF. Esto lo convierte en una herramienta valiosa para construir aplicaciones de iOS. Use los PDF en Figma para exportar presentaciones o compartir recursos para el desarrollo de iOS. También puede utilizarlos para maquetas de diseño de impresión. Figma exporta contenido a archivos PDF 1.7.

Figma exporta texto como glifos, lo que significa que no podrá editar ningún texto en el PDF final. Aun así, puede seleccionar y copiar texto al ver el PDF en el navegador u otro software compatible.

Ajustes de exportación

Los ajustes de exportación le permiten controlar aún más cómo Figma exporta sus diseños.

Escala

Elija entre las opciones de escala predeterminadas o ingrese un tamaño personalizado en el campo. Para personalizar el tamaño, ingrese un número junto con uno de los siguientes:

• Agregue una x después del valor para usarlo como multiplicador.
• Agregue una w después del valor para establecer un ancho fijo.
• Agregue una h después del valor para establecer una altura fija.

Si está exportando contenido para pantallas de alta densidad (como retina displays), considere exportar a una escala mayor para aumentar la resolución del recurso.

Por defecto, los recursos exportados como imágenes desde Figma tienen una DPI de 72. Para calcular la DPI de una imagen exportada a escala, multiplique 72 por la escala elegida. Por ejemplo, las imágenes exportadas a 2x tienen una DPI de 144. Las imágenes exportadas a 3x tienen una DPI de 216.

Hay algunas restricciones de formato en torno a la escala:

• Figma solo admite exportaciones para SVG a 1x. Aun así, puede escalar un SVG ajustando los valores en el código, o utilizando variables de ancho y alto. Por ejemplo: <img src="image.svg" width="50px">.
• Figma solo admite exportaciones de PDF a 1x. Para exportar recursos a una escala diferente, necesitará elegir otro formato.

Sufijo

Este es un ajuste opcional. Todo lo que escriba en el campo de Sufijo se añadirá al nombre del archivo una vez exportado. Utilice esto para organizar los recursos exportados sin tener que modificar el nombre de la capa. Por ejemplo, si está exportando un marco etiquetado como “Página de inicio” como un PNG e ingresa "borrador" en este campo, el nombre del archivo exportado será “Página de inicioborrador.png”.

Ajustes de exportación específicos de formato

Algunos formatos admiten ajustes de exportación adicionales. Haga clic en la sección Exportar del panel de propiedades para ver y ajustar estos ajustes.

En esta tabla se indican los ajustes disponibles para cada formato:

Formato	Ignorar capas superpuestas	Incluir cuadro delimitador	Incluir atributo “id”	Contornear texto	Simplificar trazo
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

Perfil de color

Por defecto, Figma exporta recursos utilizando el perfil de color del archivo. Por ejemplo, si un archivo está configurado en Display P3, los recursos se exportarán como Display P3.

Sin embargo, puede elegir un perfil de color diferente al exportar:

1. Haga clic en Ajustes de exportación.
2. Abra el menú desplegable del perfil de color y elija un perfil de color.
   • Igual que el archivo (perfil de color)
   • sRGB
   • Display P3

Obtenga más información sobre perfiles de color y gestión de color →

Ignorar capas superpuestas

Este ajuste está habilitado de forma predeterminada. Cuando está habilitado, Figma solo incluye las capas seleccionadas en la exportación. Cualquier otro objeto que se cruce o se solape con el objeto seleccionado no afectará la exportación. Cuando está deshabilitado, Figma incluye cualquier capa que se cruce con la capa o grupo seleccionado.

Incluir cuadro delimitador

Disponible únicamente para capas de texto. Cuando está habilitado, Figma determina el tamaño de la exportación por el cuadro delimitador de la capa de texto. Si el cuadro delimitador es más grande que el texto, Figma incluirá el espacio vacío en la exportación. Si es más pequeño, Figma recortará y descartará las partes de texto que queden fuera del cuadro delimitador.

Cuando está deshabilitado, Figma determina el tamaño de la exportación en función de las dimensiones del propio texto. Figma recortará y descartará cualquier espacio entre los caracteres y el cuadro delimitador.

Incluir atributo "id"

Cuando está habilitado, Figma agrega una etiqueta "id" a los metadatos del SVG. Esto permite que JavaScript acceda fácilmente al elemento <svg> y también se puede utilizar para señalar un selector de id específico en una hoja de estilo. Figma basa el "id" en el nombre del objeto en el panel de Capas.

Contornear texto

Este ajuste está habilitado de forma predeterminada si al menos una capa de texto está seleccionada. Figma convierte cualquier capa de texto en glifos para mantener la apariencia. El texto no será editable después de la exportación si este ajuste está habilitado. Si necesita mantener la capacidad de edición, desactive este ajuste.

Simplificar trazo

Este ajuste está habilitado de forma predeterminada si el objeto seleccionado es una red vectorial (no una forma básica) e incluye un trazo interior o exterior. En Figma, puede aplicar trazos interiores, centrales o exteriores a un objeto. SVG solo admite trazos centrales. Este ajuste garantiza que otros sistemas rendericen los trazos interiores y exteriores correctamente.