Ako vytvoriť rolovacie aktívum vo Figme

Posúvanie obsahu vo Figme zahŕňa navigáciu na bočnej karte. Žiaľ, nezobrazuje sa automaticky v hlavnom používateľskom rozhraní. Posúvateľný obsah je užitočný, keď chcete v rámci svojho návrhu prezentovať veľa informácií. Niektoré príklady zahŕňajú vstupné stránky, rozhrania aplikácií alebo kontextové okná.

Tento článok vysvetlí, ako urobiť vaše návrhy Figma rolovateľnými.

Prispôsobenie rolovateľného textu do tvaru

Začnime vytvorením rolovateľného textu v rámci jednoduchého tvaru. Toto je najbežnejší príklad rolovateľného textu a neskôr môžete pridať ďalšie vlastnosti, ako je farba, písma a obrysy.

Tu je postup:

1. Vytvorte základný tvar. Pre tento príklad odporúčame vytvoriť zvislý obdĺžnik. Môžete to urobiť výberom nástroja obdĺžnik na ľavom bočnom paneli alebo pomocou príkazu „R“. Podržte ľavé tlačidlo, kliknite na bod na plátne a nakreslite tvar.
   
2. Na pravom bočnom paneli na karte návrh začiarknite možnosť „obsah klipu“.
   
3. Vyberte textový nástroj na vytvorenie textového poľa a umiestnite ho do rolovateľného rámčeka. Napíšte alebo skopírujte a prilepte akýkoľvek obsah, ktorý používate.
   
4. Vyberte rám a prejdite na kartu prototypu na pravej strane vášho rozhrania. Potom vyberte možnosť „presúvanie posúvania“ a preferovaný štýl. Tu vyberieme „vertikálne posúvanie“.
   

Po kliknutí na možnosť rolovania pretečenia na karte prototypu existuje viacero štýlov. Vyberáme zvislý, pretože ako príklad používame zvislý obdĺžnik. To vám umožní čítať text zhora nadol. Niektoré z ďalších štýlov zahŕňajú:

• Horizontálne posúvanie – Používatelia môžu v niektorých príkladoch posúvať svoj text zľava doprava. Táto možnosť je vhodnejšia, ak vytvárate návrhy vo formáte krajinného dizajnu.
• Žiadne posúvanie – Ak chcete obsah uzamknúť na mieste, vyberte možnosť bez posúvania.
• Obidva smery – Vytvorte dizajn s množstvom obsahu a posúvajte sa vertikálne aj horizontálne.

Vo svojom návrhu by ste mali používať rolovacie funkcie, aby ste minimalizovali námahu (kliknutia), ktoré váš čitateľ používa pri interakcii s obsahom. Môžu posúvať alebo používať koliesko myši namiesto klikania alebo klepania cez tony textu.

Ako navrhnúť rolovacie komponenty

V závislosti od vášho produktu budete musieť navrhnúť rámec obsahu a samotný obsah. Proces zahŕňa pridanie farby, fontov a potenciálne ďalších komponentov do celkového dizajnu. Výmena týchto prvkov je jednoduchá, ale výber správnej estetiky si vyžaduje starostlivé zváženie.

Ako zmeniť písmo vášho rolovateľného dizajnu

Prvá vec, ktorú musíte urobiť, je zmeniť písmo na rolovateľnom dizajne. Figma ponúka širokú škálu štýlov, z ktorých si môžete vybrať. Tu je najjednoduchší spôsob:

1. Vyberte obsah v posúvateľnom rámci, ktorý chcete zmeniť.
   
2. Prejdite do rozbaľovacej ponuky umiestnenej vľavo hore a vyberte ju.
   
3. Prechádzajte písmami, kým nenájdete to, ktoré chcete použiť.
   

Ak má značka, pre ktorú navrhujete, konkrétnu typografiu, pravdepodobne si vyberiete rovnakú, aby bola v súlade s imidžom značky. Ak máte viac priestoru na pohyb, mali by ste pred výberom toho správneho experimentovať s rôznymi príkladmi.

Niektoré úvahy zahŕňajú:

• Dizajnový zámer – Výber typografie by mal zodpovedať zámeru vášho dizajnu. Ak chcete jasne sprostredkovať veľa informácií, zamerajte sa na menej dekoratívne, ale elegantné písma.
• Ostatné komponenty – Vaše písmo je vizuálny prvok ako ktorýkoľvek iný vo vašom dizajne. Mal by zodpovedať rámu a ostatným komponentom, ktoré zahrniete.
• Celková estetika a branding – Všeobecný dojem zo značky by mal tiež ovplyvniť vami zvolené písmo. Napríklad služba doručenia kvetov nebude obsahovať rovnaké písmo ako vstupná stránka SAAS.

Aj keď výber správneho písma môže vyžadovať určité experimentovanie, niektoré konkrétne príklady písma sú najspoľahlivejšie možnosti:

• Roboto – Ak chcete hrať na istotu, použite Roboto. Považuje sa za všestranné a neutrálne písmo s mnohými aplikáciami. Keďže je to také ľahké, mnohí si vyberajú Roboto ako pokyny a vstupné stránky.
• Poppins – Pre priateľský, no moderný a čistý vzhľad si vyberte Poppins. Toto písmo je zaoblenejšie a robí text atraktívnym a ľahko čitateľným.
• Raleway – Pri navrhovaní sofistikovanej luxusnej značky možno budete chcieť zvážiť Raleway. Vo všeobecnosti je tenký, ale má rôzne variácie hmotnosti a celkovo elegantný vzhľad.
• Lato – Priateľské, spoľahlivé a seriózne sú tie správne slová na opis tohto písma. Dizajnéri môžu použiť Lato pre nadpisy a odstavcové texty, kde je prvoradá čitateľnosť a jasnosť.

Budete tiež chcieť zvážiť zvolenú veľkosť písma a štýl textu. Vo všeobecnosti sa tučné písmo používa pre nadpisy alebo zvýraznenie segmentov, zatiaľ čo kurzíva sa používa pre úvodzovky.

Zmena farby tvaru rámu

Okrem zmeny písma budete chcieť zmeniť aj farbu tvaru rámu. Presný odtieň bude opäť závisieť od značky, pre ktorú navrhujete, alebo od vašej estetiky. Našťastie rozhranie Figma uľahčuje výber farby.

Tu je postup, ako môžete zmeniť farby rámu:

1. Vyberte rám, ktorý chcete upraviť.
   
2. Vrstva sa zobrazí na pravom bočnom paneli. Prejdite do sekcie „vyplniť“.
   
3. Ak chcete pridať výplň, vyberte „+“.
   
4. Otvorí sa okno na výber farby. Vyberte farbu výplne a prechod. Ak poznáte presný odtieň, môžete zadať aj hexadecimálny kód.
   

Rovnako ako pri iných dizajnových prvkoch možno budete musieť experimentovať s rôznymi farbami a tým, ako vyzerajú s vybraným písmom.

FAQ

Existuje vo Figme rolovací textový príkaz?

Žiaľ, v rámci Figmy neexistuje príkaz, ktorý by umožnil rolovanie textu. Proces však môžete dokončiť iba niekoľkými kliknutiami pomocou vyššie uvedenej metódy.

Ako sa rozhodnem, ktorú možnosť pretečenia chcem?

To závisí od typu textu, ktorý používate, celkového dizajnu a jeho funkcie. Vertikálny štýl je zvyčajne vhodný na prezeranie veľkých textov.

Aké rozhranie zariadenia bude zvyčajne potrebovať rolovateľný textový dizajn?

Dobrým príkladom by boli dizajnové makety pre aplikáciu. Používatelia si môžu vytvoriť telefón ako všeobecný rámec, zatiaľ čo posúvateľný text môže byť rozhraním aplikácie.

Je Figma najlepšou voľbou na vytváranie posúvateľných návrhov?

Figma je jedným z najlepších nástrojov na vytváranie širokej škály formulárov vrátane rolovateľných vzorov. Ešte lepšie je, že Figma je zadarmo. Môžete však mať určité osobné preferencie. Skúste experimentovať s niekoľkými platformami, ako je napríklad Adobe Illustrator, kým nenájdete nástroj, ktorý vám najviac vyhovuje.

Urobte svoje návrhy posúvateľné a užívateľsky prívetivé

Vytváranie akéhokoľvek textu v rámci vo Figme je jednoduché. Jednoducho vyberte rám a potom prejdite na možnosť obsahu klipu. Po dokončení si môžete vybrať možnosti pretečenia posúvania. Rovnako tak by ste nemali zanedbávať ďalšie kľúčové prvky dizajnu, ako je farba a tvar rámu a písmo textu. Posúvanie vášho dizajnu je vynikajúcou voľbou pre vstupné stránky, rozhrania aplikácií a kontextové okná. Uľahčuje prezeranie textov namiesto klikania, čo v konečnom dôsledku zlepšuje používateľský zážitok.

Zistili ste, že je jednoduché, aby sa váš obsah posúval vo Figme? Ako je to s výberom správneho písma? Dajte nám vedieť v sekcii komentárov nižšie.