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

Bayonetta og Bayonetta 2 anmeldelse: Det er byttetid
Bayonetta og Bayonetta 2 anmeldelse: Det er byttetid
Oppdatering: Mens Bayonetta og Bayonetta 2 begge kan kjøpes som digitale nedlastinger på Nintendo-butikken, er det verdt å merke seg at den fysiske kopien av Bayonetta 2 kommer med en nedlastingsnøkkel for det første spillet. Hvis du er
Hvordan lagre bilder fra Instagram
Hvordan lagre bilder fra Instagram
Antagelig av Instagram-grunner lar Instagram deg ikke lagre bilder fra nettstedet eller appen. Det kan være ganske irriterende hvis du har mistet fotografiene du har tatt og lastet opp til nettstedet, og ønsker å få et
Hvordan få de klassiske visningsalternativene i Windows 10 i stedet for Innstillinger-appen
Hvordan få de klassiske visningsalternativene i Windows 10 i stedet for Innstillinger-appen
Det er mulig å få den klassiske skjerminnstillingsprogrammet tilbake i skrivebordets kontekstmeny.
Hvordan bruke Illustrator trinn og gjenta
Hvordan bruke Illustrator trinn og gjenta
En av de ledende vektorgrafikredigererne på markedet, Adobe Illustrator, tilbyr mange nyttige verktøy. Transform and Align er to som gjør det enkelt for brukeren å lage trinn- og gjenta mønstre for fotobakgrunner. Selv om det er lett å
Hvordan fikse Msvcr110.dll ikke funnet eller manglende feil
Hvordan fikse Msvcr110.dll ikke funnet eller manglende feil
En feilsøkingsveiledning for msvcr110.dll mangler og lignende feil. Ikke last ned msvcr110.dll, fiks problemet på riktig måte.
Microsoft oppdaterer Windows 10 Alternativer for datainnsamling
Microsoft oppdaterer Windows 10 Alternativer for datainnsamling
Windows 10 leveres med Telemetry-funksjonen aktivert som standard som samler brukeraktivitet og sender den til Microsoft. Disse tjenestene samler inn forskjellig informasjon om programvaren som er installert på PC-en, og til og med personlige data som er lagret på datamaskinen din. Microsoft hevder at de kanskje ikke brukes til å personlig identifisere deg. Telemetri og datainnsamling
Microsoft Terminal 1.0 Stable lanseres i mai 2020
Microsoft Terminal 1.0 Stable lanseres i mai 2020
Windows Terminal er en ny terminalapp for kommandolinjebrukere som har mange nye funksjoner, inkludert faner, en GPU-akselerert DirectWrite / DirectX-basert tekstgjengivelsesmotor, profiler og mer. AdvertisementWindows Terminal en ny terminalapp for kommandolinjebrukere som har mange nye funksjoner, inkludert faner, en GPU-akselerert DirectWrite / DirectX-basert tekstgjengivelsesmotor, profiler og mer. Windows