Ajustes de exportación de Figma: formatos y entrega

Los ajustes de exportación de Figma funcionan mejor cuando defines primero el destino: recurso, formato, dimensiones y nombre del archivo. Después revisa lo exportado donde se utilizará. Una ficha de entrega permite separar las ilustraciones de la interfaz funcional. Exportar una pantalla completa sirve para revisarla, pero no entrega controles operativos.

Vamos a preparar un paquete de recursos para un catálogo ficticio de cursos: una portada, una marca pequeña y una imagen de revisión. Las dimensiones y comprobaciones son ejemplos propuestos, no valores predeterminados de Figma ni resultados medidos de un producto.

Define el contrato de entrega

Anota qué necesita la persona que recibe los archivos antes de abrir Export. La entrega propuesta contiene una portada visible a 320 × 180 píxeles CSS, una marca escalable y una imagen estática para aprobación editorial. Asigna una fila, un responsable y un destino a cada elemento. Así una captura cómoda no acaba intentando cubrir tres necesidades distintas.

Para la portada, especifica el encuadre y si debe conservar un fondo transparente. Para la marca, indica el menor tamaño de uso y si las letras pueden convertirse en trazados. Para la imagen de revisión, identifica el idioma y el estado aprobado de la pantalla. Son decisiones del equipo que conviene acordar con quien utilizará el resultado.

Facilita encontrar el objeto original. Incluye la página y el nombre de la capa, además de una explicación breve de lo que has excluido deliberadamente. La persona destinataria debería poder pedir una portada corregida sin recorrer pantallas ajenas. Conserva la versión aceptada junto a la ficha para disponer de una referencia en la siguiente entrega.

Si el objeto tiene límites incorrectos, resuelve esa tarea con la guía de límites y recorte de frames. Aquí nos centramos en configurar y comprobar el archivo después de identificar el objeto que realmente debe salir del documento.

Elige el formato según el destino

La guía de formatos de imagen de MDN distingue gráficos vectoriales, imágenes ráster sin pérdida y compresión fotográfica. SVG encaja con ilustraciones sencillas que deben escalar; PNG conserva transparencia y reproducción precisa; JPEG es un candidato para fotografía cuando resulta aceptable perder información. La propuesta usa SVG para la marca y PNG para la revisión.

Para la portada, compara dos candidatos en el tamaño real antes de acordar el formato. Observa los bordes finos, las letras pequeñas incrustadas y las transiciones de la imagen. Guarda el peso y los defectos visibles en vez de declarar una extensión ganadora universal. Si la web convierte después el recurso, registra esa decisión de publicación en la entrega.

No elijas PDF solo porque un compañero puede abrirlo. En este ejemplo, reserva la salida documental para una persona que la necesite expresamente. Acuerda el orden de páginas y la forma de revisión. Abre después el documento entregado y compruébalo; pulsar Exportar no demuestra que el archivo cumpla el uso acordado.

Consulta la referencia de formatos y ajustes de Figma al configurar la salida. Documenta multiplicadores, restricciones de ancho o alto y perfiles de color disponibles. Recomendamos anotar el perfil elegido y probarlo en el destino, especialmente si alguien informa de una diferencia de color perceptible.

Separa píxeles y tamaño visible

Para la portada de 320 × 180, proponemos un candidato ráster de 640 × 360 para una entrega a doble densidad. Son píxeles del archivo; el espacio previsto en la interfaz continúa midiendo 320 × 180 píxeles CSS. Duplicar ambas dimensiones genera cuatro veces más píxeles, pero no implica multiplicar exactamente por cuatro el peso.

Interpreta «2x» como una relación con las dimensiones originales. Si otra persona cambia el objeto a 400 × 225, ese multiplicador producirá un resultado distinto. Un ancho fijo puede expresar mejor el requisito si el destinatario pide 640 píxeles. Comprueba las dimensiones del archivo obtenido en vez de confiar en una etiqueta recordada.

La guía de imágenes adaptables de MDN explica cómo los candidatos y las indicaciones de tamaño ayudan al navegador a elegir. En nuestro ejemplo de densidad, la implementación podría ofrecer versiones de 320 y 640 para el mismo espacio visible. Acuérdalo con desarrollo: una segunda exportación solo aporta valor si la página puede utilizarla correctamente.

Prueba la portada tanto en la cuadrícula del catálogo como en el detalle del curso. Revisa si el recorte elimina un elemento importante, si el fondo repetido distrae y si la versión pequeña se entiende. Cuando cada destino necesite una composición diferente, solicita encuadres específicos en vez de ampliar el mismo archivo esperando que se solucione.

Añade un caso de rechazo a la ficha: «La portada mide 640 × 360, pero se muestra a ese tamaño en lugar de los 320 × 180 acordados». La diferencia queda así comprobable. Conserva las dimensiones del espacio y las de salida para que otra persona pueda identificar cuál de las dos ha cambiado.

Decide qué conservar del texto SVG

Para la marca, decide si el destinatario necesita formas fijas o texto editable. La referencia ExportSettings de Figma documenta la elección de contornear texto SVG: las letras pueden convertirse en trazados o mantenerse como elementos de texto. Recomendamos acompañar el archivo con una muestra aprobada que permita revisar la geometría exportada.

Si conservas texto SVG, prueba el archivo en el entorno previsto con sus fuentes disponibles. La referencia del elemento text de SVG en MDN explica su representación y que no ajusta las líneas automáticamente de forma predeterminada. No confundas letras editables con una comprobación del título traducido o de las fuentes de la página.

Para el catálogo, recomendamos que el título cambiante del curso sea texto de interfaz independiente de la marca. La marca permanece como gráfico estable, mientras el título cambia por curso e idioma. Esto reduce los archivos que necesitan revisión editorial y permite asignar con claridad quién mantiene las palabras.

Inspecciona el menor tamaño previsto, además de la vista ampliada. Comprueba huecos interiores, trazos finos, espaciado y relación entre símbolo y letras. Si algo no coincide, anota si cambió la geometría exportada o si el destino dibuja de otra manera el texto recibido. Esa observación orienta mejor que decir simplemente que el SVG está roto.

Para preparar el original, continúa con el flujo práctico de diseño de logos en Figma. La ficha de recursos debe señalar la versión aceptada, sin convertir esta entrega en un nuevo proyecto completo de identidad visual.

Prepara un lote que se pueda revisar

Selecciona las capas previstas y añade una configuración con el control de suma de Export. Las instrucciones de exportación estática de Figma también explican la previsualización de una selección y la revisión del lote en File → Export. Utiliza esa lista para comprobar los elementos antes de guardar la entrega.

Adopta una convención que comunique función y densidad: course-cover@1x.png, course-cover@2x.png y brand-mark.svg. Añade el idioma cuando el contenido gráfico cambie realmente. Un sufijo debe expresar una diferencia útil; duplicar una imagen idéntica para cada idioma solo añade archivos que después habrá que revisar.

Prepara una ficha con nombre, capa original, dimensiones, perfil, idioma y destino. Escribe «vector» cuando las dimensiones ráster no sean el criterio de aceptación y añade la prueba de visualización. Describe el cambio concreto de versión, como «encuadre de portada desplazado hacia arriba», para que el destinatario sepa qué comparar.

Antes de sustituir la entrega aprobada, guarda el lote nuevo en una carpeta de revisión y contrasta su contenido con la ficha. Busca archivos ausentes, nombres repetidos y una imagen antigua conservada por error. Es una recomendación de organización del equipo, no una garantía de que Figma gestione automáticamente las versiones entregadas.

Esta ficha compacta propone tres salidas concretas. Los nombres de página son ejemplos del equipo; sustitúyelos por los objetos reales del archivo. Para esta entrega, el responsable ha acordado sRGB en los archivos ráster. La aceptación visual de la marca se mantiene separada de esos requisitos de píxeles.

Asigna una persona para contrastar la ficha con la carpeta y otra para colocar los archivos en la pantalla receptora. Si falta una salida, corrige el paquete antes de pedir aprobación visual. Si existe pero se muestra mal, describe por separado ese problema de implementación. Las dos observaciones deben quedar en el mismo registro de entrega.

Separa las imágenes de EmviUI de los controles

La tarjeta real de EmviUI que aparece debajo permite observar esa separación: reúne portada, etiquetas, texto, avatares y una acción. La web de EmviUI ofrece un kit de interfaz y sistema de diseño editables en Figma. Utiliza la muestra para decidir qué elementos necesitan archivos gráficos y cuáles necesitan implementación.

En el catálogo propuesto, la ilustración de portada sería candidata a exportarse. Mantén título, categorías y acción como contenido de interfaz. La captura es una muestra de diseño EmviUI con textos genéricos; la cantidad que contiene no representa una afirmación de precio actual. Tampoco demuestra una página funcional ni una configuración de recursos aprobada.

Pide a desarrollo que concrete el espacio de imagen y el comportamiento de la acción cercana. Exportar la tarjeta completa puede servir para una diapositiva interna, mientras la tarjeta pública necesita texto y controles reales. Identifica la imagen de revisión para que no se confunda con el entregable de implementación.

El árbol de decisión de WAI sobre texto alternativo relaciona la alternativa con la función de la imagen en su contexto. Acuerda qué comunica esta portada y si el texto cercano ya transmite la misma información. Guarda esa decisión con las notas de implementación, en vez de copiar el nombre del archivo al atributo alternativo.

Para el paso general del diseño a la aplicación, consulta el flujo de Figma a Tailwind. EmviUI ayuda a establecer una muestra coherente; las imágenes exportadas no aportan por sí mismas lógica de aplicación, comportamiento adaptable ni pruebas de accesibilidad.

Acepta los archivos en su destino

Termina con una revisión que otra persona pueda repetir. Abre cada archivo, confirma sus dimensiones o su comportamiento vectorial y colócalo en el destino previsto. Compara la portada sobre el fondo real, la marca en su tamaño mínimo y la imagen de revisión con el idioma y el estado aprobados.

Utiliza la referencia del elemento de imagen de MDN para concretar dimensiones y alternativa textual en la implementación. La ficha propuesta registra el espacio visible, el archivo cargado y la decisión descriptiva. Si hay diferencias, identifica primero si proceden de exportación, selección de imagen o distribución, antes de modificar varios ajustes simultáneamente.

Envía una corrección concreta: «La portada de 640 tiene el encuadre correcto, pero la página carga la versión antigua de 320». Adjunta nombre y destino observado. Tras corregirlo, repite el mismo caso y actualiza la ficha. La exportación termina cuando el destinatario puede utilizar el recurso previsto y comprobar qué representa.