Kuinka luoda painike Figmaan

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.

Kuinka luoda painike Figmaan

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.
    Kuinka luoda painike Figmaan
  2. Lisää kehys painamalla näppäimistön F-näppäintä ja valitse sitten "työpöytä" tai "puhelin".
    Kuinka luoda painike Figmaan
  3. Lisää näppäimistön R-näppäimellä suorakulmio, jonka mitat ovat 50 pikseliä ja leveys 200 pikseliä.
    Kuinka luoda painike Figmaan
  4. Lisää tekstiä painamalla näppäimistön T-näppäintä. Keskitä tekstisi niin, että se on tekstilaatikon keskellä vaaka- ja pystysuunnassa.
    Kuinka luoda painike Figmaan
  5. Aseta tämä tekstilaatikko suorakulmion keskelle.
    Kuinka luoda painike Figmaan
  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ä.
    Kuinka luoda painike Figmaan
  3. Väritä teksti valkoiseksi tai mustaksi paremman kontrastin mukaan.
    Kuinka luoda painike Figmaan

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).
    Kuinka luoda painike Figmaan
  2. Lisää suorakulmioon viiva. Voit valita haluamasi värin tästä.
    Kuinka luoda painike Figmaan
  3. Muuta tekstisi väriä niin, että se on samanvärinen kuin teksti.
    Kuinka luoda painike Figmaan

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.
    Kuinka luoda painike Figmaan
  2. Vaihda tekstin väri haluamaksesi.
    Kuinka luoda painike Figmaan

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.
    Kuinka luoda painike Figmaan
  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.
    Kuinka luoda painike Figmaan
  3. Jos tason nimi on vaihdettava, kaksoisnapsauta vasenta sivupalkkia ja kirjoita sitten valitsemasi uusi nimi.
    Kuinka luoda painike Figmaan

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

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

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ä.
    Kuinka luoda painike Figmaan
  2. Valitse tekstitaso ja säädä täyttö arvoon #FFFFFF.
    Kuinka luoda painike Figmaan
  3. Valitse kehys uudelleen ja säädä kulman säde oikeanpuoleisella sivupalkin asetuksella.
    Kuinka luoda painike Figmaan

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

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.


10 parasta pikanäppäintä Windows 10:ssä ja niiden käyttö

10 parasta pikanäppäintä Windows 10:ssä ja niiden käyttö

Tutustu Windows 10:n 10 suosituimpaan pikanäppäimeen ja siihen, miten voit hyödyntää niitä tehokkaasti töissä, koulussa ja muissa asioissa.

BitLockerin käytön aloittaminen, Windows 10:n sisäänrakennettu täyden levyn salaustyökalu

BitLockerin käytön aloittaminen, Windows 10:n sisäänrakennettu täyden levyn salaustyökalu

Opas BitLockerin käyttöön, Windows 10:n tehokkaaseen salausominaisuuteen. Ota BitLocker käyttöön ja suojaa tiedostosi helposti.

Microsoft Edge -selaushistorian tarkasteleminen tai poistaminen

Microsoft Edge -selaushistorian tarkasteleminen tai poistaminen

Opas Microsoft Edge -selaushistorian tarkastelemiseen ja poistamiseen Windows 10:ssä. Saat hyödyllisiä vinkkejä ja ohjeita.

Kuinka löytää ja poistaa tallennettuja salasanoja Microsoft Edgessä

Kuinka löytää ja poistaa tallennettuja salasanoja Microsoft Edgessä

Katso, kuinka voit pitää salasanasi Microsoft Edgessä hallinnassa ja estää selainta tallentamasta tulevia salasanoja.

Discord-tekstin muotoiluopas: värit, lihavoitu, kursivoitu, yliviivattu

Discord-tekstin muotoiluopas: värit, lihavoitu, kursivoitu, yliviivattu

Kuinka eristää tekstin muotoilua Discordissa? Tässä on opas, joka kertoo, kuinka Discord-teksti värjätään, lihavoidaan, kursivoitu ja yliviivataan.

Mikä tietokone minulla on? Kuinka tietää tärkeimmät tiedot ja malli

Mikä tietokone minulla on? Kuinka tietää tärkeimmät tiedot ja malli

Tässä viestissä käsittelemme yksityiskohtaisen oppaan, joka auttaa sinua selvittämään "Mikä tietokone minulla on?" ja niiden tärkeimmät tekniset tiedot sekä mallin nimen.

Viimeisen istunnon palauttaminen Microsoft Edge Chromessa, Firefoxissa, Internet Explorerissa

Viimeisen istunnon palauttaminen Microsoft Edge Chromessa, Firefoxissa, Internet Explorerissa

Palauta viimeinen istunto helposti Microsoft Edgessä, Google Chromessa, Mozilla Firefoxissa ja Internet Explorerissa. Tämä temppu on kätevä, kun suljet vahingossa minkä tahansa välilehden selaimessa.

Kuinka saada Boogie Down Emote Fortnitessa ilmaiseksi?

Kuinka saada Boogie Down Emote Fortnitessa ilmaiseksi?

Jos haluat saada Boogie Down Emoten Fortnitessa ilmaiseksi, sinun on otettava käyttöön ylimääräinen suojakerros, eli 2F-todennus. Lue tämä saadaksesi tietää, miten se tehdään!

Kuinka muuttaa hiiren asetuksia Windows 10:ssä

Kuinka muuttaa hiiren asetuksia Windows 10:ssä

Windows 10 tarjoaa useita mukautusvaihtoehtoja hiirelle, joten voit joustaa, miten kohdistin toimii. Tässä oppaassa opastamme sinut läpi käytettävissä olevat asetukset ja niiden vaikutuksen.

Kuinka päästä eroon Instagramissa estettyjen toimien -ongelmasta

Kuinka päästä eroon Instagramissa estettyjen toimien -ongelmasta

Saatko "Toiminto estetty Instagramissa" -virheen? Katso tämä vaihe vaiheelta opas poistaaksesi tämän toiminnon, joka on estetty Instagramissa muutamalla yksinkertaisella temppulla!