Hogyan exportáljunk kódot a Figmában

Eszközhivatkozások

• Android
• iPhone
• Mac
• ablakok
• Hiányzik az eszköz?

A Figma egyik legjobb tulajdonsága, hogy lehetővé teszi a vele készített tervek gyors kódba átvitelét. Ha Ön alkalmazásfejlesztő vagy tervezőkkel dolgozik, ez egy értékes készség, amelyet el kell sajátítania. A beépített eszközök és számos bővítmény segítségével a Figma lehetővé teszi, hogy a terveit különféle platformokra exportálja.

Ha többet szeretne megtudni a Figma-terv kódmá alakításáról, akkor jó helyen jár. Ebben a cikkben megvitatjuk, hogyan exportálhat kódot a Figmában, és milyen eszközöket kell használnia.

Kód exportálása a Figma alkalmazásban Windows PC-n

Ha Ön Windows-felhasználó, és kódot szeretne exportálni a Figmába, örömmel fogja tudni, hogy számos lehetőséget használhat.

Figma Inspect

Az egyik módszer, amellyel kódot exportálhat a Figmában, a Figma Inspect. Ez a funkció lehetővé teszi, hogy könnyedén konvertálja a terveket Android, iOS vagy webes kódokká. Mivel be van építve, nem kell bővítményt vagy harmadik féltől származó alkalmazást telepítenie.

Így kell használni:

1. Válassza ki az Önt érdeklő elemeket, és lépjen a Vizsgálat lapra.
2. A Kód részben válassza ki az exportálni kívánt kódot (CSS for Web, Swift iOS vagy XML Android).

Az eszköz a választott opciótól függően generálja a kódot, majd exportálhatja. Bár ez egy nagyszerű eszköz, van néhány korlátja. Ugyanis az SVG-t nem lehet HTML-be exportálni. Ehhez egy plugint kell használnia.

Figma beépülő modulok

A Figma több száz hasznos beépülő modult tartalmaz. Megemlítünk néhányat, amelyek segítségével exportálhatja tervét HTML-be.

Figma HTML-be

A csatlakoztat lehetővé teszi, hogy a tervezést HTML vagy CSS formátumba konvertálja, az Ön igényeitől függően. Kövesse az alábbi lépéseket a bővítmény telepítéséhez és a kód exportálásához:

1. Nyissa meg a főmenüt a bal felső sarokban található ikon megnyomásával.
   
2. Nyomja meg a Plugins gombot.
   
3. Nyomja meg a Tallózás a bővítmények között a közösségben gombot.
   
4. Írja be a Figma szót HTML-be, és válassza ki a Plugins elemet felül.
   
5. Nyomja meg a Telepítés gombot.
   
6. Menjen vissza a tervezéshez, és válassza ki a kívánt elemeket.
7. Lépjen vissza a főmenübe, válassza a Plugins, majd a Figma to HTML lehetőséget.
   
8. Válassza a HTML vagy a CSS lehetőséget.
   
9. Igényeitől függően nyomja meg a Másolás vagy a Letöltés gombot.
   

Anima a Figma számára

Egy másik hasznos bővítmény az Anima for Figma. Ezzel a beépülő modullal átalakíthatja tervét HTML, CSS, React és Vue formátumba. A bővítmény használatához kövesse az alábbi lépéseket:

1. Nyissa meg a főmenüt a bal felső ikon kiválasztásával.
   
2. Nyomja meg a Plugins gombot.
   
3. Válassza a Tallózás a beépülő modulok között a közösségben lehetőséget.
   
4. Írja be az Anima-t a Figma számára.
   
5. Nyomja meg a Telepítés gombot.
   
6. Válassza ki az exportálni kívánt elemeket.
7. Nyissa meg a főmenüt, nyomja meg a Plugins gombot, és válassza az Anima for Figma lehetőséget. Regisztráljon, ha nincs fiókja.
   
8. Válassza ki a kód típusát, és nyomja meg a Kód exportálása gombot.
   

Hogyan exportálhat kódot a Figmában Mac-en

A terv exportálása kódba Mac-eszközön többféleképpen is elvégezhető.

Figma Inspect

Ezzel a beépített eszközzel ellenőrizheti és exportálhatja a terveihez tartozó kódot és egyéb értékeket. A Figma Inspect segítségével három kódopció közül választhat: Android, iOS vagy Web (csak CSS).

Kövesse az alábbi lépéseket a Figma Inspect használatához Mac számítógépen:

1. Válassza ki az exportálni kívánt elemeket.
2. Nyissa meg az Ellenőrzés lapot a jobb oldalon.
3. Válasszon a CSS, iOS vagy Android közül.
4. Másolja ki a kódot.

Ha csak a CSS, iOS és Android érdekli, ez egy kiváló eszköz. Ha azonban a tervet HTML formátumba szeretné exportálni, akkor más módszert kell használnia.

Figma beépülő modulok

Ha terveit HTML formátumba szeretné konvertálni, a Figma tucatnyi bővítményt kínál, amelyek ezt a célt szolgálják. A telepítési folyamat egyszerű. Felsorolunk néhányat a legnépszerűbbek közül.

Figma HTML-be

Ez csatlakoztat lehetővé teszi a tervezés CSS vagy HTML formátumba való konvertálását. A telepítés módja:

1. A főmenü megnyitásához válassza a bal felső ikont.
   
2. Nyomja meg a Plugins gombot.
   
3. Válassza a Tallózás a beépülő modulok között a közösségben lehetőséget.
   
4. Írja be a Figma to HTML szót a keresősávba, és válassza ki a Plugins elemet felül.
   
5. Nyomja meg a Telepítés gombot.
   
6. Térjen vissza a tervhez, és válassza ki az exportálni kívánt elemeket.
7. Nyissa meg a főmenüt, válassza a Plugins, majd a Figma to HTML lehetőséget.
   
8. Válassza a HTML vagy CSS lehetőséget.
   
9. Nyomja meg a Másolás vagy a Letöltés gombot.
   

Figma a kódhoz

Ezzel csatlakoztat , átalakíthatja Figma-tervét HTML-, Tailwind-, Flutter- vagy Swift-kezelőfelületre. Kövesse az alábbi lépéseket a telepítéshez és használatához:

1. Nyomja meg a bal felső ikont a főmenü eléréséhez.
   
2. Válassza a Plugins lehetőséget.
   
3. Nyomja meg a Tallózás a bővítmények között a közösségben gombot.
   
4. Írja be a Figma to Code kifejezést a keresősávba, és válassza felül a Plugins lehetőséget a releváns találatok megjelenítéséhez.
   
5. Nyomja meg a Telepítés gombot.
   
6. Menjen a tervezéshez, és válassza ki a kívánt elemeket.
7. Nyissa meg ismét a főmenüt, válassza a Plugins, majd a Figma to Code lehetőséget.
   
8. Válassza ki a kívánt kódot.
9. Nyomja meg a Másolás vágólapra gombot.

Exportálhatok kódot a Figmába az iPhone-on?

Az új Figma iPhone alkalmazás csak béta verzióban volt elérhető berepülés az első 10 000 iPhone-ra, de a cég szerint a teljes bevezetés hamarosan megérkezik. Az alkalmazás lehetővé teszi, hogy böngésszen és hozzáférjen a tervekhez, és nyomon kövesse az élő változásokat iPhone-ján, miközben szerkeszti a tervet a számítógépen.

Abban az időben nem lehetséges a tervek szerkesztése az iPhone alkalmazáson keresztül, ami azt jelenti, hogy nincs mód a kód exportálására azon keresztül.

A Figma is kínálja a Figma tükör alkalmazást az App Store-ban. Ez az alkalmazás lehetővé teszi, hogy a terveket bármilyen iOS-eszközön tükrözze anélkül, hogy ugyanahhoz a hálózathoz csatlakozna. Így ellenőrizheti, hogyan néz ki a design egy adott eszközön (jelen esetben iPhone-on), és nyomon követheti a változásokat. Bár hasznos, az alkalmazás nem teszi lehetővé a kód exportálását az iPhone-on. Ehhez meg kell ragadnia a számítógépét.

A terveket a böngészőn keresztül is elérheti. Azonban továbbra is csak a tervet tekintheti meg, és követheti az élő változásokat.

Exportálhatok kódot a Figmába iPaden?

Sajnos nem lehet kódot exportálni a Figmába, ha iPadet használ. A Figma a mobilalkalmazáson dolgozik, és van béta verziója is, de táblagépekre nem volt elérhető, csak iPhone-ra és Androidra.

A Figma Mirror alkalmazás elérhető iPaden. Az alkalmazás lehetővé teszi, hogy a számítógépen nyomon kövesse a tervezésben végrehajtott módosításokat, és ellenőrizze, hogyan néznek ki az iPad képernyőjén. Sajnos az alkalmazáson belüli kódexportálási lehetőség nem érhető el.

Ha nem szeretné telepíteni az alkalmazást, elérheti a Figmát a böngészőn keresztül, és nyomon követheti a terv változásait. De a kód exportálása a Figmába csak számítógépen lehetséges.

Exportálhatok kódot a Figmába Androidon?

A Figma jelenleg az Android alkalmazáson dolgozik, és 10 000 Android telefonhoz kínál béta verziót. Tesztelővé válhat, ha letölti az alkalmazást a A Play Áruház és ehhez hozzáférni link . Böngészhet, megtekintheti és megoszthatja terveit, és nyomon követheti a változásokat az alkalmazáson belül akkor is, ha nincs a számítógép közelében.

Bár az alkalmazás számos célra hasznos, egyelőre nem teszi lehetővé a kód exportálását.

A Figma tükör alkalmazás Androidra is elérhető. Fő célja, hogy nyomon kövesse a számítógépen a terveken végrehajtott módosításokat, és biztosítsa, hogy minden Android-eszközön jól nézzenek ki. A kód exportálása nem elérhető.

A Figmát a böngészőben is használhatja, ha nem akarja telepíteni az alkalmazást. A kódot azonban továbbra sem tudja exportálni. Ehhez a számítógépet kell használnia.

képek átvitele androidról pc-re

További GYIK

Hogyan exportálhatok színeket a Figmából az Xcode-ba?

Sajnos nem lehet színeket exportálni a Figmából az Xcode-ba, mivel a Figma nem támogatja. De van egy kerülő megoldás, amelyet használhat Figma Export . Használatához kövesse az alábbi lépéseket:

1. Ha még nem tette meg, telepítse Figma Export .

2. Nyissa meg a Terminal.app alkalmazást.

3. Nyissa meg a figma-export fájlt tartalmazó mappát.

4. Indítsa el a figma-exportot.

5. Exportálja a színeket a ./figma-export colours -i figma-export.yaml használatával.

Hogyan exportálhatok HTML kódot a Figmából?

Amint azt korábban említettük, a Figma Inspect nevű beépített eszköz lehetővé teszi a CSS-t, de nem a HTML-t. Ha szüksége van a HTML-kódra, telepítenie kell egy bővítményt.

A Figma több tucat beépülő modult tartalmaz, amelyek ezt a célt szolgálják. Javaslatunk az Figma HTML-be . Így kell használni:

1. Nyissa meg a főmenüt. Ez a bal felső ikon.

2. Nyomja meg a Plugins gombot.

3. Válassza a Browse Plugins in Community lehetőséget.

4. Írja be a Figma to HTML szót a keresősávba, és győződjön meg róla, hogy a Plugins ki van jelölve felül.

5. Válassza a Telepítés lehetőséget.

6. Térjen vissza a tervezéshez, és válassza ki a HTML-be konvertálni kívánt elemeket.

7. Lépjen a főmenübe, válassza a Plugins menüpontot, és nyissa meg a Figma to HTML alkalmazást.

8. Nyomja meg a HTML gombot.

9. Válasszon a Másolás vagy a Letöltés közül.

Szerezze meg a szükséges kódot

A Figma lehetővé teszi különböző típusú kódok exportálását többféle módszerrel. Igényeitől függően használhat beépített eszközöket, vagy tölthet le különböző bővítményeket. A kódexportálás egyelőre csak számítógépen keresztül lehetséges. A Figma kiadta a mobilalkalmazás béta verzióját (10 000 iPhone vagy Android készülékre korlátozva), de ez a lehetőség nem rendelkezik. Szerencsére a kód exportálása számítógépen gyors és egyszerű.

Hogyan exportálhat kódot a Figmába? Használja a cikkben említett módszerek valamelyikét? Mondja el nekünk az alábbi megjegyzések részben.