Ierīču saites
Viena no Figma labākajām funkcijām ir tā, ka tā ļauj ātri pārsūtīt ar to izveidotos dizainus kodā. Ja esat lietotņu izstrādātājs vai strādājat ar dizaineriem, šī ir vērtīga prasme, kas jāapgūst. Izmantojot iebūvētos rīkus un daudzus spraudņus, Figma ļauj eksportēt savu dizainu uz dažādām platformām.
Ja vēlaties uzzināt vairāk par Figma dizaina pārveidošanu kodā, esat nonācis īstajā vietā. Šajā rakstā mēs apspriedīsim, kā eksportēt kodu programmā Figma un kādi rīki jums būs jāizmanto.
Kā eksportēt kodu programmā Figma operētājsistēmā Windows
Ja esat Windows lietotājs un vēlaties eksportēt kodu programmā Figma, jūs ar prieku uzzināsit, ka varat izmantot daudzas iespējas.
Figma pārbaude
Viena no metodēm, ko varat izmantot, lai eksportētu kodu programmā Figma, ir Figma Inspect. Šī funkcija ļauj ērti pārveidot dizainu Android, iOS vai tīmekļa kodā. Tā kā tas ir iebūvēts, jums nav jāinstalē spraudņi vai trešo pušu lietotnes.
Lūk, kā to izmantot:
- Atlasiet elementus, kas jūs interesē, un dodieties uz cilni Pārbaudīt.
- Sadaļā Kods atlasiet kodu, kuru vēlaties eksportēt (CSS tīmeklim, Swift operētājsistēmai iOS vai XML operētājsistēmai Android).
Rīks ģenerēs kodu atkarībā no jūsu izvēlētās opcijas, un pēc tam varēsiet to eksportēt. Lai gan tas ir lielisks rīks, tam ir daži ierobežojumi. Proti, jūs nevarat eksportēt SVG uz HTML. Šim nolūkam jums būs jāizmanto spraudnis.
Figma spraudņi
Figma piedāvā simtiem noderīgu spraudņu. Mēs pieminēsim dažus, ko varat izmantot, lai eksportētu savu dizainu uz HTML.
Figma uz HTML
The iespraust ļauj pārveidot dizainu HTML vai CSS formātā atkarībā no jūsu vajadzībām. Lai instalētu spraudni un eksportētu kodu, veiciet tālāk norādītās darbības.
- Piekļūstiet galvenajai izvēlnei, nospiežot ikonu augšējā kreisajā stūrī.
- Nospiediet Plugins.
- Nospiediet Pārlūkot spraudņus kopienā.
- Ierakstiet Figma uz HTML un augšpusē atlasiet Plugins.
- Nospiediet Instalēt.
- Atgriezieties pie sava dizaina un atlasiet vajadzīgos elementus.
- Atgriezieties galvenajā izvēlnē, atlasiet Plugins un pēc tam atlasiet Figma to HTML.
- Izvēlieties HTML vai CSS.
- Nospiediet Kopēt vai Lejupielādēt atkarībā no jūsu vajadzībām.
Anima priekš Figma
Vēl viens noderīgs spraudnis ir Anima for Figma. Izmantojot šo spraudni, varat pārveidot savu dizainu uz HTML, CSS, React un Vue. Lai izmantotu spraudni, veiciet šīs darbības:
- Atveriet galveno izvēlni, atlasot augšējo kreiso ikonu.
- Nospiediet Plugins.
- Atlasiet Pārlūkot spraudņus kopienā.
- Ierakstiet Anima Figma.
- Nospiediet Instalēt.
- Atlasiet elementus, kurus vēlaties eksportēt.
- Atveriet galveno izvēlni, nospiediet Plugins un atlasiet Anima for Figma. Reģistrējieties, ja jums nav konta.
- Izvēlieties koda veidu un nospiediet Eksportēt kodu.
Kā eksportēt kodu programmā Figma operētājsistēmā Mac
Dizaina eksportēšanu uz kodu Mac ierīcē var veikt vairākos veidos.
Figma pārbaude
Šis iebūvētais rīks ļauj pārbaudīt un eksportēt kodu un citas jūsu dizaina vērtības. Izmantojot Figma Inspect, varat izvēlēties vienu no trim koda opcijām: Android, iOS vai Web (tikai CSS).
Lai Mac datorā izmantotu Figma Inspect, veiciet tālāk norādītās darbības.
- Atlasiet elementus, kurus vēlaties eksportēt.
- Labajā pusē atveriet cilni Pārbaudīt.
- Izvēlieties CSS, iOS vai Android.
- Kopējiet savu kodu.
Ja jūs interesē tikai CSS, iOS un Android, tas ir lielisks rīks lietošanai. Tomēr, ja vēlaties eksportēt savu dizainu uz HTML, jums būs jāizmanto cita metode.
Figma spraudņi
Ja vēlaties pārveidot savus dizainus HTML, Figma piedāvā desmitiem spraudņu, kas kalpo šim nolūkam. Uzstādīšanas process ir vienkāršs. Mēs uzskaitīsim dažus no populārākajiem.
Figma uz HTML
Šis iespraust ļauj pārveidot dizainu CSS vai HTML formātā. Lūk, kā to instalēt:
- Atlasiet augšējo kreiso ikonu, lai atvērtu galveno izvēlni.
- Nospiediet Plugins.
- Atlasiet Pārlūkot spraudņus kopienā.
- Meklēšanas joslā ierakstiet Figma to HTML un augšpusē atlasiet Plugins.
- Nospiediet Instalēt.
- Atgriezieties pie sava dizaina un atlasiet elementus, kurus vēlaties eksportēt.
- Atveriet galveno izvēlni, atlasiet Plugins un pēc tam atlasiet Figma to HTML.
- Atlasiet HTML vai CSS.
- Nospiediet Kopēt vai Lejupielādēt.
Figma uz kodu
Ar šo iespraust , varat pārvērst savu Figma dizainu uz HTML, Tailwind, Flutter vai Swift lietotāja interfeisu. Lai to instalētu un lietotu, veiciet tālāk norādītās darbības.
- Nospiediet augšējo kreiso ikonu, lai piekļūtu galvenajai izvēlnei.
- Atlasiet Plugins.
- Kopienā nospiediet Pārlūkot spraudņus.
- Meklēšanas joslā ierakstiet Figma to Code un augšpusē izvēlieties Plugins, lai iegūtu atbilstošus rezultātus.
- Nospiediet Instalēt.
- Dodieties uz savu dizainu un atlasiet vajadzīgos elementus.
- Atkal atveriet galveno izvēlni, atlasiet Plugins un pēc tam atlasiet Figma to Code.
- Izvēlieties vajadzīgo kodu.
- Nospiediet Kopēt starpliktuvē.
Vai iPhone tālrunī varu eksportēt kodu programmā Figma?
Jaunā Figma iPhone lietotne bija pieejama tikai kā beta versija testa lidojums pirmajiem 10 000 iPhone, taču uzņēmums norāda, ka drīzumā tiks nodrošināta pilnīga izlaišana. Lietojumprogramma ļauj pārlūkot un piekļūt saviem dizainiem un izsekot tiešraides izmaiņām savā iPhone, vienlaikus rediģējot dizainu datorā.
Tobrīd dizainus nav iespējams rediģēt, izmantojot iPhone lietotni, kas nozīmē, ka caur to nevar eksportēt kodu.
Figma piedāvā arī Figma spogulis lietotni App Store. Šī lietotne ļauj atspoguļot savus dizainus jebkurā iOS ierīcē bez savienojuma ar to pašu tīklu. Tādā veidā varat pārbaudīt, kā jūsu dizains izskatās konkrētā ierīcē (šajā gadījumā iPhone), un sekot līdzi izmaiņām. Lai gan lietotne ir noderīga, tā neļauj eksportēt kodu savā iPhone. Lai to izdarītu, jums būs jāpaņem dators.
Varat arī piekļūt saviem dizainiem, izmantojot pārlūkprogrammu. Tomēr jūs joprojām varēsit tikai skatīt savu dizainu un izsekot izmaiņām tiešraidē.
Vai es varu eksportēt kodu programmā Figma iPad?
Diemžēl nav iespējams eksportēt kodu programmā Figma, ja izmantojat iPad. Figma darbojas mobilajā lietotnē, un tai ir beta versija, taču tā nebija pieejama planšetdatoriem, tikai iPhone un Android ierīcēm.
Lietotne Figma Mirror ir pieejama iPad. Lietojumprogramma ļauj izsekot jūsu dizainā veiktajām izmaiņām datorā un pārbaudīt, kā tās izskatās iPad ekrānā. Diemžēl iespēja eksportēt kodu lietotnē nav pieejama.
Ja nevēlaties instalēt lietotni, varat piekļūt Figma, izmantojot pārlūkprogrammu, un izsekot dizaina izmaiņām. Taču koda eksportēšana programmā Figma ir iespējama tikai datorā.
Vai es varu eksportēt kodu Figma operētājsistēmā Android
Figma pašlaik strādā pie Android lietotnes un piedāvā beta versiju 10 000 Android tālruņu. Varat kļūt par testētāju, lejupielādējot lietotni no Spēļu veikals un piekļūt šim saite . Varat pārlūkot, skatīt un kopīgot savus dizainus un izsekot izmaiņām lietotnē pat tad, ja neatrodaties datora tuvumā.
Lai gan lietotne ir noderīga daudziem mērķiem, tā pašlaik neļauj eksportēt kodu.
The Figma spogulis lietotne ir pieejama arī Android ierīcēm. Tās galvenais mērķis ir izsekot izmaiņām, ko veicat savos dizainos datorā, un nodrošināt, ka tās izskatās labi visās Android ierīcēs. Iespēja eksportēt kodu nav pieejama.
Varat arī izmantot Figma savā pārlūkprogrammā, ja nevēlaties instalēt lietotni. Tomēr jūs joprojām nevarēsit eksportēt kodu. Šim nolūkam jums būs jāizmanto dators.
kā atjaunot xbox 360 rūpnīcas iestatījumus
Papildu bieži uzdotie jautājumi
Kā eksportēt krāsas no Figma uz Xcode?
Diemžēl nav iespējams eksportēt krāsas no Figma uz Xcode, jo Figma to neatbalsta. Taču ir risinājums, ko varat izmantot, zvanot Figma Export . Lai to izmantotu, veiciet tālāk norādītās darbības.
1. Ja vēl neesat to izdarījis, instalējiet Figma Export .
2. Atveriet Terminal.app.
3. Atveriet mapi ar figma-export failu.
4. Palaidiet figma-export.
5. Eksportējiet krāsas, izmantojot ./figma-export colours -i figma-export.yaml.
Kā eksportēt HTML kodu no Figma?
Kā minēts iepriekš, iebūvētais rīks ar nosaukumu Figma Inspect ļauj iegūt CSS, bet ne HTML. Ja jums ir nepieciešams HTML kods, jums būs jāinstalē spraudnis.
Figma piedāvā desmitiem spraudņu, kas kalpo šim nolūkam. Mūsu ieteikums ir Figma uz HTML . Lūk, kā to izmantot:
1. Atveriet galveno izvēlni. Tā ir augšējā kreisā ikona.
2. Nospiediet Plugins.
3. Atlasiet Pārlūkot spraudņus kopienā.
4. Meklēšanas joslā ierakstiet Figma to HTML un pārliecinieties, vai augšpusē ir atlasīti spraudņi.
5. Izvēlieties Instalēt.
6. Atgriezieties pie sava dizaina un atlasiet elementus, kurus vēlaties konvertēt uz HTML.
7. Atveriet galveno izvēlni, atlasiet Plugins un atveriet programmu Figma to HTML.
8. Nospiediet HTML.
9. Izvēlieties Kopēt vai Lejupielādēt.
Iegūstiet vajadzīgo kodu
Figma ļauj eksportēt dažāda veida kodus, izmantojot vairākas metodes. Varat izmantot iebūvētos rīkus vai lejupielādēt dažādus spraudņus atkarībā no jūsu vajadzībām. Pagaidām kodu eksportēšana iespējama tikai ar datoru starpniecību. Figma izlaida mobilās lietotnes beta versiju (ierobežots līdz 10 000 iPhone vai Android ierīcēm), taču tai nav šīs opcijas. Par laimi, koda eksportēšana datoros ir ātra un vienkārša.
Kā jūs eksportējat kodu Figmā? Vai izmantojat kādu no šajā rakstā minētajām metodēm? Pastāstiet mums komentāru sadaļā zemāk.
