Laitteen linkit
Yksi Figman parhaista ominaisuuksista on, että sen avulla voit nopeasti siirtää sen avulla tekemäsi mallit koodiksi. Jos olet sovelluskehittäjä tai työskentelet suunnittelijoiden kanssa, tämä on arvokas taito oppia. Sisäänrakennettujen työkalujen ja lukuisten lisäosien avulla Figma antaa sinun viedä suunnittelusi eri alustoille.
Jos haluat oppia lisää Figma-suunnittelun muuntamisesta koodiksi, olet tullut oikeaan paikkaan. Tässä artikkelissa keskustelemme koodin viemisestä Figmaan ja mitä työkaluja sinun tulee käyttää.
Koodin vieminen Figmassa Windows-tietokoneessa
Jos olet Windows-käyttäjä ja haluat viedä koodia Figmaan, tulet mielelläsi tietämään, että voit käyttää useita vaihtoehtoja.
Figma Inspect
Yksi menetelmistä, joilla voit viedä koodia Figmaan, on Figma Inspect. Tämän ominaisuuden avulla voit helposti muuntaa mallisi Android-, iOS- tai verkkokoodiksi. Koska se on sisäänrakennettu, sinun ei tarvitse asentaa lisäosia tai kolmannen osapuolen sovelluksia.
Käytä sitä seuraavasti:
- Valitse sinua kiinnostavat elementit ja siirry Tarkasta-välilehteen.
- Valitse Koodi-osiossa koodi, jonka haluat viedä (CSS for Web, Swift for iOS tai XML for Android).
Työkalu luo koodin valitsemasi vaihtoehdon mukaan, ja voit sitten viedä sen. Vaikka tämä on loistava työkalu, sillä on joitain rajoituksia. Nimittäin et voi viedä SVG:tä HTML:ään. Tätä varten sinun on käytettävä laajennusta.
Figma Plugins
Figmassa on satoja hyödyllisiä laajennuksia. Mainitsemme muutamia, joiden avulla voit viedä suunnittelusi HTML-muotoon.
Figma HTML:ksi
The kytkeä avulla voit muuntaa suunnittelusi HTML- tai CSS-muotoon tarpeidesi mukaan. Asenna laajennus ja vie koodi seuraavasti:
- Päävalikkoon pääset painamalla vasemmassa yläkulmassa olevaa kuvaketta.
- Paina Plugins.
- Paina Selaa laajennuksia yhteisössä.
- Kirjoita Figma HTML:ksi ja valitse yläreunasta Plugins.
- Paina Asenna.
- Palaa suunnitteluun ja valitse haluamasi elementit.
- Palaa päävalikkoon, valitse Plugins ja valitse sitten Figma to HTML.
- Valitse HTML tai CSS.
- Paina Kopioi tai Lataa tarpeidesi mukaan.
Anima Figmalle
Toinen hyödyllinen laajennus on Anima for Figma. Tämän laajennuksen avulla voit muuntaa suunnittelusi HTML-, CSS-, React- ja Vue-muotoon. Käytä laajennusta seuraavasti:
- Avaa päävalikko valitsemalla vasemmasta yläkulmasta kuvake.
- Paina Plugins.
- Valitse Selaa laajennuksia yhteisössä.
- Kirjoita Figma Anima.
- Paina Asenna.
- Valitse elementit, jotka haluat viedä.
- Avaa päävalikko, paina Plugins ja valitse Anima for Figma. Rekisteröidy, jos sinulla ei ole tiliä.
- Valitse koodityyppi ja paina Vie koodi.
Koodin vieminen Figmaan Macissa
Suunnittelun vieminen koodiin Mac-laitteeseen voidaan tehdä useilla tavoilla.
Figma Inspect
Tämän sisäänrakennetun työkalun avulla voit tarkastaa ja viedä malliesi koodia ja muita arvoja. Figma Inspectilla voit valita kolmesta koodivaihtoehdosta: Android, iOS tai Web (vain CSS).
Noudata alla olevia ohjeita käyttääksesi Figma Inspectia Macissa:
- Valitse elementit, jotka haluat viedä.
- Avaa Tarkista-välilehti oikealla.
- Valitse CSS, iOS tai Android.
- Kopioi koodisi.
Jos olet kiinnostunut vain CSS:stä, iOS:stä ja Androidista, tämä on erinomainen työkalu käytettäväksi. Jos kuitenkin haluat viedä mallisi HTML-muotoon, sinun on käytettävä toista menetelmää.
Figma Plugins
Jos haluat muuntaa mallisi HTML-muotoon, Figma tarjoaa kymmeniä tähän tarkoitukseen sopivia laajennuksia. Asennusprosessi on yksinkertainen. Listaamme muutamia suosituimpia.
Figma HTML:ksi
Tämä kytkeä voit muuntaa suunnittelusi CSS- tai HTML-muotoon. Näin asennat sen:
- Avaa päävalikko valitsemalla vasemmassa yläkulmassa oleva kuvake.
- Paina Plugins.
- Valitse Selaa laajennuksia yhteisössä.
- Kirjoita hakupalkkiin Figma to HTML ja valitse yläreunasta Plugins.
- Paina Asenna.
- Palaa suunnitteluun ja valitse elementit, jotka haluat viedä.
- Avaa päävalikko, valitse Plugins ja valitse sitten Figma to HTML.
- Valitse HTML tai CSS.
- Paina Kopioi tai Lataa.
Figma koodiksi
Tämän kanssa kytkeä , voit muuntaa Figma-suunnittelusi HTML-, Tailwind-, Flutter- tai Swift-käyttöliittymäksi. Asenna ja käytä alla olevia ohjeita:
- Paina vasemman yläkulman kuvaketta päästäksesi päävalikkoon.
- Valitse Plugins.
- Paina Selaa laajennuksia yhteisössä.
- Kirjoita hakupalkkiin Figma to Code ja valitse ylhäältä Plugins saadaksesi osuvia tuloksia.
- Paina Asenna.
- Siirry suunnitteluun ja valitse haluamasi elementit.
- Siirry päävalikkoon uudelleen, valitse Plugins ja valitse sitten Figma to Code.
- Valitse haluamasi koodi.
- Paina Kopioi leikepöydälle.
Voinko viedä koodia Figmaan iPhonessa?
Uusi Figma iPhone -sovellus oli saatavilla vain beta-versiona koelento ensimmäisille 10 000 iPhonelle, mutta yhtiö ilmoittaa, että täydellinen käyttöönotto on tulossa pian. Sovelluksen avulla voit selata ja käyttää mallejasi ja seurata reaaliaikaisia muutoksia iPhonessa samalla, kun muokkaat mallia tietokoneellasi.
Tällä hetkellä ei ole mahdollista muokata malleja iPhone-sovelluksen kautta, mikä tarkoittaa, että koodia ei voi viedä sen kautta.
Figma tarjoaa myös Figma peili sovellus App Storessa. Tämän sovelluksen avulla voit peilata suunnittelusi mihin tahansa iOS-laitteeseen ilman, että olet yhteydessä samaan verkkoon. Tällä tavalla voit tarkistaa, miltä mallisi näyttää tietyssä laitteessa (tässä tapauksessa iPhonessa) ja seurata muutoksia. Vaikka sovellus on hyödyllinen, se ei salli sinun viedä koodia iPhonellesi. Sitä varten sinun on tartuttava tietokoneeseen.
Voit myös käyttää mallejasi selaimesi kautta. Voit kuitenkin edelleen vain tarkastella suunnitteluasi ja seurata reaaliaikaisia muutoksia.
Voinko viedä koodia Figmaan iPadilla?
Valitettavasti koodia ei voi viedä Figmaan, jos käytät iPadia. Figma työskentelee mobiilisovelluksen parissa, ja siitä on beta-versio, mutta se ei ollut saatavilla tableteille, vain iPhoneille ja Androideille.
Figma Mirror -sovellus on saatavilla iPadeille. Sovelluksen avulla voit seurata suunnitteluun tekemiäsi muutoksia tietokoneella ja tarkistaa, miltä ne näyttävät iPadin näytöltä. Valitettavasti koodin vienti sovelluksen sisällä ei ole käytettävissä.
Jos et halua asentaa sovellusta, voit käyttää Figmaa selaimesi kautta ja seurata suunnittelun muutoksia. Mutta koodin vieminen Figmaan on mahdollista vain tietokoneella.
Voinko viedä koodia Figmaan Androidilla
Figma työskentelee parhaillaan Android-sovelluksen parissa ja tarjoaa beta-version 10 000 Android-puhelimelle. Voit ryhtyä testaajaksi lataamalla sovelluksen osoitteesta Pelikauppa ja päästä tähän linkki . Voit selata, tarkastella ja jakaa mallejasi ja seurata muutoksia sovelluksessa, vaikka et olisi lähellä tietokonettasi.
Vaikka sovellus on hyödyllinen moniin tarkoituksiin, se ei toistaiseksi salli koodin vientiä.
The Figma peili sovellus on saatavilla myös Androidille. Sen päätarkoitus on seurata tietokoneellasi tekemiäsi muutoksia ja varmistaa, että ne näyttävät hyviltä kaikissa Android-laitteissa. Koodin vientivaihtoehto ei ole käytettävissä.
Voit myös käyttää Figmaa selaimessasi, jos et halua asentaa sovellusta. Et kuitenkaan voi viedä koodia. Tätä varten sinun on käytettävä tietokonettasi.
kuinka tarkastella facebook-viestipyyntöjä
Muita usein kysyttyjä kysymyksiä
Kuinka voin viedä värejä Figmasta Xcodeen?
Valitettavasti ei ole mahdollista viedä värejä Figmasta Xcodeen, koska Figma ei tue sitä. Mutta on olemassa kiertotapa, jota voit käyttää nimeltä Figma Export . Käytä alla olevia ohjeita:
1. Asenna, jos et ole vielä tehnyt sitä Figma Export .
2. Avaa Terminal.app.
3. Avaa kansio, jossa on figma-export-tiedosto.
4. Käynnistä figma-export.
5. Vie värit käyttämällä tiedostoa ./figma-export colours -i figma-export.yaml.
Kuinka voin viedä HTML-koodia Figmasta?
Kuten aiemmin mainittiin, sisäänrakennettu Figma Inspect -työkalu antaa sinun saada CSS:n, mutta ei HTML:ää. Jos tarvitset HTML-koodin, sinun on asennettava laajennus.
Figma sisältää kymmeniä laajennuksia, jotka palvelevat tätä tarkoitusta. Suosituksemme on Figma HTML:ksi . Käytä sitä seuraavasti:
1. Avaa päävalikko. Se on vasemmassa yläkulmassa oleva kuvake.
2. Paina Plugins.
3. Valitse Selaa laajennuksia yhteisössä.
4. Kirjoita hakupalkkiin Figma to HTML ja varmista, että Plugins on valittuna yläreunasta.
5. Valitse Asenna.
6. Palaa suunnitteluun ja valitse elementit, jotka haluat muuntaa HTML-muotoon.
7. Siirry päävalikkoon, valitse Plugins ja avaa Figma to HTML.
8. Paina HTML.
9. Valitse Kopioi tai Lataa.
Hanki tarvitsemasi koodi
Figman avulla voit viedä erityyppisiä koodeja useilla menetelmillä. Voit käyttää sisäänrakennettuja työkaluja tai ladata erilaisia laajennuksia tarpeidesi mukaan. Toistaiseksi koodien vienti on mahdollista vain tietokoneiden kautta. Figma julkaisi mobiilisovelluksen beta-version (rajoitettu 10 000 iPhone- tai Android-laitteeseen), mutta siinä ei ole tätä vaihtoehtoa. Onneksi koodin vieminen tietokoneisiin on nopeaa ja helppoa.
Kuinka viet koodia Figmaan? Käytätkö jotakin tässä artikkelissa mainitsemistamme tavoista? Kerro meille alla olevassa kommenttiosiossa.
