Sådan opretter du en knap i Figma

Designknapperne på Figma kan oprettes på forskellige måder ved at bruge komponent- og auto-layout-egenskaber på platformen. Som sådan kan knapper tilpasses ved hjælp af etiketter, størrelser og ikoner. Hvis du ikke er sikker på, hvordan du opretter knapper på Figma, er du kommet til det rigtige sted.

Denne artikel vil forklare, hvordan du opretter knapper, og hvordan du får mest muligt ud af Figma.

Oprettelse af en knap

Knapper er almindelige elementer, der bruges, når man designer en funktionel brugergrænseflade. Du kan oprette en knap i et Figma-design. Hvis du er ny til Figma, skal du først forstå det grundlæggende.

Her er en trin-for-trin guide til oprettelse af knapper:

1. Opret et nyt Figma-design.
   
2. Tilføj en ramme ved at trykke på F-tasten på dit tastatur, og vælg derefter "desktop" eller "telefon".
   
3. Tilføj et rektangel med 50px højde og 200px breddedimensioner ved hjælp af tastaturets R-tast.
   
4. Tilføj tekst ved at trykke på "T" på dit tastatur. Centrer din tekst, så den er i midten af ​​din tekstboks vandret og lodret.
   
5. Placer denne tekstboks i midten af ​​dit rektangel.
   
6. Gruppér komponenter, som du ønsker, de skal være.

Du kan tilføje farver ved at oprette nogle ved hjælp af farvevælgeren, eller du kan få adgang til hexadecimale farver fra internettet.

Kontrast

Tekstfarven i knappen afhænger af, om den kontrasterer bedre med en sort eller hvid baggrund. Du kan bruge begge muligheder for at se, hvilken der fungerer bedst. Hvis du ikke kan lide nogen af ​​mulighederne, kan du justere knappens stil og farve.

Oprettelse af grundlæggende knapper

Der er tre grundlæggende knapper, der kan oprettes på Figma.

Primær knap

Primære knapper er ensfarvede med sort eller hvid tekst. Denne knap tegner brugerne, når de bruger en app. Sådan kan du oprette en:

1. Vælg en farve til din knap.
2. Vælg rektanglet, og anvend derefter den valgte farve.
   
3. Farve tekst i hvid eller sort, afhængig af den bedre kontrast.
   

Sekundær knap

Dette er normalt en hvid knap, men omridset med den farve, du vælger. Knappens tekst kan også have samme farve. Dette er den næstvigtigste knap, du kan oprette. Det skal også trække brugerens øjne.

1. Skift farven på dit rektangel til hvid (#FFFFFF).
   
2. Tilføj et streg i rektanglet. Du kan vælge den farve du foretrækker her.
   
3. Skift din tekstfarve til at have samme farve som teksten.
   

Tertiær knap

Tertiære knapper er ikke så vigtige som de to første. De kan fungere som link, afmeld eller tilbage-knapper. De er ofte i almindelig tekst og kan være understreget i nogle tilfælde.

1. Gør dit rektangel hvidt uden streg.
   
2. Skift tekstfarven til den, du foretrækker.
   

Du kan oprette en tertiær knap, der ligner en primær eller sekundær knap. Du kan også ændre stregbredden for at få bedre synlighed.

Opret en knap ved hjælp af tekst, automatisk layout og farve

Med værktøjerne på platformen kan du få praktisk erfaring med at bruge Auto Layout og Tekstværktøj. Med trin-til-trin-vejledning bør oprettelsen af ​​en knap være forholdsvis enkel at opnå. For at oprette en knap skal du oprette dit tekstlag, konvertere dit tekstlag til en automatisk layoutramme og style din knap.

Oprettelse af et tekstlag

I dette trin bruges tekstværktøjet.

1. Tryk på tekstværktøjet på værktøjslinjen eller tryk på bogstavet "T".
   
2. Når tekstværktøjet er aktivt, skal du trykke på dit lærred og indtaste ordet "Knap". Bemærk, at tekstlagets navn vil matche det, der er skrevet på lærredet, medmindre det manuelt ændres i lagpanelet.
   
3. Hvis lagets navn skal ændres, skal du dobbeltklikke på venstre sidebjælke og derefter indtaste det nye navn, du har valgt.
   

Nu kan du også lege med skriftstørrelsen ved at øge eller formindske den.

1. Vælg dit tekstlag.
   
2. Naviger til højre sidebjælke, og skift skriftstørrelsen i afsnittet "Tekst". Du kan også ændre skrifttypen eller holde dig til standardindstillingen.
   

Konverter dit tekstlag til auto-layoutrammer

På dette tidspunkt skal knappen justeres yderligere for at få den til at se glamourøs ud. Med autolayoutet kan du pifte tingene lidt mere op. Automatisk layout er en kraftfuld funktion på Figma og kan anvendes til responsive designs. Disse designs tilpasser sig automatisk til ændringer som indholdsstørrelse, objektplacering og enhedstype.

Det automatiske layout kan anvendes til at omdanne lag til rammer eller til eksisterende rammer. For at anvende layoutet på en eksisterende ramme skal du vælge dit tekstlag og derefter trykke på "Shift" "A" genvejen. Når layoutet er blevet anvendt, vil du bemærke nogle ændringer.

• Tekstlaget vil være inden for en ramme. Automatisk layout anvendes kun på komponenter og rammer, så Figma placerer tekstlaget i den nye ramme automatisk. Rammen har ikke en fyldfarve. Dette anvendes i knapstilingstrinnet.
• Når du vælger din ramme, vises automatiske layoutindstillinger i højre sidebjælke. De automatiske layouts kan justeres yderligere.
• Du bemærker, at rammen krymper og vokser med tekstændringer. Med sådanne dynamiske elementer sparer du tid på at designe indholdet, der ses på forskellige enheder eller oversættes til andre sprog.

Styling af knappen

Du kan starte med at tilføje farve.

1. Vælg et rammelag, og vælg derefter "Fyldindstillinger" i højre sidebjælke. Dette udfylder farven
   automatisk. Farvevælgeren ændrer farve.
   
2. Vælg tekstlaget og juster fyldningen til #FFFFFF.
   
3. Vælg rammen igen, og brug derefter indstillingen til højre sidebjælke til at justere hjørneradius.
   

Den næste ting er at ordne rammens polstring. Når bogstavteksten er konverteret til et automatisk rammelayout, tilføjes der automatisk en polstring mellem teksten og rammegrænsen. På dette tidspunkt virker polstringen ens på alle sider. Du kan ændre den nederste og øverste polstring til at være mindre end den højre og venstre polstring.

Du kan opdatere polstring, som du vil. Venstre og højre polstring eller top og bund polstring kan ændres på samme tid med genvejene nedenfor:

• Hold <⌥ option=""> eller nede, og klik derefter på polstringsområdet for at indtaste polstringsværdi for modsatte sider
• Hold <⌥ option=""> nede, eller mens du trækker i håndtagene for at ændre polstring for modsatte sider

På dette tidspunkt ser knappen godt ud, men du kan stadig opdatere etiketten. Du skal dobbeltklikke på teksten for at tillade redigering. Skriv ordene "Tilmeld dig". Knappen ændrer størrelse, mens du skriver. Sådan designer du en knap ved hjælp af autolayout- og tekstværktøjet. Du kan nu prøve noget nyt, som at gøre knappen til en komponent eller tilføje en variant.

Lav en klikbar knap

Figma bruges af virksomheder som Uber, Facebook, Google og Netflix. Funktionen med klikbare knap gør det nemmere for designere i sådanne virksomheder at skabe interaktive og klikbare knapper. Knapperne gør navigation meget lettere på sådanne platforme.

Sådan udvikler du sådanne knapper i Figma:

1. Vælg "Prototype" i menuen (højre).
   
2. Klik på ikonet "Plus" (+) under fanen Prototype. Dette giver dig mulighed for at tilføje en interaktion.
   
3. Vælg "Ved klik" i vinduet med interaktionsdetaljer.
   
4. Vælg muligheden "Åbn link".
   
5. Tilføj sidelinket, hvor knappen dirigerer, når der er klikket på den.
   
6. Tryk på "X"-ikonet for at forlade vinduet med interaktionsdetaljer.
   
7. Naviger til "Afspil"-indstillingsknappen i øverste højre hjørne.
   
8. Tryk på knappen "Afspil" for at få en forhåndsvisning af design.
   

Hvis du holder markøren over din knap, ændres den til et håndlignende ikon. Dette indikerer, at knappen nu er klikbar.

Bemærk: Når du opretter den klikbare Figma-knap, skal du altid bruge "Ved klik", ikke "Ved træk." "Ved klik" giver mulighed for at tilføje et klikbart link til knappen muligt. "Til træk"-knapper kan ikke klikkes.

Design bedre med Figma-knapper

Figma-knapper har variabler som tema, tilstand, intern polstring, bordlængde, bredde og højde. Ved at lære, hvordan du opretter knapper på platformen, kan du få mest muligt ud af Figma og tilføje værdi-brugende komponenter i Figma-biblioteket.

Har du prøvet at oprette knapper på Figma? Hvis ja, hvordan var din oplevelse? Fortæl os det i kommentarfeltet nedenfor.