Jak vytvořit rolovací aktivum ve Figmě

Chcete-li svůj obsah posouvat ve Figmě, musíte se pohybovat na postranní kartě. Bohužel se automaticky nezobrazí v hlavním uživatelském rozhraní. Posouvatelný obsah je užitečný, když chcete v rámci svého návrhu prezentovat spoustu informací. Některé příklady zahrnují vstupní stránky, rozhraní aplikací nebo vyskakovací okna.

Tento článek vysvětlí, jak zajistit, aby byly vaše návrhy Figma rolovatelné.

Přizpůsobení rolovatelného textu do tvaru

Začněme vytvořením rolovatelného textu v jednoduchém tvaru. Toto je nejběžnější příklad rolovatelného textu a později můžete přidat další vlastnosti, jako je barva, písma a obrysy.

Zde je návod, jak se to dělá:

1. Vytvořte základní tvar. Pro tento příklad doporučujeme vytvořit svislý obdélník. Můžete tak učinit výběrem nástroje obdélník na levém postranním panelu nebo pomocí příkazu „R“. Podržte vlevo, klikněte na bod plátna a nakreslete tvar.
   
2. Na pravém postranním panelu na kartě Návrh zaškrtněte možnost „obsah klipu“.
   
3. Vyberte textový nástroj pro vytvoření textového pole a umístěte jej do rolovatelného rámečku. Zadejte nebo zkopírujte a vložte jakýkoli obsah, který používáte.
   
4. Vyberte rámeček a přejděte na kartu prototyp na pravé straně vašeho rozhraní. Poté vyberte možnost „přetečení rolování“ a styl, který preferujete. Zde zvolíme „svislé posouvání“.
   

Jakmile kliknete na možnost přetečení posouvání na kartě prototyp, existuje několik stylů. Volíme vertikální, protože jako příklad používáme vertikální obdélník. To vám umožní číst text shora dolů. Některé z dalších stylů zahrnují:

• Horizontální posouvání – Uživatelé mohou v některých příkladech posouvat svůj text zleva doprava. Tato možnost je vhodnější, pokud vytváříte návrhy ve formátu krajinářství.
• Žádné posouvání – Pokud chcete obsah uzamknout na místě, vyberte možnost bez posouvání.
• Oba směry – Vytvořte návrh se spoustou obsahu a posouvejte ho svisle i vodorovně.

Ve svém návrhu byste měli používat rolovatelné funkce, abyste minimalizovali úsilí (kliknutí), které váš čtenář používá při interakci s obsahem. Mohou přejíždět nebo používat kolečko myši místo klikání nebo klepání přes tuny textu.

Jak navrhnout své rolovatelné komponenty

V závislosti na vašem produktu budete muset navrhnout rámec obsahu a samotný obsah. Tento proces zahrnuje přidání barvy, písem a potenciálně dalších součástí do celkového návrhu. Výměna těchto prvků je snadná, ale výběr správné estetiky vyžaduje pečlivé zvážení.

Jak změnit písmo vašeho rolovacího designu

První věc, kterou budete muset udělat, je změnit písmo na rolovatelném designu. Figma nabízí širokou škálu stylů, ze kterých si můžete vybrat. Zde je nejjednodušší metoda:

1. Vyberte obsah v rolovacím rámečku, který chcete změnit.
   
2. Přejděte do rozevírací nabídky umístěné vlevo nahoře a vyberte ji.
   
3. Procházejte písma, dokud nenajdete to, které chcete použít.
   

Pokud má značka, pro kterou navrhujete, konkrétní typografii, pravděpodobně zvolíte stejnou, aby byla v souladu s image značky. Pokud máte více prostoru pro pohyb, měli byste experimentovat s různými příklady, než vyberete ten správný.

Některé úvahy zahrnují:

• Záměr návrhu – Výběr typografie by měl odpovídat záměru vašeho návrhu. Pokud chcete sdělit spoustu informací jasně, zaměřte se na méně dekorativní, ale elegantní písma.
• Ostatní komponenty – Vaše písmo je vizuální prvek jako každý jiný ve vašem návrhu. Mělo by se shodovat s rámem a dalšími součástmi, které obsahuje.
• Celková estetika a branding – Celkový dojem ze značky by měl také ovlivnit vámi zvolené písmo. Například služba doručení květin nebude obsahovat stejné písmo jako vstupní stránka SAAS.

Zatímco výběr správného písma může vyžadovat určité experimentování, některé konkrétní příklady písem jsou nejspolehlivějšími možnostmi:

• Roboto – Pokud chcete hrát na jistotu, použijte Roboto. Je považováno za univerzální a neutrální písmo s mnoha aplikacemi. Protože je to tak snadné na pochopení, mnozí volí Roboto pro pokyny a vstupní stránky.
• Poppins – Pro přátelský, ale moderní a čistý vzhled zvolte Poppins. Toto písmo je více zaoblené a činí text atraktivním a snadno čitelným.
• Raleway – Při navrhování pro sofistikovanou luxusní značku možná budete chtít zvážit Raleway. Je obecně tenký, ale má různé váhové varianty a celkově elegantní vzhled.
• Lato – Přátelský, spolehlivý a seriózní jsou ta správná slova pro popis tohoto písma. Návrháři mohou používat Lato pro nadpisy a odstavcové texty, kde jsou prvořadými zájmy čitelnost a srozumitelnost.

Budete také chtít zvážit zvolenou velikost písma a styl textu. Obecně se tučné písmo používá pro nadpisy nebo zdůrazňující segmenty, zatímco pro uvozovky se používá kurzíva.

Změna barvy tvaru rámu

Kromě změny písma budete také chtít změnit barvu tvaru rámečku. Přesný odstín bude opět záviset na značce, pro kterou navrhujete, nebo na vaší estetice. Naštěstí rozhraní Figma usnadňuje výběr barvy.

Zde je návod, jak změnit barvy rámečku:

1. Vyberte rámeček, který chcete upravit.
   
2. Vrstva se objeví na pravém postranním panelu. Přejděte do sekce „vyplnit“.
   
3. Vyberte „+“ pro přidání výplně.
   
4. Otevře se okno pro výběr barvy. Vyberte barvu výplně a přechod. Pokud znáte přesný odstín, můžete také zadat hexadecimální kód.
   

Stejně jako u jiných designových prvků možná budete muset experimentovat s různými barvami a tím, jak vypadají s vybraným písmem.

FAQ

Existuje ve Figmě rolovací textový příkaz?

Bohužel neexistuje žádný příkaz, který by umožnil rolování textu ve Figmě. Proces však můžete dokončit několika kliknutími pomocí výše uvedené metody.

Jak se rozhodnu, kterou možnost přetečení chci?

To závisí na typu textu, který používáte, na celkovém designu a jeho funkci. Vertikální styl je obvykle vhodný pro procházení velkých textů.

Jaké rozhraní zařízení bude obvykle potřebovat rolovací textový design?

Dobrým příkladem by mohly být návrhové makety pro aplikaci. Uživatelé mohou vytvořit telefon jako obecný rámec, zatímco rolovací text může být rozhraním aplikace.

Je Figma nejlepší volbou pro vytváření rolovacích návrhů?

Figma je jedním z nejlepších nástrojů pro vytváření široké škály formulářů, včetně rolovacích vzorů. Ještě lepší je, že Figma je zdarma. Můžete však mít určité osobní preference. Zkuste experimentovat s několika platformami, jako je Adobe Illustrator, dokud nenajdete nástroj, který vám nejlépe vyhovuje.

Udělejte ze svých návrhů rolovací a uživatelsky přívětivé

Vytvoření jakéhokoli textu v rámci ve Figmě je snadné. Jednoduše vyberte rámeček a poté přejděte na možnost obsahu klipu. Po dokončení si můžete vybrat možnosti posouvání přetečení. Stejně tak byste neměli zanedbávat další zásadní designové prvky, jako je barva a tvar rámečku a písmo textu. Posouvání návrhu je vynikající volbou pro vstupní stránky, rozhraní aplikací a vyskakovací okna. Usnadňuje procházení textů namísto klikání, což v konečném důsledku zvyšuje uživatelský dojem.

Bylo pro vás snadné, aby byl váš obsah ve Figmě rolovatelný? A co výběr správného písma? Dejte nám vědět v sekci komentářů níže.