Hvordan lage en rullbar eiendel i Figma

Å gjøre innholdet ditt rullbart i Figma innebærer å navigere i sidefanen. Dessverre vises det ikke automatisk på hovedbrukergrensesnittet. Rullbart innhold er nyttig når du vil presentere mye informasjon innenfor en ramme av designet ditt. Noen eksempler inkluderer landingssider, app-grensesnitt eller popup-vinduer.

Denne artikkelen vil forklare hvordan du gjør dine Figma-design rullbare.

Tilpasse en rullbar tekst i en figur

La oss begynne med å lage en rullbar tekst i en enkel form. Dette er det vanligste eksemplet på rullbar tekst, og du kan legge til andre egenskaper som farger, fonter og konturer etterpå.

Slik gjøres det:

1. Lag en grunnleggende form. For dette eksemplet anbefaler vi å lage et vertikalt rektangel. Du kan gjøre det ved å velge rektangelverktøyet på venstre sidefelt eller bruke "R"-kommandoen. Hold venstre, klikk på et lerretspunkt og tegn formen.
   
2. På høyre sidefelt, under designfanen, sett en hake ved siden av alternativet "klippinnhold".
   
3. Velg tekstverktøyet for å lage en tekstboks og plasser den innenfor den rullbare rammen. Skriv eller kopier og lim inn innholdet du bruker.
   
4. Velg rammen og gå til prototype-fanen på høyre side av grensesnittet. Velg deretter "overløpsrulling"-alternativet og stilen du foretrekker. Her velger vi "vertikal rulling."
   

Når du klikker på overløpsrullealternativet på prototypefanen, er det flere stiler. Vi velger den vertikale siden vi bruker et vertikalt rektangel som eksempel. Dette lar deg lese gjennom teksten fra topp til bunn. Noen av de andre stilene inkluderer:

• Horisontal rulling – Brukere kan få teksten til å rulle fra venstre til høyre i noen eksempler. Dette alternativet er å foretrekke hvis du lager design i et landskapsformat.
• Ingen rulling – Hvis du vil låse innholdet ditt på plass, velg alternativet ingen rulling.
• Begge retninger – Lag et design med mye innhold og rull både vertikalt og horisontalt.

Du bør bruke rullbare funksjoner i designet for å minimere innsatsen (klikkene) leseren bruker mens han samhandler med innholdet. De kan sveipe eller bruke musehjulet i stedet for å klikke eller trykke gjennom tonnevis med tekst.

Hvordan designe de rullbare komponentene dine

Avhengig av produktet ditt, må du designe innholdsrammen og selve innholdet. Prosessen innebærer å legge til farger, fonter og potensielt andre komponenter til det generelle designet. Det er enkelt å endre disse elementene, men å velge riktig estetikk krever nøye vurdering.

Slik endrer du skrifttypen til det rullbare designet

Det første du må gjøre er å endre skrifttypen på det rullbare designet. Figma tilbyr et bredt utvalg stiler du kan velge mellom. Her er den enkleste metoden:

1. Velg innholdet i den rullbare rammen du vil endre.
   
2. Naviger til rullegardinmenyen øverst til venstre og velg den.
   
3. Bla gjennom skriftene til du finner den du vil bruke.
   

Hvis merkevaren du designer for har en spesiell typografi, vil du sannsynligvis velge den samme slik at den stemmer overens med merkevarebildet. Hvis du har mer slingringsmonn, bør du eksperimentere med forskjellige eksempler før du velger den rette.

Noen hensyn inkluderer:

• Designhensikt – Å velge en typografi bør samsvare med designets hensikt. Hvis du ønsker å formidle mye informasjon tydelig, sikte på mindre dekorative, men elegante fonter.
• Andre komponenter – Skriften din er et visuelt element som alle andre i designet ditt. Den skal matche rammen og andre komponenter du inkluderer.
• Generell estetikk og merkevarebygging - Den generelle følelsen av merkevaren bør også påvirke den valgte fonten. En blomsterleveringstjeneste vil for eksempel ikke ha samme skrifttype som en SAAS-landingsside.

Selv om det kan kreve litt eksperimentering å velge riktig skrifttype, er noen konkrete skrifteksempler de mest pålitelige alternativene:

• Roboto – Hvis du vil spille det trygt, bruk Roboto. Det regnes som en allsidig og nøytral skrifttype med mange applikasjoner. Siden det er så lett å forstå, velger mange Roboto for instruksjoner og landingssider.
• Poppins – Velg Poppins for en vennlig, men moderne og ren appell. Denne skriften er mer avrundet og gjør teksten attraktiv og lettlest.
• Raleway – Når du designer for et sofistikert luksusmerke, bør du kanskje vurdere Raleway. Den er generelt tynn, men har forskjellige vektvariasjoner og et generelt elegant utseende.
• Lato – Vennlig, pålitelig og seriøs er de riktige ordene for å beskrive denne fonten. Designere kan bruke Lato til overskrifter og avsnittstekster der lesbarhet og klarhet er hovedproblemene.

Du bør også vurdere den valgte skriftstørrelsen og tekststilen. Generelt brukes fet skrift for overskrifter eller fremheving av segmenter, mens kursiv brukes for sitater.

Endre fargen til rammeformen

I tillegg til å endre skrifttypen, vil du også endre fargen på rammeformen. Nok en gang vil den eksakte fargetonen avhenge av merket du designer for eller din estetikk. Heldigvis gjør Figmas grensesnitt det enkelt å velge en farge.

Slik kan du endre rammefargene dine:

1. Velg rammen du ønsker å redigere.
   
2. Laget vil vises på høyre sidefelt. Naviger til "fyll"-delen.
   
3. Velg "+" for å legge til en fylling.
   
4. Et fargevelgervindu åpnes. Velg fyllfarge og gradient. Du kan også skrive inn en hex-kode hvis du vet den nøyaktige fargen.
   

Som med andre designelementer, må du kanskje eksperimentere med forskjellige farger og hvordan de ser ut med den valgte fonten.

Vanlige spørsmål

Er det en rullbar tekstkommando i Figma?

Dessverre er det ingen kommando for å gjøre en tekst rullbar i Figma. Du kan imidlertid fullføre prosessen med bare noen få klikk ved å bruke metoden ovenfor.

Hvordan bestemmer jeg hvilket overløpsalternativ jeg vil ha?

Det avhenger av typen tekst du bruker, det generelle designet og funksjonen. Den vertikale stilen er vanligvis god til å skumme gjennom store tekster.

Hvilket enhetsgrensesnitt vil vanligvis trenge en rullbar tekstdesign?

Et godt eksempel kan være designmodeller for en app. Brukere kan lage en telefon som den generelle rammen, mens den rullbare teksten kan være appens grensesnitt.

Er Figma det beste valget for å lage rullbare design?

Figma er et av de beste verktøyene for å lage et bredt spekter av former, inkludert rullbare design. Enda bedre, Figma er gratis. Du kan imidlertid ha visse personlige preferanser. Prøv å eksperimentere med noen få plattformer, for eksempel Adobe Illustrator, til du finner verktøyet som passer best for deg.

Gjør designene dine rullbare og brukervennlige

Det er enkelt å lage hvilken som helst tekst innenfor en ramme i Figma. Bare velg rammen og gå deretter til klippinnholdsalternativet. Når du er ferdig, kan du velge alternativer for overløpsrulling. På samme måte bør du ikke overse andre viktige designelementer, som rammefarge og form og tekstfonten. Å gjøre designet ditt rullbart er et utmerket valg for landingssider, app-grensesnitt og popup-vinduer. Det gjør tekster lettere å skumme gjennom i stedet for å klikke, og til slutt øker brukeropplevelsen.

Syntes du det var enkelt å gjøre innholdet ditt rullbart i Figma? Hva med å velge riktig font? Gi oss beskjed i kommentarfeltet nedenfor.