Hvordan lage en knapp i Figma

Designknappene på Figma kan lages på forskjellige måter ved å bruke komponent- og auto-layout-egenskaper på plattformen. Som sådan kan knapper tilpasses ved hjelp av etiketter, størrelser og ikoner. Hvis du ikke er sikker på hvordan du lager knapper på Figma, har du kommet til rett sted.

Denne artikkelen vil forklare hvordan du lager knapper og hvordan du får mest mulig ut av Figma.

Opprette en knapp

Knapper er vanlige elementer som brukes når man designer et funksjonelt brukergrensesnitt. Du kan lage en knapp i et Figma-design. Hvis du er ny på Figma, må du først forstå det grunnleggende.

Her er en trinn-for-trinn-veiledning for å lage knapper:

1. Lag et nytt Figma-design.
   
2. Legg til en ramme ved å trykke på F-tasten på tastaturet, og velg deretter "desktop" eller "phone".
   
3. Legg til et rektangel med 50px høyde og 200px breddedimensjoner ved å bruke R-tasten på tastaturet.
   
4. Legg til tekst ved å trykke "T" på tastaturet. Sentrer teksten slik at den er i midten av tekstboksen horisontalt og vertikalt.
   
5. Plasser denne tekstboksen i midten av rektangelet ditt.
   
6. Grupper komponentene slik du vil at de skal være.

Du kan legge til farger ved å lage noen ved å bruke fargevelgeren, eller du kan få tilgang til heksadesimale farger fra internett.

Kontrast

Tekstfargen i knappen avhenger av om den kontrasterer bedre med en svart eller hvit bakgrunn. Du kan bruke begge alternativene for å se hvilken som fungerer best. Hvis du ikke liker noen av alternativene, kan du justere knappestilen og fargen.

Opprette grunnleggende knapper

Det er tre grunnleggende knapper som kan opprettes på Figma.

Primærknapp

Primære knapper er ensfarget med svart eller hvit tekst. Denne knappen trekker brukerne når de bruker en app. Slik kan du lage en:

1. Velg en farge for knappen din.
2. Velg rektangelet, og bruk deretter den valgte fargen.
   
3. Fargetekst i hvitt eller svart, avhengig av bedre kontrast.
   

Sekundærknapp

Dette er vanligvis en hvit knapp, men omrisset med fargen du velger. Knappeteksten kan også ha samme farge. Dette er den nest viktigste knappen du kan lage. Det skal også trekke brukerens øyne.

1. Endre fargen på rektangelet ditt til hvitt (#FFFFFF).
   
2. Legg til et slag i rektangelet. Du kan velge fargen du foretrekker her.
   
3. Endre tekstfargen til å ha samme farge som teksten.
   

Tertiærknapp

Tertiære knapper er ikke like viktige som de to første. De kan fungere som koblingsknapper, avmeldingsknapper eller tilbakeknapper. De er ofte i ren tekst og kan være understreket i noen tilfeller.

1. Gjør rektangelet ditt hvitt uten slag.
   
2. Endre tekstfargen til det du foretrekker.
   

Du kan opprette en tertiær knapp som ligner en primær eller sekundær knapp. Du kan også endre slagbredden for å få bedre synlighet.

Lag en knapp med tekst, automatisk layout og farge

Med verktøyene på plattformen kan du få praktisk erfaring med Auto Layout og Tekstverktøy. Med trinn-til-trinn-veiledning bør det være relativt enkelt å lage en knapp. For å lage en knapp må du lage tekstlaget ditt, konvertere tekstlaget til en automatisk layoutramme og style knappen.

Opprette et tekstlag

I dette trinnet brukes tekstverktøyet.

1. Trykk på tekstverktøyet i verktøylinjen eller trykk på bokstaven "T."
   
2. Når tekstverktøyet er aktivt, trykk på lerretet ditt og skriv inn ordet "Knapp". Merk at tekstlagnavnet vil samsvare med det som er skrevet på lerretet med mindre det endres manuelt i lagpanelet.
   
3. Hvis lagnavnet må endres, dobbeltklikker du på venstre sidefelt og skriver inn det nye navnet du har valgt.
   

Nå kan du også leke med skriftstørrelsen ved å øke eller redusere den.

1. Velg tekstlaget ditt.
   
2. Naviger til høyre sidefelt, og endre skriftstørrelsen i "Tekst"-delen. Du kan også endre skrifttypen eller holde deg til standardalternativet.
   

Konverter tekstlaget til autooppsettrammer

På dette tidspunktet må knappen finjusteres ytterligere for å få den til å se glamorøs ut. Med autooppsettet kan du krydre ting litt mer. Automatisk layout er en kraftig funksjon på Figma og kan brukes for responsive design. Disse designene tilpasser seg automatisk til endringer som innholdsstørrelse, objektplassering og enhetstype.

Den automatiske layouten kan brukes for å gjøre lag om til rammer eller på eksisterende rammer. For å bruke oppsettet på en eksisterende ramme, velg tekstlaget ditt, og trykk deretter på "Shift" "A"-snarveien. Når oppsettet er tatt i bruk, vil du legge merke til noen endringer.

• Tekstlaget vil være innenfor en ramme. Automatisk layout brukes bare på komponenter og rammer, så Figma plasserer tekstlaget i den nye rammen automatisk. Rammen har ikke fyllfarge. Dette brukes i knappstilingstrinnet.
• Når du velger rammen, vises innstillinger for automatisk layout på høyre sidefelt. Autooppsettene kan finjusteres ytterligere.
• Du merker at rammen krymper og vokser med tekstendringer. Med slike dynamiske elementer sparer du tid på å designe innholdet som vises på forskjellige enheter eller oversettes til andre språk.

Styler knappen

Du kan starte med å legge til farge.

1. Velg et rammelag, og velg deretter "Fyllinnstillinger" i høyre sidefelt. Dette fyller fargen
   automatisk. Fargevelgeren endrer farge.
   
2. Velg tekstlaget og juster fyllet til #FFFFFF.
   
3. Velg rammen på nytt, og bruk deretter høyre sidefeltinnstilling for å justere hjørneradius.
   

Det neste er å fikse rammepolstringen. Etter at bokstavteksten er konvertert til et automatisk rammeoppsett, legges det automatisk til en utfylling mellom teksten og rammegrensen. Polstringen på dette punktet ser lik ut på alle sider. Du kan endre bunn- og topppolstringen til å være mindre enn høyre og venstre polstring.

Du kan oppdatere polstring som du vil. Venstre og høyre polstring eller topp- og bunnpolstring kan endres samtidig med snarveiene nedenfor:

• Hold <⌥ option=""> eller , og klikk deretter på utfyllingsområdet for å angi utfyllingsverdi for motsatte sider
• Hold <⌥ option=""> eller mens du drar i håndtakene for å endre polstring for motsatte sider

På dette tidspunktet ser knappen bra ut, men du kan fortsatt oppdatere etiketten. Du må dobbeltklikke på teksten for å tillate redigering. Skriv inn ordene "Registrer deg." Knappen endrer størrelse mens du skriver. Slik designer du en knapp ved hjelp av autolayout- og tekstverktøyet. Du kan nå prøve noe nytt, som å gjøre knappen om til en komponent eller legge til en variant.

Lage en klikkbar knapp

Figma brukes av selskaper som Uber, Facebook, Google og Netflix. Funksjonen for klikkbare knapper gjør det enklere for designere i slike selskaper å lage interaktive og klikkbare knapper. Knappene gjør navigeringen mye enklere på slike plattformer.

Slik utvikler du slike knapper i Figma:

1. Velg alternativet "Prototype" i menyen (til høyre).
   
2. Klikk på "Pluss" (+)-ikonet under Prototype-fanen. Dette lar deg legge til en interaksjon.
   
3. Velg "Ved klikk" i vinduet med interaksjonsdetaljer.
   
4. Velg alternativet "Åpne lenke".
   
5. Legg til sidekoblingen dit knappen vil lede når du har klikket.
   
6. Trykk på "X"-ikonet for å gå ut av vinduet med interaksjonsdetaljer.
   
7. Naviger til "Spill"-alternativknappen i øvre høyre hjørne.
   
8. Trykk på "Spill"-knappen for å få en forhåndsvisning av design.
   

Hvis du holder markøren over knappen, endres den til et håndlignende ikon. Dette indikerer at knappen nå er klikkbar.

Merk: Når du oppretter den klikkbare Figma-knappen, bruk alltid «Ved klikk», ikke «På dra». "Ved klikk" lar deg legge til en klikkbar lenke til knappen mulig. "På dra"-knapper kan ikke klikkes.

Design bedre med Figma-knapper

Figma-knapper har variabler som tema, tilstand, intern polstring, bordlengde, bredde og høyde. Ved å lære hvordan du lager knapper på plattformen, kan du få mest mulig ut av Figma og legge til verdibrukende komponenter i Figma-biblioteket.

Har du prøvd å lage knapper på Figma? Hvis ja, hvordan var din erfaring? Gi oss beskjed i kommentarfeltet nedenfor.