Flowstep ja Figma täydentävät toisiaan, eivät kilpaile keskenään. Flowstep auttaa sinua luomaan ja tutkimaan käyttöliittymäideoita nopeasti; Figmassa hiot ja yhteistyössä rakennat tuotantovalmiita töitä. Kun käytät molempia yhdessä, saat parhaat puolet kummastakin.
Näin kopioit Flowstep-suunnitelman Figmaan
1
Valitse yksi tai useampi näyttö Flowstepissä
Napsauta näyttöä valitaksesi sen, tai valitse useita näyttöjä kopioidaksesi ne kerralla. Varmista, että valinta on korostettu piirtoalustalla.
2
Kopioi valinta
Paina Macissa **Cmd+**⇧+C tai Windowsissa **Ctrl+**⇧+C. Flowstep näyttää kopioinnin aikana viestin “Preparing your design. Stay on the current tab.” (Valmistelen suunnitelmaa. Pysy nykyisessä välilehdessä.) Kopiointi valmistuu hetkessä.
3
Liitä Figma-tiedostoosi
Siirry Figmaan ja avaa tiedosto, johon haluat sijoittaa suunnitelman. Liitä painamalla Macissa Cmd+V tai Windowsissa Ctrl+V. Flowstep-näytöt ilmestyvät Figma-piirtoalustallesi valmiina muokattaviksi.
Kopiointi Figmaan käyttää selaimesi leikepöytää, joten selaimen on sallittava Flowstepin leikepöydän käyttö. Jos näet käyttöoikeusvirheen, salli leikepöydän käyttö selaimen asetuksissa ja yritä uudelleen. Välilehden vaihtaminen kopioinnin aikana keskeyttää siirron; pidä Flowstep-välilehti aktiivisena, kunnes kopiointi on valmis.
Tuo suunnitelma Figmasta
Voit myös tehdä päinvastoin ja tuoda Figma-kehyksen Flowsteppiin muokattavina näyttöinä. Tuonti on kaikkien käytettävissä: yhdistä Figma-tilisi kerran ja tuo sitten kehys kehyksen linkillä.1
Yhdistä Figma
Yhdistä Figma-tilisi Flowsteppiin asetuksistasi. Flowstep käyttää Figman valtuutusta lukeakseen tiedostot, joihin sinulla on käyttöoikeus.
2
Kopioi kehyksen linkki Figmassa
Napsauta Figmassa haluamaasi kehystä hiiren oikealla painikkeella ja valitse Copy link to selection (Kopioi valinnan linkki). Voit myös kopioida linkin koko sivulle, jolloin kaikki sivun ylimmän tason kehykset tuodaan kerralla.
3
Tuo Flowsteppiin
Käytä Flowstepin työkalupalkin Figma-tuontivaihtoehtoa ja liitä linkki. Flowstep muuntaa kehyksen muokattaviksi elementeiksi piirtoalustallesi. Jokainen tuonti lisää uuden näytön. Saman kehyksen uudelleen tuominen ei korvaa aiempaa tuontia, joten poista vanha näyttö, jos et enää tarvitse sitä.
Mitä tuodaan
Flowstep luo Figma-kehyksen uudelleen natiiveiksi, muokattaviksi elementeiksi, ei litteäksi kuvaksi. Tuonti siirtää mukanaan:- Kehykset ja niiden sisäkkäiset tasot
- Teksti, mukaan lukien merkkikohtainen tyylittely, kuten paksuus, väri ja lihavointi
- Värit Figma-muuttujistasi
- Kuvatäytöt sekä SVG-kuvakkeet ja muodot
- Pudotus- ja sisävarjot sekä taso- ja taustahämärrykset
- Katkoviivat ja pistekatkoviivat reunaviivat
Tiedoston organisaatiossa on oltava Figma yhdistettynä. Jos kehystä ei tuoda, Flowstep näyttää toimintakelpoisen viestin, joka kertoo, mitä seuraavaksi tehdä. Esimerkiksi voit yhdistää Figman uudelleen, jos valtuutuksesi on vanhentunut, odottaa ja yrittää uudelleen, jos Figma rajoittaa pyyntöjä tai vastaa hitaasti, tai, jos kyseessä on Community-malli, monistaa sen ensin tiimillesi ja liittää uuden linkin.