Ang paggawa ng iyong content na na-scroll sa Figma ay nagsasangkot ng pag-navigate sa tab sa gilid. Sa kasamaang palad, hindi ito awtomatikong lumilitaw sa pangunahing interface ng gumagamit. Ang na-scroll na content ay kapaki-pakinabang kapag gusto mong magpakita ng maraming impormasyon sa loob ng frame ng iyong disenyo. Kasama sa ilang halimbawa ang mga landing page, mga interface ng app, o mga pop-up window.
Ipapaliwanag ng artikulong ito kung paano gawing scrollable ang iyong mga disenyo ng Figma.
Paglalagay ng Nai-scroll na Teksto sa Isang Hugis
Magsimula tayo sa paggawa ng na-scroll na teksto sa loob ng isang simpleng hugis. Ito ang pinakakaraniwang halimbawa ng na-scroll na teksto, at maaari kang magdagdag ng iba pang mga katangian tulad ng kulay, mga font, at mga balangkas pagkatapos.
Narito kung paano ito ginawa:
- Lumikha ng isang pangunahing hugis. Para sa halimbawang ito, inirerekomenda namin ang paggawa ng patayong parihaba. Magagawa mo ito sa pamamagitan ng pagpili sa rectangle tool sa kaliwang sidebar o gamit ang command na “R”. Pindutin ang kaliwa, mag-click sa isang canvas point, at iguhit ang hugis.
- Sa kanang sidebar, sa ilalim ng tab na disenyo, maglagay ng tseke sa tabi ng opsyong 'nilalaman ng clip'.
- Piliin ang text tool para gumawa ng text box at ilagay ito sa loob ng scrollable frame. I-type o i-copy-paste ang anumang content na ginagamit mo.
- Piliin ang frame at pumunta sa tab na prototype sa kanang bahagi ng iyong interface. Pagkatapos, piliin ang opsyong “overflow scrolling” at ang istilong gusto mo. Dito pipiliin natin ang 'vertical scrolling.'
Sa sandaling mag-click ka sa opsyon sa overflow na pag-scroll sa tab na prototype, mayroong maraming mga estilo. Pinipili namin ang patayo dahil gumagamit kami ng patayong parihaba bilang halimbawa. Hinahayaan ka nitong basahin ang teksto mula sa itaas hanggang sa ibaba. Ang ilan sa iba pang mga estilo ay kinabibilangan ng:
- Pahalang na pag-scroll – Maaaring gawin ng mga user ang kanilang text scroll mula kaliwa hanggang kanan sa ilang mga halimbawa. Mas mainam ang opsyong ito kung gumagawa ka ng mga disenyo sa isang format ng landscaping.
- Walang pag-scroll - Kung gusto mong i-lock ang iyong nilalaman sa lugar, piliin ang opsyon na walang pag-scroll.
- Parehong direksyon – Gumawa ng disenyo na may maraming nilalaman at mag-scroll nang patayo at pahalang.
Dapat kang gumamit ng mga na-scroll na feature sa loob ng iyong disenyo upang mabawasan ang pagsisikap (mga pag-click) na ginagamit ng iyong mambabasa habang nakikipag-ugnayan sa nilalaman. Maaari nilang i-swipe o gamitin ang gulong ng mouse sa halip na mag-click o mag-tap sa napakaraming text.
Paano Idisenyo ang Iyong Mga Nai-scroll na Bahagi
Depende sa iyong produkto, kakailanganin mong idisenyo ang iyong content frame at ang content mismo. Ang proseso ay nagsasangkot ng pagdaragdag ng kulay, mga font, at potensyal na iba pang mga bahagi sa pangkalahatang disenyo. Ang pagpapalit ng mga elementong ito ay madali, ngunit ang pagpili ng tamang aesthetic ay nangangailangan ng maingat na pagsasaalang-alang.
Paano Palitan ang Font ng Iyong Nai-scroll na Disenyo
Ang unang bagay na kailangan mong gawin ay baguhin ang font sa iyong na-scroll na disenyo. Nag-aalok ang Figma ng malawak na hanay ng mga istilo na mapagpipilian mo. Narito ang pinakasimpleng paraan:
- Piliin ang nilalaman sa iyong na-scroll na frame na gusto mong baguhin.
- Mag-navigate sa drop-down na menu na matatagpuan sa kaliwang tuktok at piliin ito.
- Mag-scroll sa mga font hanggang sa makita mo ang gusto mong gamitin.
Kung ang tatak na iyong idinisenyo ay may partikular na palalimbagan, malamang na pipiliin mo ang pareho upang ito ay naaayon sa imahe ng tatak. Kung mayroon kang mas maraming wiggle room, dapat kang mag-eksperimento sa iba't ibang mga halimbawa bago pumili ng tama.
Ang ilang mga pagsasaalang-alang ay kinabibilangan ng:
- Layunin ng disenyo – Ang pagpili ng palalimbagan ay dapat tumugma sa layunin ng iyong disenyo. Kung gusto mong maghatid ng maraming impormasyon nang malinaw, maghangad ng hindi gaanong pandekorasyon ngunit eleganteng mga font.
- Iba pang mga bahagi - Ang iyong font ay isang visual na elemento tulad ng iba sa iyong disenyo. Dapat itong tumugma sa frame at iba pang mga bahagi na iyong isasama.
- Pangkalahatang aesthetic at branding – Ang pangkalahatang pakiramdam ng brand ay dapat ding makaimpluwensya sa iyong napiling font. Halimbawa, ang isang serbisyo sa paghahatid ng bulaklak ay hindi nagtatampok ng parehong font bilang isang landing page ng SAAS.
Habang ang pagpili ng tamang font ay maaaring mangailangan ng ilang eksperimento, ang ilang mga kongkretong halimbawa ng font ay ang pinaka maaasahang mga opsyon:
paano ko titigilan ang mga pop up na ad sa aking Android phone home screen
- Roboto – Kung gusto mong laruin ito nang ligtas, gamitin ang Roboto. Ito ay itinuturing na isang maraming nalalaman at neutral na font na may maraming mga application. Dahil napakadaling maunawaan, marami ang pumili ng Roboto para sa mga tagubilin at landing page.
- Poppins – Para sa isang friendly ngunit moderno at malinis na apela, piliin ang Poppins. Ang font na ito ay mas bilugan at ginagawang kaakit-akit at madaling basahin ang teksto.
- Raleway – Kapag nagdidisenyo para sa isang sopistikadong luxury brand, maaaring gusto mong isaalang-alang ang Raleway. Karaniwan itong manipis ngunit may iba't ibang pagkakaiba-iba ng timbang at pangkalahatang eleganteng hitsura.
- Lato – Friendly, maaasahan, at seryoso ang mga tamang salita para ilarawan ang font na ito. Maaaring gamitin ng mga taga-disenyo ang Lato para sa mga pamagat at teksto ng talata kung saan ang pagiging madaling mabasa at kalinawan ay pangunahing mga alalahanin.
Gusto mo ring isaalang-alang ang iyong napiling laki ng font at istilo ng teksto. Sa pangkalahatan, ang bold ay ginagamit para sa mga headline o pagbibigay-diin sa mga segment, habang ang mga italics ay ginagamit para sa mga panipi.
Pagbabago sa Kulay ng Hugis ng Frame
Bukod sa pagpapalit ng font, gugustuhin mo ring baguhin ang kulay ng hugis ng iyong frame. Muli, ang eksaktong kulay ay magdedepende sa brand kung saan ka nagdidisenyo o sa iyong aesthetics. Sa kabutihang palad, pinadali ng interface ng Figma ang pagpili ng isang kulay.
Narito kung paano mo mababago ang mga kulay ng iyong frame:
- Piliin ang frame na gusto mong i-edit.
- Lalabas ang layer sa kanang sidebar. Mag-navigate sa seksyong 'punan'.
- Piliin ang “+” para magdagdag ng punan.
- Magbubukas ang isang window ng picker ng kulay. Piliin ang fill color at gradient. Maaari ka ring mag-type ng hex code kung alam mo ang eksaktong kulay.
Tulad ng iba pang mga elemento ng disenyo, maaaring kailanganin mong mag-eksperimento sa iba't ibang kulay at kung ano ang hitsura ng mga ito sa iyong napiling font.
google chrome sa amazon fire tablet
FAQ
Mayroon bang scrollable text command sa Figma?
Sa kasamaang palad, walang utos na gawing mai-scroll ang isang teksto sa loob ng Figma. Gayunpaman, maaari mong kumpletuhin ang proseso sa ilang mga pag-click lamang gamit ang nabanggit na paraan.
Paano ako magpapasya kung aling opsyon sa overflow ang gusto ko?
Depende iyon sa uri ng text na iyong ginagamit, sa pangkalahatang disenyo, at sa paggana nito. Ang istilong patayo ay kadalasang mabuti para sa pag-skim sa malalaking teksto.
Anong interface ng device ang karaniwang mangangailangan ng na-scroll na disenyo ng teksto?
Ang isang magandang halimbawa ay ang disenyo ng mga mock-up para sa isang app. Maaaring gumawa ang mga user ng telepono bilang pangkalahatang frame, habang ang na-scroll na text ay maaaring maging interface ng app.
Ang Figma ba ang pinakamahusay na pagpipilian para sa paggawa ng mga scroll na disenyo?
Ang Figma ay isa sa mga pinakamahusay na tool para sa paggawa ng malawak na hanay ng mga form, kabilang ang mga scrollable na disenyo. Mas mabuti pa, libre ang Figma. Gayunpaman, maaaring mayroon kang ilang mga personal na kagustuhan. Subukang mag-eksperimento sa ilang mga platform, tulad ng Adobe Illustrator, hanggang sa makita mo ang tool na pinakaangkop sa iyo.
Gawing Nai-scroll at User-Friendly ang Iyong Mga Disenyo
Ang paggawa ng anumang teksto sa loob ng isang frame sa Figma ay madali. Piliin lamang ang frame at pagkatapos ay lumipat sa opsyon sa nilalaman ng clip. Kapag kumpleto na, maaari mong piliin ang iyong mga opsyon sa pag-scroll sa overflow. Gayundin, hindi mo dapat pabayaan ang iba pang mahahalagang elemento ng disenyo, tulad ng kulay at hugis ng frame at ang font ng teksto. Ang paggawa ng iyong disenyo na ma-scroll ay isang mahusay na pagpipilian para sa mga landing page, mga interface ng app, at mga pop-up window. Ginagawa nitong mas madaling suriin ang mga teksto sa halip na i-click, na sa huli ay nagpapataas ng karanasan ng user.
Nahanap mo bang madaling gawin ang iyong nilalaman na mai-scroll sa Figma? Paano ang tungkol sa pagpili ng tamang font? Ipaalam sa amin sa seksyon ng mga komento sa ibaba.
