Verdienen Sie Geld mit Ihren Tech-Blogs, Gadgets und Tipps

Mikä on Figma? Ja miten käytät sitä?

Huomautus: Seuraava artikkeli auttaa sinua: Mikä Figma on? Ja miten käytät sitä?

Figma-ohjelmistokoulutus: Käyttöliittymä, olennainen osa tekijöitä, jotka vaikuttavat markkinointiin ja käyttäjäsuhteisiin nykypäivän yrityksiin. Käyttäjän tarpeet mittaavat usein hyvää käyttöliittymää, ja jos se on oikein suunniteltu, käyttäjä ei tarvitse koulutusta sen kanssa työskennelläkseen ja nauttii sen kanssa työskentelystä.

Yksi käyttöliittymäsuunnitteluohjelmista on Figma. Figman avulla voit helposti ja nopeasti suunnitella käyttäjäystävällisen käyttöliittymän. Joten jos olet kiinnostunut oppimaan Figma-ohjelmiston ja kuinka suunnitella käyttöliittymän sen avulla, tai jos haluat tietää enemmän ominaisuuksista ja työskentelystä Figman kanssa, pysy kuulolla SunLearnista Ohjelmointikoulutus verkkosivuilla tämän artikkelin loppuun.

Mikä on Figma?

Kuten mainittiin, Figma on käyttöliittymäsuunnitteluohjelma, joka lanseerattiin vuonna 2012. Ensimmäinen versio oli yleisön saatavilla vuonna 2016. Figma eroaa muista muokkaustyökaluista yleensä; Koska se on verkkopohjainen työkalu: se toimii suoraan selaimessa. Tämä lause tarkoittaa, että voit käyttää projektejasi ja aloittaa työskentelyn milloin tahansa miltä tahansa tietokoneelta. Alusta ilman lisenssin ostamista tai ohjelmiston asentamista. Sinun ei tarvitse huolehtia Internetin käytöstä, koska Figma ei tuhlaa paljon kaistanleveyttä. Windows- ja Mac-käyttäjät voivat kuitenkin helposti asentaa Figman käyttöjärjestelmäänsä ja käyttää joitakin sen Ominaisuuksia offline-tilassa.

Figma on ilmainen sovellus, jonka avulla voit luoda ja tallentaa jopa kolme aktiivista projektia samanaikaisesti. Tämän käytännön avulla voit oppia käyttämään ohjelmistoja, kokeilemaan ja suunnittelemaan pieniä projekteja. Persian kirjoittaminen Figmassa (editoriympäristössä) on myös helppoa, mikä on hyvä uutinen suunnittelijoille, jotka tarvitsevat persian kieltä.

Figma vai XD? Mikä on paras UI/UX-suunnittelun aloittamiseen?

Suunnittelijat etsivät yleensä kattavaa ja täydellistä työkalua säästääkseen aikaa. Suunnittele ja hallitse sivujasi helpoimmalla tavalla. Figma-ohjelmistoa käyttävät ihmiset uskovat, että siinä on ainutlaatuisia ominaisuuksia. Suunnittelijat pitävät tästä sovelluksesta, koska Figmaa voidaan käyttää monenlaisten graafisten tehtävien suorittamiseen. Erityisesti käyttöliittymien suunnittelu, mm. Kuten mobiilisovellusrajapintojen suunnittelu, prototyyppisuunnittelu, sosiaalisen median viestien luominen ja paljon muuta.

On kuitenkin huomattava, että saatavilla on myös muita sovellusten suunnittelutyökaluja, kuten Adobe XD tai Sketch. Mutta on monia syitä, miksi se siirtyi Figaan muista työkaluista, kuten Adobe XD tai Sketch.

Figman vertailu Adobe xd:hen

Yksi Figman käytön suurista eduista verrattuna muihin suunnitteluohjelmistoihin, kuten XD, on se, että se on verkkopohjainen. Suunnittelijat voivat työskennellä projektin parissa etänä ja samanaikaisesti muun tiimin kanssa. Etenkin nykyään monet yritykset ovat omaksuneet etätyöprosessin taloudellisista syistä, pääsyrajoituksista ja terveysprotokollasta johtuen. Niille, jotka eivät halua ladata ja asentaa erilaisia ​​suunnittelutyökaluja, Figma on hyvä valinta. Figma keskittyy myös mainoksissaan samaan projektiin yhteistyöhön. Motto on: Olemme yrittäneet poistaa monia tiimityöskentelyn ongelmia ohjelmistomme avulla.

Lähes kaikki muiden käyttöliittymäsuunnitteluohjelmistojen positiiviset ominaisuudet ovat saatavilla yhdestä paikasta. Jotkut näistä ominaisuuksista ovat:

  • Komponenttien käyttö: Luo ja yhdistä useita objekteja (samanlainen kuin Sketch-ohjelmisto)
  • Rakenna prototyyppi tai prototyyppejä: Mahdollisuus napsauttaa sen sisällä olevia eri komponentteja (samanlainen kuin InVision-ohjelmisto)
  • Kommentointi laadinnan aikana: Projektin parissa työskentelevien tiimin jäsenten kommenttien lisääminen, merkitseminen ja niihin vastaaminen.
  • Kooditon ohjelmointi: Mahdollisuus saada mitat ja ominaisuudet tyylitiedostojen muodossa, ladata kuvakkeita ja valokuvia projektin URL-osoitteesta (samanlainen kuin Zeplin-ohjelmisto)
  • Säädä väliä: Luo muutettava komponentti tila-asetusten avulla (samanlainen kuin Sketch-ohjelmisto).
  • Projektinhallinta versionhallinnan kanssa: Tarkastele tiimihistoriaa ja palaa tiettyyn versioon tiimin jäsenen mukaan
  • Useita ihmisiä työskentelee samanaikaisesti: Muiden tiimin jäsenten kohdistimien katsominen näytöllä työskennellessäsi (vaikka tätä ei yleensä suositella).
  • Lisäosat: Käytä muiden käyttäjien kirjasimia toiminnallisten lisäosien muodossa

Figma-ohjelmistokoulutus: Asenna Figma-ohjelmisto

Totesimme edellisessä osiossa, että Figma ei vaadi asennusta; Saatat kuitenkin olla helpompaa asentaa sen kopio käyttöjärjestelmääsi. Lataa Figma-ohjelmisto Windowsille ja Macille siirtymällä osoitteeseen latausalue ja lataa haluamasi versio. Tässä osiossa on asennustiedoston lisäksi erillinen ohjelmisto mukautettujen fonttien asentamiseen nimeltä “Font Installer” ja matkapuhelimeen asennettava “Figma Mirror” -sovellus, joka mahdollistaa samanaikaisen esittelyn ja puhelimen yhdistämisen tietokone. Haluta. Tässä osiossa on asennustiedoston lisäksi erillinen ohjelmisto mukautettujen fonttien asentamiseen nimeltä “Font Installer” ja matkapuhelimeen asennettava “Figma Mirror” -sovellus, joka mahdollistaa samanaikaisen esittelyn ja puhelimen yhdistämisen tietokone.

Lataa Figma-ohjelmiston asennustiedosto

Ohjelmiston opetusohjelma: Asenna Figma Linuxiin

Figman asentaminen Linuxiin on vaikeampaa kuin muihin käyttöjärjestelmiin, koska sinun on ladattava ja asennettava riippuvuus ennen asennusta. Voit tehdä tämän avaamalla Linux-päätelaitteen ja kirjoittamalla seuraavan komennon:

sudo apt -y asentaa libgconf2-4

Käytämme sitten seuraavaa komentoa toisen paketin asentamiseen, joka on Figman edellytys. (Asennuksen aikana osio pyytää sinua painamaan Enter ja sinun on painettava Enter jatkaaksesi asennusta.)

sudo add-apt-arkisto ppa:chrdevs/figma

Jos haluat asentaa Figman itse, siirry osoitteeseen Figma-ohjelmistopääte GitHub-sivu ja lataa haluamasi versio käytössäsi olevan Linux-jakelun tyypin mukaan (Debian, Red Hat jne.). Kun olet ladannut Figman, anna sopiva komento asentaaksesi Figma, jotta lataustiedostosi on asennettu kokonaan.

Lopuksi, kun olet asentanut Figan, voit suorittaa sen seuraavilla komennoilla:

Figma Linux

./figma-Linux-0.5.6-x86_64.AppImage

Figman ajon jälkeen tutustumme Figma-ohjelmistokoulutuksen jatkossa vaiheittain eri osiin.

ilmainen koulutus

Jotta voit käyttää Figmaa, sinun on ensin luotava tili voimassa olevalla sähköpostiosoitteella. Kun olet syöttänyt Figmaan, näet seuraavan sivun:

Figma-ohjelmiston asennusopas

Kuten kuvasta näkyy, sinulle on valmistettu useita suunnitteluesimerkkejä etukäteen, jotta sinun on helpompi tutustua Figmaan ja sen ominaisuuksiin. Jos kuitenkin haluat suunnitella tyhjän projektin, voit aloittaa Figmassa napsauttamalla “Uusi” -painiketta näytön oikeassa yläkulmassa.

Ohjelmistokoulutus: työympäristö

Figma-ohjelmiston opetusohjelman ensimmäisessä vaiheessa suunnittelusivulle siirtymisen jälkeen kohtaat seuraavanlaisen ympäristön:

Figma, sivun yläosassa on pääpalkki, jossa suurin osa tarvitsemistasi asetuksista ja ominaisuuksista on saatavilla tässä osiossa. Alla Tarkastellaan tämän valikon jokaista osaa.

Ohjelmiston opetusohjelma: yläpalkki

Aloitamme vaihtoehdoista näytön oikeassa yläkulmassa. Tässä osiossa sinulla on kolme vaihtoehtoa:

  • Keskimmäisen kankaan mitat: Napsauttamalla tätä painiketta voit määrittää sivun keskiosan mitat, johon objektit sijoitetaan. Tässä osiossa on myös ominaisuuksia, kuten mahdollisuus näyttää viivaimen, hiiren osoittimet aktiiviset projektissa jne.
  • Näytä asettelu: Tämä vaihtoehto, joka on käytettävissä Figmassa nykyisenä, mahdollistaa asettelun näyttämisen uudella sivulla selaimessa.
  • Jaa suunnitelma: Valitsemalla tämän vaihtoehdon voit jakaa suunnitelmasi muiden tiimin jäsenten sähköpostiosoitteiden kanssa. Voit myös asettaa käyttöoikeustasoja eri jäsenille. (Voivatko he muokata tai tarkastella tiedostoa.)

Näet projektin nimen yläpalkin keskellä. Klikkaamalla tätä otsikkoa voit muuttaa sen nimeä.

Yläpalkin vasemmassa osassa on kahdeksan vaihtoehtoa, järjestyksessä vasemmalta oikealle:

  • Päävalikko: Kolmen rivin kuvakkeen valitseminen avaa alivalikon, joka on täynnä erilaisia ​​ominaisuuksia. Tämä sisältää projektitiedostojen luomisen ja tallentamisen, projektin muokkaamiseen tarvittavat toiminnot, työskentelyn laajennuksien ja niihin liittyvien verkkosivustojen, kuten Dribble, Figman asetukset, sekä sovelluksen sisäisten kirjastojen käytön..
  • Valintatyökalu: Tässä vaihtoehdossa on kaksi alivalikkoa elementtien valitsemiseen tai niiden mittojen muuttamiseen.
  • Aluetyökalu: On kaksi tapaa valita kehys alueeksi tai sen osaksi.
  • Valitse objektit: Tämän vaihtoehdon, jota kutsutaan muototyökaluksi, avulla voit käyttää sivulla erilaisia ​​objekteja.
  • Piirrä muoto: Kynätyökalun avulla voit piirtää suosikkikohteitasi pistevektorilla tai lyijykynällä.
  • Tekstin kirjoittaminen: Tämä Kyky kirjoittaa tekstiä, joka on saatavilla kaikissa suunnittelu- ja grafiikkaohjelmissa.
  • Rullaa näytöllä: Käsityökalu-vaihtoehdon avulla voit selata ja selata kankaan läpi näytön keskellä.
  • Luo kommentti: Viimeisen vaihtoehdon valitseminen, jonka kuvake on pilviikkunan muodossa, aktivoi mahdollisuuden jättää kommentin sivun elementteihin. Kirjoita kommentti napsauttamalla haluamaasi elementtiä kiinnittääksesi kommentin siihen.

Ohjelmistokoulutus: Projektin luominen Figmassa ja tulosten saaminen

Päävalikko-vaihtoehdon napsauttaminen Figmassa avaa yläpalkista seuraavanlaisen alivalikon:

Valitsemalla Tiedosto-vaihtoehdon kaikki vaihtoehdot ovat käytettävissä, mukaan lukien uuden projektin luominen, nykyisen tiedoston tallentaminen Figma-tilille, tiedoston tallentaminen uuteen projektiin Figma-tilillä, tulosteiden hakeminen projektista jne.

Ohjelmistokoulutus: Käyttöliittymäsuunnittelu Figmalla

Teemalla voi olla erilaisia ​​asetteluja käyttäjän tulostuslaitteen tyypistä riippuen. Monet suositut sovellukset jopa muuttavat sovelluksensa ulkoasua riippuen siitä, mikä käyttöjärjestelmä käyttäjällä on matkapuhelimessaan (Android tai iPhone). Joten ennen kuin aloitat suunnittelun, muista miettiä kehys työllesi ja sijoittaa siihen tarvittavat elementit. Kehyksen valinta on niin tärkeä, että Figma ei näytä suunnittelun esikatselua ilman kehystä.

Kun napsautat Figassa elementtiä oikeanpuoleisessa ruudussa ja Suunnittelu-välilehdellä, näet sen suunnittelussa vaadittavat näyttöominaisuudet, kuten värin, välin ja mitat. Muuttamalla näitä ominaisuuksia voit mukauttaa elementin mieleiseksesi.

Toisella välilehdellä tai Prototyypin avulla voit määrittää, kuinka voit vaihtaa suunnittelusi eri sivujen välillä. Kolmannella välilehdellä tai “Tarkista” voit nähdä teemasi verkkokoodin ja kopioida sen tarvittaessa nopeuttaaksesi sovelluksesi kehitystä.

Ohjelmiston opetusohjelma: Esikatsele suunnittelu Figmassa

Olemme jo maininneet, että “Present”-vaihtoehtoa käytetään näyttämään asettelu selaimessa samanaikaisesti. Kun jaat tiedostosi julkisen linkin kautta, kaikki näkevät suunnittelusi linkin kautta suunnitellulle sivulle. Selaimen ylä- ja alatunniste näkyvät edelleen Figman esikatselussa. Tämä menetelmä ei sovellu sovelluksen suunnittelun testaamiseen. Siksi Figma tarjoaa toisen tavan tarkastella suunnittelun esikatselua mobiililaitteissa ja avata Figman URL-osoite puhelimen selaimessa.

Voit esikatsella mallia matkapuhelimellasi lataamalla Figma Mirror -ohjelman Figma-verkkosivuston latausosiosta. Figma Mirror -sovelluksen avulla voit tarkastella mallejasi puhelinmittakaavassa. Se säätää suunnittelusisältöä matkapuhelimesi leveyden ja pituuden mukaan. Tämä auttaa sinua tunnistamaan suunnitteluongelmasi nopeammin.

Ohjelmistokoulutus: Työskentely tasojen kanssa Figmassa

Figman työympäristö on hyvin samanlainen kuin Photoshopin, Illustratorin ja muiden suunnittelu- ja grafiikkaohjelmien ympäristö. Tämän ympäristön avulla voit sijoittaa useita elementtejä yhteen kerrokseen, yhdistää ne ja tehdä niistä näkymättömiä tarvittaessa. Voit tarkastella näitä ominaisuuksia pudottamalla joitain kohteita näytön keskelle ja valitsemalla ne vasemmalla olevasta valikosta pitämällä Ctrl-näppäintä painettuna ja napsauttamalla. Napsauta sitten hiiren kakkospainikkeella valittuja kohteita nähdäksesi tason ominaisuudet:

Ohjelmistokoulutus: Komponentin luominen Figmassa

Edellisen osion kuvassa kohteiden valinnan jälkeen näet, että ylävalikon keskelle on lisätty kolme vaihtoehtoa projektin nimen sijaan. Ensimmäinen vaihtoehto vasemmalta on luoda komponentti haluamistasi elementeistä. Voit helposti muuntaa yleisesti käytetyn osan suunnittelustasi komponentiksi Figma-suunnittelun muissa osissa.

Muita yläpalkin keskellä olevia vaihtoehtoja ovat maskin luominen ja mahdollisuus yhdistää elementtejä ryhmään.

Ohjelmistokoulutus: Ryhmän rakentaminen Figmassa

Jos työskentelet tiiminä, voit valita “Luo uusi tiimi” näytön vasemman reunan valikosta. Napsauttamalla tätä painiketta voit avata uuden sivun alla olevan kuvan mukaisesti ja voit valita ryhmän nimen:

Ryhmän luomisen jälkeen saat linkin, johon voit kutsua eri tiimin jäseniä ja helposti liittyä ryhmään.

Ohjelmiston opetusohjelma: Pikanäppäimet Figmassa

Kuten monissa muissakin suunnitteluohjelmissa, Figmassa on pikakuvakkeet, jotka helpottavat suunnitteluprosessia käyttäjille. Nämä näppäimet näkyvät Figma-ympäristön jokaisen ominaisuuden edessä. Myös Figman ohjeosiossa.

Sisällysluettelo