Hoved Annen Hvordan lage en rullbar ressurs i Figma

Hvordan lage en rullbar ressurs 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.

  Hvordan lage en rullebar ressurs i Figma

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

Tilpasse en rullbar tekst i en form

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å.

hvordan man utestenger noen fra facebooks virksomhetsside som ikke har likt det

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 rullbare komponenter

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 på 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.

hvordan sette origin games på steam

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. For eksempel vil en blomsterleveringstjeneste 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 vil også vurdere din valgte skriftstørrelse og tekststil. 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 nøyaktige fargen avhenge av merket du designer for eller estetikken din. 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 opprette en telefon som den generelle rammen, mens den rullbare teksten kan være appens grensesnitt.

hvordan du slår på Bluetooth-vinduer 10

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, for eksempel 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.

Interessante Artikler

Redaksjonens

Hva er Plex og hvordan fungerer det?
Hva er Plex og hvordan fungerer det?
Plex Media Server er en digital mediespiller og organisasjonsverktøy som lar deg få tilgang til musikk, bilder og videoer som er lagret på én datamaskin fra en annen datamaskin eller mobilenhet.
Hvordan lage en spoilerkode i uenighet
Hvordan lage en spoilerkode i uenighet
https://www.youtube.com/watch?v=YqkEhIlFZ9A Discord lar deg dekorere meldingene dine med emojier, gifs og bilder, men noen mennesker er uvitende om hvordan de kan bruke Markdown-formateringsfunksjoner for å oppnå mer unike effekter. Bruke tastaturkommandoer på
Her er hvorfor iPhone-ikonene dine rister
Her er hvorfor iPhone-ikonene dine rister
Etter å ha tilbrakt litt tid med iPhone XS, XS Max og XR den siste uken, har jeg en ny takknemlighet for iOS 12 og gleder meg til iOS 13 som nettopp er kunngjort. Operativsystemet er intuitivt,
Finn den gjeldende låseskjermbildefilen i Windows 10
Finn den gjeldende låseskjermbildefilen i Windows 10
Se hvordan du finner det nåværende bakgrunnsbildet til låseskjermen i Windows 10 og kopierer det til ønsket sted.
FIFA 17 tips og triks: Bli en FIFA pro med disse 11 pro tipsene
FIFA 17 tips og triks: Bli en FIFA pro med disse 11 pro tipsene
Til tross for at FIFA 17 er enda et FIFA-spill, kaster EAs siste oppføring i FIFA-serien mange nye moduser i blandingen. Som med hvert år, har EA levert subtile tilpasninger til lag og spillere, noe som medfører
Slik sletter du en spilleliste i Spotify
Slik sletter du en spilleliste i Spotify
Spotify er en populær musikkstrømmetjeneste tilgjengelig for ulike enheter. Den har et stadig voksende bibliotek med tusenvis av podcaster, sanger og videoer av skapere fra hele verden. Du kan lage personlige spillelister og dele dem med
Hvordan vite om du trenger et nytt modem
Hvordan vite om du trenger et nytt modem
Fungerer modemet ditt uvanlig, og du lurer på om du trenger et nytt modem? Dette er symptomene for å indikere når du trenger å bytte ut et modem.