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

# Siirrä suunnitelmia Flowstepin ja Figman välillä

> Kopioi mikä tahansa Flowstep-kehys Figmaan kopioi-liitä-toiminnolla, tai tuo Figman kehykset Flowstepiin muokattaviksi näytöiksi. Työskentele molemmissa työkaluissa ilman vaihtamista.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep on rakennettu sopimaan jo käyttämäsi suunnittelutyönkulkuun — ei korvaamaan sitä. Voit luoda suunnitelman Flowstepissa ja tuoda sen välittömästi Figmaan yksinkertaisella kopioi-liitä-toiminnolla, tai tehdä päinvastoin ja tuoda Figman kehyksen Flowstepiin. Tämä tarkoittaa, että saat tekoälyn avulla luodun suunnittelun nopeuden yhdistettynä Figman tarkkuus- ja yhteistyöominaisuuksiin.

<Note>
  Flowstep ja Figma ovat toisiaan täydentäviä työkaluja, eivät kilpailijoita. Flowstep auttaa sinua nopeasti luomaan ja tutkimaan käyttöliittymäsuunnittelun ideoita; Figma on paikka, jossa hioitset, yhteistyötä ja rakennat tuotantovalmiita töitä. Molempien käyttö yhdessä antaa sinulle parhaan molemmista.
</Note>

## Kuinka kopioida Flowstep-suunnitelma Figmaan

<Steps>
  <Step title="Valitse yksi tai useampi näyttö Flowstepissa">
    Napsauta näyttöä sen valitsemiseksi — tai valitse useita näyttöjä kopioaksesi ne kaikki kerralla. Varmista, että valinta on korostettu kanvaasllla.
  </Step>

  <Step title="Kopioi valinta">
    Paina \*\*Cmd+\*\*⇧+**C** Macissa tai \*\*Ctrl+\*\*⇧+**C** Windowsissa. Flowstep näyttää "Preparing your design — stay on this tab and keep the screen selected" -viestin työskennellessään; kopiointi valmistuu hetkessä.
  </Step>

  <Step title="Liitä Figma-tiedostoon">
    Siirry Figmaan ja avaa tiedosto, johon haluat sijoittaa suunnitelman. Paina **Cmd+V** Macissa tai **Ctrl+V** Windowsissa liittääksesi. Flowstep-näytöt ilmestyvät Figma-kanvaasillesi, valmiina muokattaviksi.
  </Step>
</Steps>

<Note>
  Figmaan kopiointi käyttää selaimen leikepöytää, joten selaimen on sallittava Flowstepin leikepöydän käyttöoikeus — jos näet käyttöoikeusvirheen, salli leikepöydän käyttöoikeus selaimen asetuksissa ja yritä uudelleen. Välilehden vaihtaminen kopioinnin aikana keskeyttää siirron; pidä Flowstep-välilehti aktiivisena, kunnes kopiointi valmistuu.
</Note>

<Tip>
  Liitä kehys omalle "AI imports" -sivulle Figmassa työtiedostojen järjestämiseksi. Sieltä voit siirtää elementtejä pääsuunnittelujärjestelmään tai komponenttikirjastoon omalla tahdillasi.
</Tip>

## Tuo suunnitelma Figmasta

Voit myös tehdä päinvastoin ja tuoda Figman kehyksen Flowstepiin muokattaviksi näytöiksi. Tuominen on käytettävissä kaikille — yhdistä Figma-tilisi kerran ja tuo sitten kehyslinkin avulla.

<Steps>
  <Step title="Yhdistä Figma">
    Yhdistä Figma-tilisi Flowstepiin asetuksistasi. Flowstep käyttää Figman valtuutusta lukemaan tiedostot, joihin sinulla on pääsy.
  </Step>

  <Step title="Kopioi kehyslinkkiä Figmassa">
    Figmassa napsauta kehystä hiiren kakkospainikkeella ja valitse **Copy link to selection**. Voit myös kopioida linkin koko sivulle tuodaksesi kaikki sen ylätason kehykset kerralla.
  </Step>

  <Step title="Tuo Flowstepiin">
    Käytä Flowstep-työkalupalkin Figma-tuontivaihtoehto ja liitä linkki. Flowstep muuntaa kehyksen muokattaviksi elementeiksi kanvaasillasi. Saman kehyksen uudelleen tuominen päivittää sen paikoillaan.
  </Step>
</Steps>

### Mitä tuodaan

Flowstep luo Figman kehyksen uudelleen alkuperäisinä, muokattavina elementteinä — ei tasaisena kuvana. Tuonti tuo mukaan:

* Kehykset ja niiden sisäkkäiset tasot
* Tekstin, mukaan lukien per-merkki-tyylit, kuten paino, väri ja lihavointi
* Värit Figman muuttujistasi
* Kuvan täytöt ja SVG-kuvakkeet ja muodot
* Pudotus- ja sisäiset varjot sekä taso- ja taustamuut
* Katkoviivat ja pisteviivat vedot

<Note>
  Organisaation on oltava Figma yhdistettynä. Jos kehys ei tuonnu, Flowstep näyttää toimintaa sisältävän viestin, joka kertoo seuraavaksi tehtävät — esimerkiksi yhdistä Figma uudelleen, jos valtuutuksesi on vanhentunut, odota ja yritä uudelleen, jos Figma on nopeutusrajoituksella tai hidas vastaamaan, tai duplikoi Community-malli tiimillesi ja liitä uuden linkin.
</Note>