Mga Link ng Device
Ang isa sa mga pinakamahusay na tampok ng Figma ay nagbibigay-daan sa iyo na mabilis na ilipat ang mga disenyo na ginawa mo kasama nito sa code. Kung isa kang developer ng app o nakikipagtulungan sa mga designer, ito ay isang mahalagang kasanayan upang matutunan. Sa tulong ng mga built-in na tool at maraming plugin, pinapayagan ka ng Figma na i-export ang iyong disenyo sa iba't ibang platform.
Kung gusto mong matuto nang higit pa tungkol sa pag-convert ng iyong disenyo ng Figma sa code, napunta ka sa tamang lugar. Sa artikulong ito, tatalakayin natin kung paano i-export ang code sa Figma at kung anong mga tool ang kailangan mong gamitin.
Paano I-export ang Code sa Figma sa isang Windows PC
Kung isa kang user ng Windows at gustong mag-export ng code sa Figma, ikalulugod mong malaman na makakagamit ka ng maraming opsyon.
Figma Inspect
Isa sa mga paraan na maaari mong gamitin upang i-export ang code sa Figma ay Figma Inspect. Binibigyang-daan ka ng feature na ito na madaling i-convert ang iyong mga disenyo sa Android, iOS, o Web code. Dahil ito ay built-in, hindi mo kailangang mag-install ng anumang mga plugin o third-party na app.
Narito kung paano ito gamitin:
- Piliin ang mga elemento kung saan ka interesado at pumunta sa tab na Inspect.
- Sa ilalim ng seksyong Code, piliin ang code na gusto mong i-export (CSS para sa Web, Swift para sa iOS, o XML para sa Android).
Ang tool ay bubuo ng code depende sa opsyon na iyong pinili, at pagkatapos ay maaari mo itong i-export. Kahit na ito ay isang mahusay na tool, mayroon itong ilang mga limitasyon. Ibig sabihin, hindi mo mai-export ang SVG sa HTML. Para diyan, kakailanganin mong gumamit ng plugin.
Mga Plugin ng Figma
Nagtatampok ang Figma ng daan-daang kapaki-pakinabang na plugin. Magbabanggit kami ng ilan na magagamit mo para i-export ang iyong disenyo sa HTML.
Figma sa HTML
Ang isaksak nagbibigay-daan sa iyo na i-convert ang iyong disenyo sa HTML o CSS, depende sa iyong mga pangangailangan. Sundin ang mga hakbang sa ibaba upang i-install ang plugin at export code:
- I-access ang pangunahing menu sa pamamagitan ng pagpindot sa icon sa kaliwang sulok sa itaas.
- Pindutin ang Mga Plugin.
- Pindutin ang Browse Plugins sa Community.
- I-type ang Figma sa HTML at piliin ang Mga Plugin sa itaas.
- Pindutin ang I-install.
- Bumalik sa iyong disenyo at piliin ang nais na mga elemento.
- Bumalik sa pangunahing menu, piliin ang Mga Plugin, at pagkatapos ay piliin ang Figma sa HTML.
- Pumili ng HTML o CSS.
- Pindutin ang Kopyahin o I-download, depende sa iyong mga pangangailangan.
Anima para sa Figma
Ang isa pang kapaki-pakinabang na plugin ay ang Anima para sa Figma. Gamit ang plugin na ito, maaari mong i-convert ang iyong disenyo sa HTML, CSS, React, at Vue. Sundin ang mga hakbang na ito upang magamit ang plugin:
- Buksan ang pangunahing menu sa pamamagitan ng pagpili sa tuktok na kaliwang icon.
- Pindutin ang Mga Plugin.
- Piliin ang Mag-browse ng Mga Plugin sa Komunidad.
- I-type ang Anima para sa Figma.
- Pindutin ang I-install.
- Piliin ang mga elementong gusto mong i-export.
- Buksan ang pangunahing menu, pindutin ang Mga Plugin, at piliin ang Anima para sa Figma. Mag-sign up kung wala kang account.
- Piliin ang uri ng code at pindutin ang Export Code.
Paano I-export ang Code sa Figma sa isang Mac
Ang pag-export ng iyong disenyo sa code sa isang Mac device ay maaaring gawin sa maraming paraan.
Figma Inspect
Nagbibigay-daan sa iyo ang built-in na tool na ito na siyasatin at i-export ang code at iba pang value para sa iyong mga disenyo. Sa Figma Inspect, maaari kang pumili sa tatlong opsyon ng code: Android, iOS, o Web (CSS lang).
Sundin ang mga hakbang sa ibaba upang gamitin ang Figma Inspect sa isang Mac:
- Piliin ang mga elementong gusto mong i-export.
- Buksan ang tab na Inspect sa kanan.
- Pumili sa CSS, iOS, o Android.
- Kopyahin ang iyong code.
Kung interesado ka lang sa CSS, iOS, at Android, ito ay isang mahusay na tool upang magamit. Gayunpaman, kung gusto mong i-export ang iyong disenyo sa HTML, kakailanganin mong gumamit ng ibang paraan.
Mga Plugin ng Figma
Kung gusto mong i-convert ang iyong mga disenyo sa HTML, nag-aalok ang Figma ng dose-dosenang mga plugin na nagsisilbi sa layuning ito. Ang proseso ng pag-install ay simple. Ililista namin ang ilan sa mga pinakasikat.
Figma sa HTML
Ito isaksak nagbibigay-daan sa iyo na i-convert ang iyong disenyo sa CSS o HTML. Narito kung paano i-install ito:
- Piliin ang icon sa kaliwang tuktok upang buksan ang pangunahing menu.
- Pindutin ang Mga Plugin.
- Piliin ang Mag-browse ng Mga Plugin sa Komunidad.
- I-type ang Figma sa HTML sa search bar at piliin ang Mga Plugin sa itaas.
- Pindutin ang I-install.
- Bumalik sa iyong disenyo at piliin ang mga elementong gusto mong i-export.
- Buksan ang pangunahing menu, piliin ang Mga Plugin, at pagkatapos ay piliin ang Figma sa HTML.
- Piliin ang HTML o CSS.
- Pindutin ang Kopyahin o I-download.
Figma sa Code
Kasama nito isaksak , maaari mong i-convert ang iyong disenyo ng Figma sa HTML, Tailwind, Flutter, o Swift UI. Sundin ang mga hakbang sa ibaba upang i-install at gamitin ito:
- Pindutin ang icon sa kaliwang tuktok upang ma-access ang pangunahing menu.
- Piliin ang Mga Plugin.
- Pindutin ang Browse Plugins sa Community.
- I-type ang Figma to Code sa search bar at piliin ang Mga Plugin sa itaas upang makakuha ng mga nauugnay na resulta.
- Pindutin ang I-install.
- Pumunta sa iyong disenyo at piliin ang nais na mga elemento.
- I-access muli ang pangunahing menu, piliin ang Mga Plugin, at pagkatapos ay piliin ang Figma to Code.
- Piliin ang gustong code.
- Pindutin ang Kopyahin sa Clipboard.
Maaari ba akong Mag-export ng Code sa Figma sa iPhone?
Ang bagong Figma iPhone app ay magagamit lamang bilang isang beta na bersyon hanggang pagsubok sa paglipad para sa unang 10,000 iPhone, ngunit sinabi ng kumpanya na ang buong rollout ay paparating na. Binibigyang-daan ka ng app na i-browse at i-access ang iyong mga disenyo at subaybayan ang mga live na pagbabago sa iyong iPhone habang ine-edit ang disenyo sa iyong computer.
Sa panahong iyon, hindi posibleng mag-edit ng mga disenyo sa pamamagitan ng iPhone app, na nangangahulugang walang paraan upang mag-export ng code sa pamamagitan nito.
Nag-aalok din ang Figma ng Figma Mirror app sa App Store. Binibigyang-daan ka ng app na ito na i-mirror ang iyong mga disenyo sa anumang iOS device nang hindi nakakonekta sa parehong network. Sa ganoong paraan, maaari mong suriin kung ano ang hitsura ng iyong disenyo sa isang partikular na device (sa kasong ito, iPhone) at subaybayan ang mga pagbabago. Bagama't kapaki-pakinabang, hindi ka pinapayagan ng app na mag-export ng code sa iyong iPhone. Para diyan, kailangan mong kunin ang iyong computer.
Maaari mo ring i-access ang iyong mga disenyo sa pamamagitan ng iyong browser. Gayunpaman, makikita mo pa rin ang iyong disenyo at masusubaybayan ang mga live na pagbabago.
Maaari ba akong Mag-export ng Code sa Figma sa isang iPad?
Sa kasamaang palad, hindi posibleng mag-export ng code sa Figma kung gumagamit ka ng iPad. Gumagana ang Figma sa mobile app, at mayroong beta na bersyon, ngunit hindi ito available para sa mga tablet, para lang sa mga iPhone at Android.
Ang Figma Mirror app ay available sa mga iPad. Binibigyang-daan ka ng app na subaybayan ang mga pagbabagong gagawin mo sa iyong disenyo sa computer at tingnan kung ano ang hitsura ng mga ito sa screen ng iPad. Sa kasamaang palad, hindi available ang opsyong mag-export ng code sa loob ng app.
Kung ayaw mong i-install ang app, maaari mong i-access ang Figma sa pamamagitan ng iyong browser at subaybayan ang mga pagbabago sa disenyo. Ngunit, ang pag-export ng code sa Figma ay posible lamang sa isang computer.
Maaari ba akong Mag-export ng Code sa Figma sa isang Android
Kasalukuyang nagtatrabaho ang Figma sa Android app at nag-aalok ng beta na bersyon para sa 10,000 Android phone. Maaari kang maging isang tester sa pamamagitan ng pag-download ng app mula sa Play Store at pag-access dito link . Maaari kang mag-browse, tingnan, at ibahagi ang iyong mga disenyo at subaybayan ang mga pagbabago sa loob ng app kahit na hindi ka malapit sa iyong computer.
Bagama't kapaki-pakinabang ang app para sa maraming layunin, hindi ka nito binibigyang-daan na mag-export ng code sa ngayon.
Ang Figma Mirror magagamit din ang app para sa Android. Ang pangunahing layunin nito ay subaybayan ang mga pagbabagong gagawin mo sa iyong mga disenyo sa iyong computer at tiyaking maganda ang hitsura ng mga ito sa lahat ng Android device. Hindi available ang opsyon sa pag-export ng code.
Maaari mo ring gamitin ang Figma sa loob ng iyong browser kung ayaw mong i-install ang app. Gayunpaman, hindi mo pa rin ma-export ang code. Para diyan, kailangan mong gamitin ang iyong computer.
ilipat ang mga larawan mula sa android sa pc
Mga karagdagang FAQ
Paano ako mag-e-export ng mga kulay mula sa Figma hanggang Xcode?
Sa kasamaang palad, hindi posibleng mag-export ng mga kulay mula sa Figma hanggang sa Xcode dahil hindi ito sinusuportahan ng Figma. Ngunit, mayroong isang workaround na maaari mong gamitin na tinatawag Figma Export . Sundin ang mga hakbang sa ibaba upang magamit ito:
1. Kung hindi mo pa nagagawa, i-install Figma Export .
2. Buksan ang Terminal.app.
3. Buksan ang folder na may figma-export file.
4. Ilunsad ang figma-export.
5. I-export ang mga kulay gamit ang ./figma-export na kulay -i figma-export.yaml.
Paano ako mag-e-export ng HTML code mula sa Figma?
Gaya ng naunang nabanggit, pinapayagan ka ng built-in na tool na tinatawag na Figma Inspect na makakuha ng CSS, ngunit hindi HTML. Kung kailangan mo ng HTML code, kakailanganin mong mag-install ng plugin.
Nagtatampok ang Figma ng dose-dosenang mga plugin na nagsisilbi sa layuning ito. Ang aming rekomendasyon ay Figma sa HTML . Narito kung paano ito gamitin:
1. Buksan ang pangunahing menu. Ito ang icon sa kaliwang itaas.
2. Pindutin ang Mga Plugin.
3. Piliin ang Mag-browse ng Mga Plugin sa Komunidad.
4. I-type ang Figma sa HTML sa search bar at tiyaking napili ang Mga Plugin sa itaas.
5. Piliin ang I-install.
6. Bumalik sa iyong disenyo at piliin ang mga elementong gusto mong i-convert sa HTML.
7. Pumunta sa pangunahing menu, piliin ang Mga Plugin, at buksan ang Figma sa HTML.
8. Pindutin ang HTML.
9. Pumili sa pagitan ng Kopyahin o I-download.
Kunin ang Code na Kailangan Mo
Pinapayagan ka ng Figma na mag-export ng iba't ibang uri ng mga code gamit ang ilang mga pamamaraan. Maaari kang gumamit ng mga built-in na tool o mag-download ng iba't ibang mga plugin, depende sa iyong mga pangangailangan. Sa ngayon, ang pag-export ng mga code ay posible lamang sa pamamagitan ng mga computer. Inilabas ng Figma ang bersyon ng beta ng mobile app (limitado sa 10,000 iPhone o Android device), ngunit hindi nito itinatampok ang opsyong ito. Sa kabutihang palad, ang pag-export ng code sa mga computer ay mabilis at madali.
Paano mo i-export ang code sa Figma? Gumagamit ka ba ng isa sa mga pamamaraan na binanggit namin sa artikulong ito? Sabihin sa amin sa seksyon ng mga komento sa ibaba.
