A Flowstep és a Figma egymást kiegészítő eszközök, nem versenytársak. A Flowstep gyorsan segít generálni és feltárni UI-tervezési ötleteket; a Figmában finomíthatod, együtt dolgozhatsz rajta, és elkészítheted a gyártásra kész munkát. Ha mindkettőt együtt használod, mindkettő előnyeit kihasználhatod.
Flowstep-terv másolása a Figmába
1
Válassz ki egy vagy több képernyőt a Flowstepben
Kattints egy képernyőre a kijelöléshez — vagy jelölj ki többet, hogy egyszerre másold őket. Ellenőrizd, hogy a kijelölés kiemelve látszik a vásznon.
2
Másold ki a kijelölést
Nyomd meg a **Cmd+**⇧+C billentyűkombinációt Mac gépen, vagy a **Ctrl+**⇧+C billentyűkombinációt Windowson. A Flowstep ilyenkor ezt jeleníti meg: “Preparing your design. Stay on the current tab.” (Magyarul: „A terv előkészítése folyamatban. Maradj az aktuális lapon.”) A másolás pillanatok alatt befejeződik.
3
Illeszd be a Figma-fájlba
Válts a Figmára, és nyisd meg azt a fájlt, ahová a tervet szeretnéd tenni. A beillesztéshez nyomd meg a Cmd+V billentyűkombinációt Mac gépen, vagy a Ctrl+V billentyűkombinációt Windowson. A Flowstep-képernyők megjelennek a Figma-vásznon, szerkesztésre készen.
A másolás a böngésző vágólapját használja, ezért a böngészőnek engedélyeznie kell a Flowstep vágólap-hozzáférését. Ha engedélyezési hibát látsz, engedélyezd a vágólap-hozzáférést a böngésző beállításaiban, majd próbáld újra. Ha a másolás közben váltasz lapot, az átvitel megszakad, ezért a másolás befejezéséig tartsd fókuszban a Flowstep lapot.
Terv importálása a Figmából
Az ellenkező irányban is működik: egy Figma-keretet szerkeszthető képernyőkként behozhatsz a Flowstepbe. Az importálás mindenki számára elérhető. Csatlakoztasd a Figma-fiókodat egyszer, majd importálj egy keret-hivatkozásból.1
Csatlakozz a Figmához
Csatlakoztasd a Figma-fiókodat a Flowstephez a beállításaidban. A Flowstep a Figma engedélyezési rendszerét használja, hogy olvassa azokat a fájlokat, amelyekhez hozzáférésed van.
2
Másolj keret-hivatkozást a Figmában
A Figmában kattints jobb gombbal a kívánt keretre, és válaszd a Copy link to selection lehetőséget. Egy teljes oldal hivatkozását is másolhatod, így az oldal összes felső szintű keretét egyszerre importálhatod.
3
Importálás a Flowstepbe
Használd a Figma-importálási lehetőséget a Flowstep eszköztárában, és illeszd be a hivatkozást. A Flowstep a keretet szerkeszthető elemekké alakítja a vásznon. Minden importálás új képernyőt hoz létre. Ugyanannak a keretnek az újbóli importálása nem cseréli le a korábbit, ezért ha már nincs rá szükséged, töröld a régi képernyőt.
Mi kerül importálásra
A Flowstep a Figma-keretet natív, szerkeszthető elemekként hozza létre, nem lapos képként. Az importálás a következőket viszi át:- Keretek és azok beágyazott rétegei
- Szöveg, beleértve a karakterenkénti formázást, például a vastagságot, a színt és a félkövér stílust
- Színek a Figma-változóidból
- Képkitöltések, valamint SVG-ikonok és alakzatok
- Leesési és belső árnyékok, valamint réteg- és háttérhomályosítás
- Szaggatott és pontozott vonalak
A fájl szervezetének csatlakoztatnia kell a Figmát. Ha egy keret nem importálható, a Flowstep olyan üzenetet jelenít meg, amely megmondja, mit tegyél. Például csatlakoztasd újra a Figmát, ha a hitelesítésed lejárt. Várj és próbáld újra, ha a Figma korlátozza a kéréseket vagy lassan válaszol. Közösségi sablon esetén pedig duplikáld a sablont a csapatodnak, és illeszd be az új hivatkozást.