Időről időre megjelennek próbálkozások, ami a híjján lévő programozókat igyekszik pótolni. A Low-Code/No-Code (LCNC) eszközök ékes tárába a DhiWise Figma Plugin is csatlakozott. Meglepően jó kódot generálva egy MVP applikációhoz.
Voltak eddig is ígéretek: Figma design kóddá alakítása
Korábban a UICode pluginról írtam, ami jó kezdeményezésnek indult, azonban beletört a fejlesztők bicskája. Az elmúlt 1 évben már nem folytatják ennek a fejlesztését. A cikkem írásakor beszéltem a csapattal, és nagy reményeket fűztek hozzá. Talán túl ambiciózust is.
Felelevenítve a korábbi cikkemből a minta Figma design kinézetét, erről van szó:
- 2 képernyő
- pár gomb, amivel oda-vissza lehet navigálni
![Figma designból Flutter kód](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/19B12B07-5A5F-42B9-98A8-73AB3AF68FDF-1024x792.jpg)
A DhiWise Figma plugin bemutatása
A GitHub repo itt leérhető: https://github.com/vborbely/figma-to-flutter
A Figma szerkesztőnket nyissuk meg, és a DhiWise Plugint adjuk hozzá.
Ezután már nincsen más dolgunk, mint lefuttatni a plugint a Run gombra kattintva.
![DhiWise - Figma to Code plugin futtatása](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/DF960200-1A97-4C23-8BE3-0F29D0F512AB.jpg)
Válasszuk a Design to Code lehetőséget.
![](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/FF2E3500-2ED5-4065-A5CF-AEEB1FED1592.jpg)
Ezután be kell állítanunk a megfelelő paramétereket:
- Flutter kódot szeretnénk
- az összes képernyőről (All Frames)
- a teljes kódot kérjük (Complete Code)
- adjuk meg a Figma design file URL-jét
- Generate code gombbal menjünk tovább
![Generálás előtti paraméterek beállítása](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/70DF4E7A-5FF0-496B-807A-5BFE15BF1F17-1024x938.jpg)
Elképzelhető, hogy a Figma accountunk nincsen összekapcsolva. Tegyük meg a Connect To DhiWise gombra kattintással. Ezután, ha zöldre vált, ismét a Generate Code-dal tudunk tovább menni.
![Figma account összekapcsolása](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/C019A17D-47E1-4735-9A93-684D0F474D4E.jpg)
A generálás eltart pár percig, de meglepően gyorsan végez.
![A sikeres generálás vége](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/0375E4D3-79A0-47FE-B129-D983C9C8CEF2.jpg)
Valóban jó Flutter kódot kapunk?
A generálás közben feltűnik, hogy elég sokmindent elvégez automatikusan nekünk:
- színek
- képek
- méretek exportálása
A végeredmény egy áttekinthető, Clean Architecture-re emlékeztető könyvtárszerkezet.
![Csinos könyvtárszerkezet](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/56435A7B-138E-41F0-B4FF-E9A4CEC26FB7-358x1024.jpg)
Elárulom, hogy egy népszerű state management-tel van megoldva, a GetX-szel. A fejlesztői oldala itt érhető el.
Navigáljunk vissza a főképernyőnkre, és ott válasszuk ki a friss projektünket. Itt már láthatjuk, hogy profi megoldással van dolgunk. Ezen a helyen van lehetőségünk finomhangolni a kódot. Elnevezni a képernyőket.
![A finomhangolás](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/138AFF13-312B-436E-B6DC-8467E61A0521-1024x363.jpg)
A Configure gombra kattintva érhetőek el a komponensek, stílusok, betűtípusok, színek beállításai. Nagyon részletes!
![](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/3352490E-843F-420E-B071-AE055080AF6C.jpg)
Ha mindezzel megvagyunk, akkor zárjuk be a beállításokat, és generáljuk le a kódot. Ezt a képernyő tetején, a közepén található Code view gombra kattintva tehetjük meg.
A jobb alsó sarokban a letöltés gombbal egy ZIP-ben megkapjuk a kódunkat. Ezt ezután betöltve a kedvenc IDE-nkbe, máris futtathatjuk a natív appunkat.
![Kód letöltése](https://www.uira-tervezve.hu/wp-content/uploads/2022/11/BB510033-EDA2-4E01-B511-B084134EC5E2.jpg)
A kódot átböngészve kellemes benyomást ad. Kellően szét vannak választva a UI, az üzleti logika (Business Logic) és az adatkötések (Binding). Erről részletesebben nem írok, mert ez egy fejlesztőnek lehet izgalmas 🙂
Az, hogy a kapott kód mire elegendő, mindenki döntse el saját maga. Én a magam részéről azt mondom, egy ingyenes megoldástól ilyen minőséget kapni, igazán “kifizetődő”.
Tipp: Kis adalék még, hogy az Adobe XD file-okat Figmába, onnan pedig kódra tudjuk váltani.
Ennél a megoldásnál már ténylegesen arról van szó, hogy ott folytathatja a programozó a munkáját, ahol a designer abbahagyta a Figmában.
Ha megtetszett a Flutter mobil fejlesztés, de nem tudod, hogy hogyan indulnál neki, vagy csak támogatásra van szükséged benne, akkor keress meg a kapcsolataim egyikén.
Borbély Viktor vagyok, több éves Projekt menedzsment tapasztalattal. Szabadúszóként Flutter és a Spring Boot vagy Firebase Backend alkalmazások tervezését és megvalósítását végzem.
Dolgoztam több vállalatnál, az autóiparon (Continental, Valeo), a távközlésen (Ericsson) át a mobil fejlesztésig (Combit zRt. – Grepton Csoport).
Amikor együtt gondolkozásra van szükség, mindig van egy ötletem, amivel előremozdítom a megoldást. Szívesen mentorálom a körülöttem lévőket.