Kuinka luoda painike Figmaan

Figman suunnittelupainikkeita voidaan luoda eri tavoin hyödyntämällä alustan komponentti- ja automaattisen asettelun ominaisuuksia. Sellaisenaan painikkeita voidaan mukauttaa käyttämällä tarroja, kokoja ja kuvakkeita. Jos et ole varma kuinka luoda painikkeita Figmassa, olet tullut oikeaan paikkaan.

Tässä artikkelissa kerrotaan, kuinka painikkeita luodaan ja miten Figmasta saadaan kaikki irti.

Painikkeen luominen

Painikkeet ovat yleisiä elementtejä, joita käytetään suunniteltaessa toimivaa käyttöliittymää. Voit luoda painikkeen Figma-malliin. Jos olet uusi Figma, sinun on ensin ymmärrettävä perusasiat.

Tässä on vaiheittainen opas painikkeiden luomiseen:

1. Luo uusi Figma-design.
   
2. Lisää kehys painamalla näppäimistön F-näppäintä ja valitse sitten "työpöytä" tai "puhelin".
   
3. Lisää näppäimistön R-näppäimellä suorakulmio, jonka mitat ovat 50 pikseliä ja leveys 200 pikseliä.
   
4. Lisää tekstiä painamalla näppäimistön T-näppäintä. Keskitä tekstisi niin, että se on tekstilaatikon keskellä vaaka- ja pystysuunnassa.
   
5. Aseta tämä tekstilaatikko suorakulmion keskelle.
   
6. Ryhmittele komponentit haluamallasi tavalla.

Voit lisätä värejä luomalla niitä värivalitsimella tai päästä käsiksi heksadesimaaliväreihin Internetistä.

Kontrasti

Painikkeen tekstin väri riippuu siitä, erottuuko se paremmin mustan vai valkoisen taustan kanssa. Voit käyttää molempia vaihtoehtoja nähdäksesi, kumpi toimii parhaiten. Jos et pidä mistään vaihtoehdoista, voit säätää painikkeen tyyliä ja väriä.

Peruspainikkeiden luominen

Figmaan voidaan luoda kolme peruspainiketta.

Ensisijainen painike

Ensisijaiset painikkeet ovat yksivärisiä, ja niissä on musta tai valkoinen teksti. Tämä painike piirtää käyttäjät, kun he käyttävät sovellusta. Näin voit luoda sellaisen:

1. Valitse painikkeellesi väri.
2. Valitse suorakulmio ja käytä sitten valittua väriä.
   
3. Väritä teksti valkoiseksi tai mustaksi paremman kontrastin mukaan.
   

Toissijainen painike

Tämä on yleensä valkoinen painike, mutta ääriviivat valitsemasi värin mukaan. Painikkeen teksti voi olla myös samanvärinen. Tämä on toiseksi tärkein painike, jonka voit luoda. Sen tulee myös vetää käyttäjän silmät.

1. Muuta suorakulmion väri valkoiseksi (#FFFFFF).
   
2. Lisää suorakulmioon viiva. Voit valita haluamasi värin tästä.
   
3. Muuta tekstisi väriä niin, että se on samanvärinen kuin teksti.
   

Kolmannen asteen painike

Kolmannen asteen painikkeet eivät ole yhtä tärkeitä kuin kaksi ensimmäistä. Ne voivat toimia linkki-, tilauksen peruutus- tai paluupainikkeina. Ne ovat usein pelkkänä tekstinä, ja ne voidaan joissain tapauksissa alleviivata.

1. Tee suorakulmiostasi valkoinen ilman vetoa.
   
2. Vaihda tekstin väri haluamaksesi.
   

Voit luoda kolmannen tason painikkeen, joka muistuttaa ensisijaista tai toissijaista painiketta. Voit myös muuttaa iskun leveyttä parantaaksesi näkyvyyttä.

Luo painike käyttämällä tekstiä, automaattista asettelua ja värejä

Alustalla olevien työkalujen avulla voit saada käytännön kokemusta automaattisen asettelun ja tekstityökalun käytöstä. Vaiheittaisten ohjeiden avulla painikkeen luomisen pitäisi olla suhteellisen helppoa. Painikkeen luomiseksi sinun on luotava tekstikerros, muutettava tekstitaso automaattiseksi asettelukehykseksi ja muotoiltava painike.

Tekstikerroksen luominen

Tässä vaiheessa käytetään tekstityökalua.

1. Napauta tekstityökalua työkalupalkissa tai paina T-kirjainta.
   
2. Kun Teksti-työkalu on aktiivinen, napauta kangastasi ja kirjoita sana "Button". Huomaa, että tekstitason nimi vastaa mitä tahansa kankaalle kirjoitettua, ellei sitä ole muutettu manuaalisesti tasot-paneelissa.
   
3. Jos tason nimi on vaihdettava, kaksoisnapsauta vasenta sivupalkkia ja kirjoita sitten valitsemasi uusi nimi.
   

Nyt voit myös leikkiä kirjasinkoolla suurentamalla tai pienentämällä sitä.

1. Valitse tekstitasosi.
   
2. Siirry oikeaan sivupalkkiin ja muuta fonttikokoa "Teksti"-osiossa. Voit myös vaihtaa fonttia tai pysyä oletusasetuksessa.
   

Muunna tekstitasosi automaattisiksi asettelukehyksiksi

Tässä vaiheessa painiketta on säädettävä lisää, jotta se näyttää glamourilta. Automaattisen asettelun avulla voit piristää asioita hieman enemmän. Automaattinen asettelu on Figman tehokas ominaisuus, ja sitä voidaan soveltaa reagoiviin malleihin. Nämä mallit mukautuvat automaattisesti muutoksiin, kuten sisällön kokoon, objektien sijoitteluun ja laitetyyppiin.

Automaattista asettelua voidaan soveltaa tasojen muuttamiseksi kehyksiksi tai olemassa oleviin kehyksiin. Jos haluat käyttää asettelua olemassa olevaan kehykseen, valitse tekstitaso ja paina sitten "Shift" "A"-pikanäppäintä. Kun asettelu on otettu käyttöön, huomaat joitain muutoksia.

• Tekstitaso on kehyksen sisällä. Automaattista asettelua sovelletaan vain komponentteihin ja kehyksiin, joten Figma sijoittaa tekstikerroksen automaattisesti uuteen kehykseen. Kehyksessä ei ole täyttöväriä. Tätä käytetään painikkeiden muotoiluvaiheessa.
• Kun valitset kehystä, automaattisen asettelun asetukset näkyvät oikeassa sivupalkissa. Automaattisia asetteluja voidaan muokata edelleen.
• Huomaat, että kehys kutistuu ja kasvaa tekstin muutosten myötä. Tällaisilla dynaamisilla elementeillä säästät aikaa, joka kuluu eri laitteilla katsotun tai muille kielille käännetyn sisällön suunnitteluun.

Painikkeen muotoilu

Voit aloittaa lisäämällä väriä.

1. Valitse kehystaso ja valitse sitten "Täyttöasetukset" oikeasta sivupalkista. Tämä täyttää värin
   automaattisesti. Värinvalitsin muuttaa väriä.
   
2. Valitse tekstitaso ja säädä täyttö arvoon #FFFFFF.
   
3. Valitse kehys uudelleen ja säädä kulman säde oikeanpuoleisella sivupalkin asetuksella.
   

Seuraava asia on korjata rungon pehmuste. Kun kirjainteksti on muunnettu automaattiseksi kehysasetteluksi, tekstin ja kehyksen rajan väliin lisätään automaattisesti täyte. Pehmuste näyttää tässä vaiheessa samanlaiselta kaikilta puolilta. Voit muuttaa ala- ja yläpehmusteen pienemmäksi kuin oikea ja vasen pehmuste.

Voit päivittää pehmusteita haluamallasi tavalla. Vasen ja oikea pehmuste tai ylä- ja alapehmuste voidaan vaihtaa samanaikaisesti alla olevilla pikanäppäimillä:

• Pidä <⌥ option=""> tai -näppäintä painettuna ja napsauta sitten täytealuetta syöttääksesi täytearvon vastakkaisille puolille
• Pidä <⌥ option="">-painiketta painettuna tai samalla kun vedät kahvoja vaihtaaksesi vastakkaisten sivujen pehmusteita

Tässä vaiheessa painike näyttää hyvältä, mutta voit silti päivittää tarran. Sinun täytyy kaksoisnapsauttaa tekstiä salliaksesi muokkaamisen. Kirjoita sanat "Rekisteröidy". Painikkeen koko muuttuu kirjoittaessasi. Näin suunnittelet painikkeen käyttämällä automaattista asettelu- ja tekstityökalua. Voit nyt kokeilla jotain uutta, kuten muuttaa painikkeesta komponenttia tai lisätä muunnelman.

Napsautettavan painikkeen tekeminen

Figmaa käyttävät yritykset, kuten Uber, Facebook, Google ja Netflix. Napsautettavan painikkeen ansiosta tällaisten yritysten suunnittelijoiden on helpompi luoda interaktiivisia ja klikattavia painikkeita. Painikkeet helpottavat navigointia huomattavasti tällaisilla alustoilla.

Näin voit kehittää tällaisia ​​painikkeita Figmassa:

1. Valitse "Prototyyppi" -vaihtoehto valikosta (oikealla).
   
2. Napsauta Prototyyppi-välilehden alla olevaa Plus-kuvaketta (+). Tämän avulla voit lisätä vuorovaikutuksen.
   
3. Valitse "Klikkaus" vuorovaikutuksen tietoikkunasta.
   
4. Valitse "Avaa linkki" -vaihtoehto.
   
5. Lisää sivun linkki, jolle painike ohjaa, kun sitä on napsautettu.
   
6. Napauta X-kuvaketta poistuaksesi Vuorovaikutuksen tiedot -ikkunasta.
   
7. Siirry oikeassa yläkulmassa olevaan "Toista" -vaihtoehtopainikkeeseen.
   
8. Napauta "Toista" -painiketta saadaksesi suunnittelun esikatselun.
   

Jos siirrät osoittimen painikkeesi päälle, se muuttuu käden kaltaiseksi kuvakkeeksi. Tämä osoittaa, että painiketta voi nyt napsauttaa.

Huomautus: Kun luot napsautettavan Figma-painikkeen, käytä aina "Klikkaus", ei "Vedä" -toimintoa. "Klikkaus" mahdollistaa napsautettavan linkin lisäämisen painikkeeseen. "Vedä"-painikkeita ei voi napsauttaa.

Suunnittele paremmin Figma-painikkeilla

Figma-painikkeilla on muuttujia, kuten teema, tila, sisäinen täyte, pöydän pituus, leveys ja korkeus. Opettelemalla luomaan painikkeita alustalla voit ottaa Figmasta kaiken irti ja lisätä arvoa käyttäviä komponentteja Figma-kirjastoon.

Oletko kokeillut luoda painikkeita Figmaan? Jos on, millainen oli kokemuksesi? Kerro meille alla olevassa kommenttiosassa.