> ## 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.

# Lataa Flowstepin suunnittelut JPG- tai PNG-kuvatiedostoina

> Flowstep tukee suunnittelujen vientiä JPG- tai PNG-muodossa. Tutustu siihen, mikä muoto sopii käyttötarkoituksellesi, ja opi lataamaan näyttöjä muutamalla napsautuksella.

<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>

Kun olet valmis jakamaan tai siirtämään suunnittelua, Flowstep antaa sinun viedä sen staattisena kuvana — joko JPG- tai PNG-muodossa. Molemmat muodot ovat laajalti tuettuja suunnittelutyökaluissa, esityssovelluksissa ja selaimissa, joten voit käyttää tekoäly-luomasi suunnitteluja minne tahansa tarvitset.

## Kuinka viedä suunnittelusi

<Steps>
  <Step title="Avaa suunnittelusi">
    Siirry haluamaasi suunnitteluun Flowstepissa.
  </Step>

  <Step title="Avaa vientivalikko">
    Paikanna vientivaihtoehto työkalupalkkissa tai suunnittelupaneelissa. Valitse se vientiasetuksien avaamiseksi.
  </Step>

  <Step title="Valitse muoto">
    Valitse **JPG** tai **PNG** käyttötarkoituksestasi riippuen (katso vertailua alla).
  </Step>

  <Step title="Lataa tiedosto">
    Vahvista valintasi ja lataa viety kuva laitteeseesi.
  </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 vai PNG: mitä muotoa sinun tulee käyttää?

|                     | JPG                                                     | PNG                                                             |
| ------------------- | ------------------------------------------------------- | --------------------------------------------------------------- |
| **Parhaiten sopii** | Esikatselujen jakaminen, esitykset, sidosryhmien arviot | Suunnittelut läpinäkyvällä taustalla, tarkkuusvetoinen luovutus |
| **Tiedoston koko**  | Pienempi — helpompi jakaa sähköpostilla tai viestillä   | Suurempi — säilyttää täyden kuvan tarkkuuden                    |
| **Läpinäkyvyys**    | Ei tuettu                                               | Tuettu                                                          |
| **Laatu**           | Hieman pakattu                                          | Häviötön — ei laadun vähenemistä                                |

<Tip>
  Jos liität suunnittelusi kalvosarjaan tai lähetät nopean esikatselun asiakkaalle, JPG on yleensä oikea valinta. Jos tarvitset terävät reunat tai läpinäkyvän taustan — esimerkiksi asettaaksesi suunnittelun toisen kuvan päälle — käytä PNG-muotoa.
</Tip>

## Viennin koodi

Kuvien lisäksi **Code**-painike vie näytön React + Tailwind -koodina — kopioi koodikatkelmia tai lataa koko paketti ZIP-tiedostoksi. Paketit ovat itsenäisiä: suunnittelussa käytetyt kuvat (mukaan lukien ne, jotka liitit chat-paneelissa) sisältyvät `public/assets/`-kansioon, ja koodi viittaa niihin paikallisen polun avulla, joten vienti toimii sellaisenaan.

Ladatut tiedostot — sekä kuvat että koodipaketit — nimetään sen näytön mukaan, johon ne kuuluvat (käyttäen tiedoston nimeä, jos näyttö on nimetön). Näin viennit on helppo tunnistaa, kun työskentelet useiden näyttöjen kanssa.

<Note>
  Jos sinun on siirrettävä suunnittelusi vektorimuokkaustyöhön, kopioi se suoraan Figmaan sen sijaan. Katso [Kopioi Flowstepin suunnittelut Figmaan hetkessä](/fi/figma-integration).
</Note>