Formatos y configuraciones de exportación

Figma Design admite una variedad de formatos y configuraciones de exportación. Usa este artículo para determinar qué formato se adapta mejor a tus necesidades. Cuando lo tengas todo listo para exportar tus diseños, consulta Exportar desde Figma para obtener instrucciones sobre cómo aplicar estas configuraciones.

Formatos de exportación

PNG (Portable Network Graphics)

PNG es un formato de gráficos de trama que admite la transparencia, el contraste de color y la compresión sin pérdida de información. Este tipo de compresión mantiene la calidad de la imagen original y la legibilidad del texto al exportar. Ten en cuenta que la exportación en formato PNG genera archivos de mayor tamaño que si se opta por el formato JPG.

Los archivos PNG son idóneos para imágenes con transparencia y gráficos que contienen tanto imágenes como texto, como pueden ser logotipos, diagramas o ilustraciones.

El formato PNG se puede utilizar con las siguientes opciones de exportación:

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

JPG (Joint Photographic Group)

JPG (o JPEG) es un formato de archivos de imagen con compresión con pérdida. Este tipo de compresión reduce el tamaño del archivo eliminando datos de forma permanente. Como resultado, se obtienen archivos de menor tamaño y se reduce la calidad de la imagen.

En la mayoría de los casos, el formato JPG ofrece una calidad suficiente para trabajar en entornos web y, al reducir el tamaño de los archivos, disminuye el tiempo de carga. Los archivos JPG también se pueden utilizar en fotografía y diseño de impresión.

Ten en cuenta que los archivos JPG no admiten la transparencia y que la compresión puede afectar a la legibilidad del texto. Si tu imagen incluye texto o transparencia, mejor expórtala como PNG o SVG.

El formato JPG se puede utilizar con las siguientes opciones de exportación:

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

SVG (Scalable Vector Graphics)

SVG es un formato de gráfico vectorial basado en XML. Corresponde a formas basadas en valores numéricos y coordenadas que se pueden representar en cualquier pantalla. Los SVG no se construyen con píxeles y, por tanto, se pueden escalar a cualquier tamaño sin que esto afecte a la calidad de la imagen. También son compatibles con la transparencia.

Los archivos SVG se pueden representar con scripts o código, por lo que son una opción muy popular en el diseño digital. Utilízalos en los logotipos, iconos o ilustraciones que desees incluir en diseños flexibles.

El formato SVG se puede utilizar con las siguientes opciones de exportación:

• Ignorar capas superpuestas
• Incluir cuadro delimitador (solo para capas de texto)
• Incluir atributo «id»
• Texto de esquema
• Simplificar trazo

PDF (Portable Document Format)

Los archivos PDF permiten compartir diseños complejos e interactivos. Incluyen texto, fuentes, gráficos vectoriales e imágenes en un diseño fijo. Con ellos puedes representar y manipular elementos individuales de los diseños en cualquier sistema, por lo que constituyen un formato muy versátil que es independiente del software, el hardware o el sistema operativo.

Además, el formato PDF es una herramienta muy valiosa para crear aplicaciones iOS, porque es compatible con Xcode, el lenguaje de desarrollo móvil de Apple. En Figma, puedes utilizar archivos PDF para exportar presentaciones de diapositivas, compartir activos de desarrollo en iOS o imprimir prototipos de diseños. Figma exporta el contenido a archivos PDF 1.7.

Figma exporta el texto en forma de glifos, lo que significa que no se puede editar el texto del archivo PDF final. No obstante, sí se permite seleccionar y copiar el texto si se visualiza el archivo PDF en el navegador o en otro software compatible.

Configuración de exportación

La configuración de exportación permite controlar en mayor medida el modo en que Figma exporta los diseños.

Escala

Puedes elegir entre las opciones de escala que se muestran por defecto o introducir un tamaño personalizado en el campo. Para personalizar el tamaño, introduce un número y complétalo con una de las siguientes opciones:

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

Si necesitas exportar contenido para pantallas de alta definición (como las de alta densidad de píxeles), plantéate hacerlo a mayor escala para ampliar la resolución de los activos.

Los activos que se exportan como imágenes desde Figma tienen 72 PPP por defecto. Si necesitas calcular este valor para una imagen exportada a escala, multiplica 72 por la escala seleccionada. Por ejemplo, las imágenes exportadas a una escala de 2x tienen 144 PPP. las exportadas a una escala de 3x tienen 216 PPP y así sucesivamente.

Se deben respetar ciertas restricciones de formato en el escalado de contenido:

• Figma solo permite exportar contenido a archivos SVG a escala 1x. No obstante, puedes escalar estos archivos ajustando los valores en el código o aplicando variables de anchura y altura. Por ejemplo: <img src="image.svg" width="50px">.
• Figma solo permite exportar contenido a archivos PDF a escala 1x. Si quieres utilizar otra escala, deberás elegir un formato diferente.

Sufijo

Este ajuste es opcional. Todo lo que escribas en el campo Sufijo se añadirá al nombre del archivo cuando se complete la exportación. Esta función te puede ayudar a organizar los activos exportados sin necesidad de modificar los nombres de las capas. Por ejemplo, si vas a exportar un marco etiquetado como «PáginaInicio» a un archivo PNG y escribes «borrador» en este campo, el nombre del archivo exportado será «PáginaInicioborrador.png».

Configuración de exportación específica del formato

Algunos formatos admiten opciones de exportación adicionales. Haz clic en la sección Exportar del panel de propiedades para ver y ajustar estas opciones.

En esta tabla se indican las opciones disponibles para los distintos formatos:

Formato	Ignorar capas superpuestas	Incluir cuadro de límite	Incluir atributo «id»	Texto de esquema	Simplificar trazo
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

Perfil de color

Al exportar activos, Figma usa por defecto el perfil de color de sus correspondientes archivos. Por ejemplo, si un archivo está configurado como Display P3, los activos se exportarán con este mismo perfil.

No obstante, puedes elegir un perfil de color distinto al exportar si lo prefieres:

1. Haz clic en Configuración de exportación.
2. Abre el menú desplegable de perfiles de color y elige uno.
   • Mismo que archivo (perfil de color)
   • sRGB
   • Display P3

Más información sobre la gestión del color y sus perfiles →

Calidad de imagen

Si vas a exportar como JPG (JPEG) o PDF, tienes la opción de seleccionar la calidad y el tamaño de la imagen. Por defecto, los JPG se exportan con calidad alta, mientras que los PDF se exportan con calidad media. Esta configuración se puede cambiar haciendo clic en la sección Exportar de la barra lateral derecha.

Ignorar capas superpuestas

Esta opción está activada por defecto. Cuando lo está, Figma solo incluye en la exportación las capas seleccionadas. Cualquier otro objeto que interseque con el objeto seleccionado o se superponga a él no afectará a la exportación. Cuando esta opción está desactivada, Figma incluye todas las capas que intersecan con la capa o el grupo seleccionado.

Incluir cuadro delimitador

Disponible solo para capas de texto. Cuando esta opción está activada, Figma determina el tamaño de la exportación con el cuadro delimitador de la capa de texto. Si este cuadro es más grande que el texto, Figma incluirá el espacio vacío en la exportación. Si es menor, Figma recortará y descartará las partes del texto que queden fuera del cuadro delimitador.

Cuando está opción está desactivada, Figma se basa en las dimensiones del texto propiamente dicho para determinar el tamaño de la exportación. Figma recortará y descartará cualquier espacio existente entre los caracteres y el cuadro delimitador.

Incluir atributo «id»

Cuando esta opción está activada, Figma añade una etiqueta «id» a los metadatos del archivo SVG. Esto permite a JavaScript acceder fácilmente al elemento <svg> y también puede utilizarse para apuntar a un selector de ID específico en una hoja de estilo. Figma basa la etiqueta «id» en el nombre que tiene el objeto en el panel de capas.

Texto de esquema

Esta opción se activa por defecto cuando se selecciona al menos una capa de texto. Figma convierte todas las capas de texto en glifos para mantener su aspecto. Si esta opción está activada, no podrás editar el texto tras la exportación. Asegúrate de desactivarla si deseas seguir editándolo.

Simplificar trazo

Esta opción se activa por defecto cuando el objeto seleccionado es una red vectorial (no una forma básica) e incluye un trazo interior o exterior. Figma permite aplicar trazos interiores, centrales o exteriores a los objetos. El formato SVG solo admite los trazos centrales. Con esta opción se garantiza la correcta representación de los trazos interiores y exteriores en otros sistemas.