> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Descarga diseños de Flowstep como archivos de imagen JPG o PNG

> Flowstep es compatible con la exportación de diseños como JPG o PNG. Aprende qué formato se adapta a tu caso de uso y cómo descargar tus pantallas en pocos clics.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

Cuando estés listo para compartir o entregar un diseño, Flowstep te permite exportarlo como una imagen estática — ya sea JPG o PNG. Ambos formatos son ampliamente compatibles en herramientas de diseño, software de presentaciones y navegadores, por lo que puedes llevar tus diseños generados por IA donde sea que los necesites.

## Cómo exportar tu diseño

<Steps>
  <Step title="Abre tu diseño">
    Navega al diseño que quieras exportar dentro de Flowstep.
  </Step>

  <Step title="Abre el menú de exportación">
    Localiza la opción de exportación en la barra de herramientas o panel de diseño. Selecciónala para abrir la configuración de exportación.
  </Step>

  <Step title="Elige tu formato">
    Selecciona **JPG** o **PNG** dependiendo de tu caso de uso (consulta la comparación a continuación).
  </Step>

  <Step title="Descarga el archivo">
    Confirma tu selección y descarga la imagen exportada a tu dispositivo.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG vs PNG: ¿qué formato deberías usar?

|                        | JPG                                                                  | PNG                                                          |
| ---------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------ |
| **Ideal para**         | Compartir vistas previas, presentaciones, revisiones de stakeholders | Diseños con fondos transparentes, entregas de alta fidelidad |
| **Tamaño del archivo** | Más pequeño — más rápido para compartir por correo o mensajería      | Más grande — retiene todos los detalles de la imagen         |
| **Transparencia**      | No compatible                                                        | Compatible                                                   |
| **Calidad**            | Ligeramente comprimida                                               | Sin pérdida — sin reducción de calidad                       |

<Tip>
  Si estás pegando tu diseño en un conjunto de diapositivas o enviando una vista previa rápida a un cliente, JPG es generalmente la opción correcta. Si necesitas bordes nítidos o un fondo transparente — por ejemplo, para superponer el diseño en otra imagen — usa PNG.
</Tip>

## Exportar código

Más allá de imágenes, el botón **Code** exporta una pantalla como código React + Tailwind — copia un fragmento, o descarga el paquete completo como ZIP. Los paquetes son autónomos: las imágenes utilizadas en el diseño (incluidas las que adjuntaste en el panel de chat) se incluyen en una carpeta `public/assets/` con el código haciendo referencia a ellas por ruta local, por lo que la exportación funciona tal cual.

Los archivos descargados — imágenes y paquetes de código por igual — se nombran según la pantalla a la que pertenecen (recurriendo al nombre del archivo si la pantalla no tiene nombre), lo que mantiene las exportaciones fáciles de identificar cuando estás trabajando con muchas pantallas.

<Note>
  Si necesitas llevar tu diseño a un flujo de trabajo de edición vectorial, cópialo directamente en Figma en su lugar. Ver [Copia diseños de Flowstep en Figma instantáneamente](/es/figma-integration).
</Note>