Hvernig á að búa til hnapp í Figma

Hægt er að búa til hönnunarhnappana á Figma á mismunandi vegu með því að nota eiginleika íhluta og sjálfvirkrar útsetningar á pallinum. Sem slíkur er hægt að aðlaga hnappa með því að nota merki, stærðir og tákn. Ef þú ert ekki viss um hvernig á að búa til hnappa á Figma, þá ertu kominn á réttan stað.

Þessi grein mun útskýra hvernig á að búa til hnappa og hvernig á að fá sem mest út úr Figma.

Að búa til hnapp

Hnappar eru algengir þættir sem notaðir eru þegar hannað er hagnýtt notendaviðmót. Þú getur búið til hnapp í Figma hönnun. Ef þú ert nýr í Figma, verður þú fyrst að skilja grunnatriðin.

Hér er skref-fyrir-skref leiðbeiningar til að búa til hnappa:

1. Búðu til nýja Figma hönnun.
   
2. Bættu við ramma með því að ýta á F takkann á lyklaborðinu þínu og veldu síðan „skrifborð“ eða „sími“.
   
3. Bættu við rétthyrningi með 50px hæð og 200px breidd með því að nota R lyklaborðið.
   
4. Bættu við texta með því að ýta á „T“ á lyklaborðinu þínu. Miðjaðu textann þannig að hann sé í miðjum textareitnum þínum lárétt og lóðrétt.
   
5. Settu þennan textareit í miðjum rétthyrningnum þínum.
   
6. Flokkaðu íhluti eins og þú vilt að þeir séu.

Þú getur bætt við litum með því að búa til nokkra með því að nota litavakkann, eða þú getur fengið aðgang að sextánslitum af internetinu.

Andstæða

Textaliturinn innan hnappsins fer eftir því hvort hann er betri andstæður við svartan eða hvítan bakgrunn. Þú getur notað báða valkostina til að sjá hver virkar best. Ef þér líkar ekki við neinn af valkostunum geturðu stillt hnappastíl og lit.

Að búa til grunnhnappa

Það eru þrír grunnhnappar sem hægt er að búa til á Figma.

Aðalhnappur

Aðalhnappar eru heilir litir með svörtum eða hvítum texta. Þessi hnappur dregur notendur þegar þeir nota app. Svona geturðu búið til einn:

1. Veldu lit fyrir hnappinn þinn.
2. Veldu rétthyrninginn og notaðu síðan valinn lit.
   
3. Litur texti í hvítu eða svörtu, allt eftir betri birtuskilum.
   

Aukahnappur

Þetta er venjulega hvítur hnappur en útlínur með litnum sem þú velur. Hnappatextinn getur líka borið sama lit. Þetta er annar mikilvægasti hnappurinn sem þú getur búið til. Það ætti einnig að draga augu notandans.

1. Breyttu litnum á rétthyrningnum þínum í hvítt (#FFFFFF).
   
2. Í rétthyrningnum skaltu bæta við höggi. Þú getur valið litinn sem þú kýst hér.
   
3. Breyttu textalitnum þínum til að bera sama lit og textinn.
   

Þrjú háskólahnappur

Hnappar á háskólastigi eru ekki eins mikilvægir og fyrstu tveir. Þeir geta virkað sem hlekkur, afskráning eða til baka hnappar. Þau eru oft í einföldum texta og geta verið undirstrikuð í sumum tilfellum.

1. Gerðu rétthyrninginn þinn hvítan án höggs.
   
2. Breyttu textalitnum í það sem þú vilt.
   

Þú getur búið til háskólahnapp sem líkist aðal- eða aukahnappi. Þú getur líka breytt höggbreiddinni til að fá betra sýnileika.

Búðu til hnapp með texta, sjálfvirku útliti og lit

Með verkfærunum á pallinum geturðu fengið praktíska reynslu af því að nota sjálfvirkt útlit og textatól. Með skref-til-skref leiðbeiningum ætti það að vera tiltölulega einfalt að búa til hnapp. Til að búa til hnapp þarftu að búa til textalagið þitt, breyta textalagið í sjálfvirkan útlitsramma og stíla hnappinn þinn.

Að búa til textalag

Í þessu skrefi er textatólið notað.

1. Smelltu á textatólið á tækjastikunni eða ýttu á bókstafinn „T“.
   
2. Þegar textatólið er virkt skaltu smella á striga þinn og slá inn orðið „Hnappur“. Athugaðu að heiti textalags mun passa við það sem er slegið inn á striga nema því sé breytt handvirkt innan lagaborðsins.
   
3. Ef breyta þarf heiti lagsins, tvísmelltu á vinstri hliðarstikuna og sláðu síðan inn nýja nafnið sem þú hefur valið.
   

Nú geturðu líka leikið þér með leturstærð með því að auka eða minnka hana.

1. Veldu textalagið þitt.
   
2. Farðu í hægri hliðarstikuna og breyttu leturstærð í „Texti“ hlutanum. Þú getur líka breytt leturgerðinni eða haldið þig við sjálfgefna valmöguleikann.
   

Umbreyttu textalaginu þínu í ramma fyrir sjálfvirka útsetningu

Á þessum tímapunkti þarf að fínstilla hnappinn frekar til að hann líti glæsilega út. Með sjálfvirku skipulaginu geturðu kryddað hlutina aðeins meira. Sjálfvirkt skipulag er öflugur eiginleiki á Figma og hægt er að nota hann fyrir móttækilega hönnun. Þessi hönnun laga sig sjálfkrafa að breytingum eins og efnisstærð, staðsetningu hlutar og gerð tækis.

Hægt er að nota sjálfvirka útlitið til að breyta lögum í ramma eða á núverandi ramma. Til að nota útlitið á núverandi ramma, veldu textalagið þitt og ýttu síðan á „Shift“ „A“ flýtileiðina. Þegar útlitinu hefur verið beitt muntu taka eftir nokkrum breytingum.

• Textalagið verður innan ramma. Sjálfvirk uppsetning er aðeins notuð á íhluti og ramma, þannig að Figma setur textalagið sjálfkrafa inn í nýja rammann. Ramminn er ekki með fyllingarlit. Þetta er notað í hnappastílskrefinu.
• Þegar rammi er valinn birtast sjálfvirkar útlitsstillingar á hægri hliðarstikunni. Hægt er að fínstilla sjálfvirka uppsetninguna frekar.
• Þú tekur eftir því að ramminn minnkar og stækkar með breytingum á texta. Með slíkum kraftmiklum þáttum spararðu tíma sem tekur að hanna efnið sem skoðað er á ýmsum tækjum eða þýtt á önnur tungumál.

Stíll á hnappinn

Þú getur byrjað á því að bæta við lit.

1. Veldu rammalag og veldu síðan „Uppfyllingarstillingar“ í hægri hliðarstikunni. Þetta fyllir litinn
   sjálfkrafa. Litavali breytir um lit.
   
2. Veldu textalagið og stilltu fyllinguna í #FFFFFF.
   
3. Veldu rammann aftur og notaðu síðan hægri hliðarstikuna til að stilla hornradíusinn.
   

Það næsta er að laga rammafyllinguna. Eftir að bréfatextanum hefur verið breytt í sjálfvirkt rammaútlit er fylling sjálfkrafa bætt á milli textans og rammans. Bólstrunin á þessum tímapunkti virðist jafn á öllum hliðum. Þú getur breytt botn- og efri bólstrun til að vera minni en hægri og vinstri bólstrun.

Þú getur uppfært fyllingu eins og þú vilt. Hægt er að breyta vinstri og hægri bólstrun eða efri og neðri bólstrun á sama tíma með flýtivísunum hér að neðan:

• Haltu <⌥ option=""> eða , smelltu síðan á fyllingarsvæðið til að slá inn fyllingargildi fyrir gagnstæðar hliðar
• Haltu <⌥ option=""> inni eða á meðan þú dregur handföng til að breyta bólstrun fyrir gagnstæðar hliðar

Á þessum tímapunkti lítur hnappurinn vel út, en þú getur samt uppfært merkimiðann. Þú þarft að tvísmella á textann til að leyfa breytingar. Sláðu inn orðin „Skráðu þig“. Hnappurinn breytist um leið og þú skrifar. Svona hannar þú hnapp með því að nota sjálfvirka útlits- og textatólið. Þú getur nú prófað eitthvað nýtt, eins og að breyta hnappnum í íhlut eða bæta við afbrigði.

Að búa til smellanlegan hnapp

Figma er notað af fyrirtækjum eins og Uber, Facebook, Google og Netflix. Smellanlega hnappaeiginleikinn auðveldar hönnuðum í slíkum fyrirtækjum að búa til gagnvirka og smellanlega hnappa. Hnapparnir gera siglingar mun auðveldari á slíkum kerfum.

Hér er hvernig á að þróa slíka hnappa í Figma:

1. Veldu valkostinn „Frumgerð“ í valmyndinni (hægri).
   
2. Smelltu á „Plus“ (+) táknið sem er fyrir neðan frumgerð flipann. Þetta gerir þér kleift að bæta við víxlverkun.
   
3. Veldu „Við smell“ í glugganum með upplýsingum um samskipti.
   
4. Veldu valkostinn „Opna tengil“.
   
5. Bættu við síðutenglinum þar sem hnappurinn mun vísa þegar smellt er á hann.
   
6. Bankaðu á „X“ táknið til að fara úr glugganum með upplýsingum um samskipti.
   
7. Farðu í "Play" valmöguleikahnappinn í efra hægra horninu.
   
8. Pikkaðu á „Play“ hnappinn til að fá forskoðun á hönnun.
   

Ef þú heldur bendilinum yfir hnappinn þinn breytist hann í hand-eins tákn. Þetta gefur til kynna að nú sé hægt að smella á hnappinn.

Athugaðu: Þegar þú býrð til smellanlega Figma hnappinn skaltu alltaf nota „við smell“ ekki „við drátt“. „Við smell“ gerir kleift að bæta smellanlegum hlekk við hnappinn mögulega. Ekki er hægt að smella á „Á drag“ hnappa.

Hannaðu betur með Figma hnöppum

Figma hnappar hafa breytur eins og þema, ástand, innri fyllingu, lengd borðs, breidd og hæð. Með því að læra hvernig á að búa til hnappa á pallinum geturðu fengið sem mest út úr Figma og bætt við virðisaukahluta í Figma bókasafninu.

Hefurðu prófað að búa til hnappa á Figma? Ef svo er, hvernig var reynsla þín? Láttu okkur vita í athugasemdahlutanum hér að neðan.