Figma design file-ból Flutter kód

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
Egy egyszerű Figma designt készítettem

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
DhiWise – Figma to Code plugin futtatása

Válasszuk a Design to Code lehetőséget.

A megfelelő opció kiválasztása

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
Paraméterek beállítása

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
Figma account összekapcsolása

A generálás eltart pár percig, de meglepően gyorsan végez.

A sikeres generálás vége
Sikeres kód generálás

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
A generált könyvtárak

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
A projekt kód finomhangolása

A Configure gombra kattintva érhetőek el a komponensek, stílusok, betűtípusok, színek beállításai. Nagyon részletes!

Beállítások

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
Kód letöltése

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.