Jak zrobić przewijalny zasób w Figmie

Możliwość przewijania treści w Figmie wymaga poruszania się po bocznej karcie. Niestety nie pojawia się on automatycznie w głównym interfejsie użytkownika. Przewijalna treść jest przydatna, gdy chcesz przedstawić wiele informacji w ramach swojego projektu. Przykładami mogą być strony docelowe, interfejsy aplikacji lub wyskakujące okienka.

W tym artykule wyjaśniono, jak zapewnić przewijanie projektów Figma.

Dopasowywanie przewijanego tekstu do kształtu

Zacznijmy od utworzenia przewijalnego tekstu w prostym kształcie. Jest to najczęstszy przykład tekstu przewijanego, po którym można dodać inne właściwości, takie jak kolor, czcionka i kontury.

Oto jak to się robi:

1. Utwórz podstawowy kształt. W tym przykładzie zalecamy utworzenie pionowego prostokąta. Możesz to zrobić wybierając narzędzie prostokąta na lewym pasku bocznym lub używając polecenia „R”. Przytrzymaj lewy przycisk, kliknij punkt płótna i narysuj kształt.

   

2. Na prawym pasku bocznym, w zakładce Projekt, zaznacz opcję „treść klipu”.

   

3. Wybierz narzędzie tekstowe, aby utworzyć pole tekstowe i umieścić je w przewijanej ramce. Wpisz lub skopiuj i wklej dowolną treść, której używasz.

   

4. Wybierz ramkę i przejdź do zakładki prototypu po prawej stronie interfejsu. Następnie wybierz opcję „przewijania przepełnienia” i preferowany styl. Tutaj wybierzemy „przewijanie w pionie”.

   

Po kliknięciu opcji przewijania przepełnienia na karcie prototypu dostępnych jest wiele stylów. Wybieramy pionowy, ponieważ jako przykład używamy pionowego prostokąta. Dzięki temu możesz czytać tekst od góry do dołu. Niektóre inne style obejmują:

• Przewijanie w poziomie — w niektórych przykładach użytkownicy mogą przewijać tekst od lewej do prawej. Ta opcja jest preferowana, jeśli tworzysz projekty w formacie krajobrazu.
• Bez przewijania – jeśli chcesz zablokować zawartość w miejscu, wybierz opcję bez przewijania.
• Obydwa kierunki — utwórz projekt z dużą ilością treści i przewijaj go zarówno w pionie, jak i w poziomie.

Powinieneś używać funkcji przewijania w swoim projekcie, aby zminimalizować wysiłek (kliknięcia), jakiego używa Twój czytnik podczas interakcji z treścią. Zamiast klikać lub stukać w tony tekstu, mogą przesuwać palcem lub używać kółka myszy.

Jak zaprojektować przewijalne komponenty

W zależności od produktu musisz zaprojektować ramkę treści i samą treść. Proces ten polega na dodaniu koloru, czcionek i potencjalnie innych elementów do ogólnego projektu. Zmiana tych elementów jest łatwa, ale wybór odpowiedniej estetyki wymaga dokładnego przemyślenia.

Jak zmienić czcionkę w przewijanym projekcie

Pierwszą rzeczą, którą musisz zrobić, to zmienić czcionkę w przewijanym projekcie. Figma oferuje szeroką gamę stylów do wyboru. Oto najprostsza metoda:

1. Wybierz zawartość przewijanej ramki, którą chcesz zmienić.

   

2. Przejdź do menu rozwijanego znajdującego się w lewym górnym rogu i wybierz je.

   

3. Przewijaj czcionki, aż znajdziesz tę, której chcesz użyć.

   

Jeśli marka, dla której projektujesz, ma określoną typografię, prawdopodobnie wybierzesz tę samą, aby była spójna z wizerunkiem marki. Jeśli masz więcej miejsca na manewry, powinieneś poeksperymentować z różnymi przykładami, zanim wybierzesz właściwy.

Niektóre kwestie obejmują:

• Założenie projektu – wybór typografii powinien odpowiadać założeniom projektu. Jeśli chcesz wyraźnie przekazać wiele informacji, postaw na mniej dekoracyjne, ale eleganckie czcionki.
• Inne komponenty – Twoja czcionka jest elementem wizualnym, jak każdy inny w Twoim projekcie. Powinien pasować do ramy i innych dołączonych elementów.
• Ogólna estetyka i branding – ogólny charakter marki powinien również wpływać na wybraną czcionkę. Na przykład usługa dostawy kwiatów nie będzie zawierała tej samej czcionki, co strona docelowa SAAS.

Chociaż wybór właściwej czcionki może wymagać pewnych eksperymentów, najbardziej niezawodnymi opcjami są konkretne przykłady czcionek:

• Roboto – jeśli chcesz grać bezpiecznie, użyj Roboto. Jest uważana za wszechstronną i neutralną czcionkę o wielu zastosowaniach. Ponieważ jest to tak łatwe do zrozumienia, wiele osób wybiera Roboto w celu uzyskania instrukcji i stron docelowych.
• Poppins – jeśli szukasz przyjaznego, a jednocześnie nowoczesnego i czystego wyglądu, wybierz Poppins. Ta czcionka jest bardziej zaokrąglona, ​​dzięki czemu tekst jest atrakcyjny i łatwy do odczytania.
• Raleway – Projektując dla wyrafinowanej luksusowej marki, warto rozważyć Raleway. Jest ogólnie cienki, ale ma różne wahania wagi i ogólnie elegancki wygląd.
• Lato – Przyjazny, niezawodny i poważny to właściwe słowa opisujące tę czcionkę. Projektanci mogą używać języka Lato do tworzenia nagłówków i tekstów akapitów, w których czytelność i przejrzystość są najważniejszymi kwestiami.

Weź także pod uwagę wybrany rozmiar czcionki i styl tekstu. Ogólnie rzecz biorąc, pogrubienie jest używane w nagłówkach lub podkreślaniu segmentów, podczas gdy kursywa jest używana w przypadku cytatów.

Zmiana koloru kształtu ramki

Oprócz zmiany czcionki warto także zmienić kolor kształtu ramki. Powtórzę raz jeszcze: dokładny odcień będzie zależał od marki, dla której projektujesz, i Twojej estetyki. Na szczęście interfejs Figmy ułatwia wybór koloru.

Oto jak zmienić kolory ramki:

1. Wybierz ramkę, którą chcesz edytować.

   

2. Warstwa pojawi się na prawym pasku bocznym. Przejdź do sekcji „wypełnij”.

   

3. Wybierz „+”, aby dodać wypełnienie.

   

4. Otworzy się okno wyboru koloru. Wybierz kolor wypełnienia i gradient. Możesz także wpisać kod szesnastkowy, jeśli znasz dokładny odcień.

   

Podobnie jak w przypadku innych elementów projektu, konieczne może być poeksperymentowanie z różnymi kolorami i ich wyglądem w połączeniu z wybraną czcionką.

Często zadawane pytania

Czy w Figmie istnieje polecenie przewijania tekstu?

Niestety w Figmie nie ma polecenia umożliwiającego przewijanie tekstu. Możesz jednak zakończyć proces kilkoma kliknięciami, korzystając z powyższej metody.

Jak wybrać opcję przelewu, której chcę?

Zależy to od rodzaju używanego tekstu, ogólnego projektu i jego funkcji. Styl pionowy jest zwykle dobry do przeglądania dużych tekstów.

Jaki interfejs urządzenia będzie zwykle wymagał przewijanego tekstu?

Dobrym przykładem mogą być projekty makiet aplikacji. Użytkownicy mogą stworzyć telefon jako ramkę ogólną, a przewijany tekst może stanowić interfejs aplikacji.

Czy Figma to najlepszy wybór do tworzenia przewijanych projektów?

Figma to jedno z najlepszych narzędzi do tworzenia szerokiej gamy formularzy, w tym projektów przewijanych. Co więcej, Figma jest darmowa. Możesz jednak mieć pewne osobiste preferencje. Spróbuj poeksperymentować z kilkoma platformami, takimi jak Adobe Illustrator, aż znajdziesz narzędzie najlepiej odpowiadające Twoim potrzebom.

Spraw, aby Twoje projekty były przewijalne i przyjazne dla użytkownika

Tworzenie dowolnego tekstu w ramce w Figmie jest łatwe. Po prostu wybierz klatkę, a następnie przejdź do opcji zawartości klipu. Po zakończeniu możesz wybrać opcje przewijania nadmiaru. Podobnie nie należy zaniedbywać innych kluczowych elementów projektu, takich jak kolor i kształt ramki oraz czcionka tekstu. Możliwość przewijania projektu to doskonały wybór w przypadku stron docelowych, interfejsów aplikacji i wyskakujących okien. Ułatwia przeglądanie tekstu zamiast klikania, co ostatecznie zwiększa wygodę użytkownika.

Czy przewijanie treści w Figmie było łatwe? A co z wyborem właściwej czcionki? Daj nam znać w sekcji komentarzy poniżej.