Come creare una risorsa scorrevole in Figma

Rendere i tuoi contenuti scorrevoli in Figma implica la navigazione nella scheda laterale. Sfortunatamente, non appare automaticamente nell’interfaccia utente principale. Il contenuto scorrevole è utile quando desideri presentare molte informazioni all’interno di una cornice del tuo progetto. Alcuni esempi includono pagine di destinazione, interfacce di app o finestre popup.

Questo articolo spiegherà come rendere scorrevoli i tuoi progetti Figma.

Adattamento di un testo scorrevole all’interno di una forma

Iniziamo creando un testo scorrevole all’interno di una forma semplice. Questo è l’esempio più comune di testo scorrevole e successivamente puoi aggiungere altre proprietà come colore, caratteri e contorni.

Ecco come è fatto:

1. Crea una forma base. Per questo esempio, ti consigliamo di creare un rettangolo verticale. Puoi farlo selezionando lo strumento rettangolo sulla barra laterale sinistra o utilizzando il comando “R”. Tieni premuto il tasto sinistro, fai clic su un punto della tela e disegna la forma.

   

2. Sulla barra laterale destra, sotto la scheda Progettazione, metti un segno di spunta accanto all’opzione “contenuto clip”.

   

3. Seleziona lo strumento testo per creare una casella di testo e posizionarla all’interno della cornice scorrevole. Digita o copia e incolla qualsiasi contenuto che stai utilizzando.

   

4. Seleziona il telaio e vai alla scheda prototipo sul lato destro dell’interfaccia. Quindi, seleziona l’opzione “scorrimento overflow” e lo stile che preferisci. Qui sceglieremo lo “scorrimento verticale”.

   

Dopo aver fatto clic sull’opzione di scorrimento overflow nella scheda prototipo, sono disponibili più stili. Scegliamo quello verticale poiché stiamo usando un rettangolo verticale come esempio. Ciò ti consente di leggere il testo dall’alto verso il basso. Alcuni degli altri stili includono:

• Scorrimento orizzontale: in alcuni esempi gli utenti possono far scorrere il testo da sinistra a destra. Questa opzione è preferibile se stai creando progetti in formato paesaggistico.
• Nessuno scorrimento: se desideri bloccare i tuoi contenuti, scegli l’opzione senza scorrimento.
• Entrambe le direzioni: crea un design con molti contenuti e scorri sia verticalmente che orizzontalmente.

Dovresti utilizzare funzionalità di scorrimento all’interno del tuo progetto per ridurre al minimo lo sforzo (clic) utilizzato dal tuo lettore mentre interagisce con il contenuto. Possono scorrere o utilizzare la rotellina del mouse invece di fare clic o toccare tonnellate di testo.

Come progettare i tuoi componenti scorrevoli

A seconda del prodotto, dovrai progettare la cornice del contenuto e il contenuto stesso. Il processo prevede l’aggiunta di colori, caratteri e potenzialmente altri componenti al design complessivo. Cambiare questi elementi è facile, ma selezionare l’estetica giusta richiede un’attenta considerazione.

Come cambiare il carattere del tuo design scorrevole

La prima cosa che devi fare è cambiare il carattere del tuo design scorrevole. Figma offre una vasta gamma di stili tra cui scegliere. Ecco il metodo più semplice:

1. Seleziona il contenuto nella cornice scorrevole che desideri modificare.

   

2. Naviga nel menu a tendina situato in alto a sinistra e selezionalo.

   

3. Scorri i caratteri finché non trovi quello che desideri utilizzare.

   

Se il marchio per cui stai progettando ha una tipografia particolare, probabilmente sceglierai la stessa in modo che sia coerente con l’immagine del marchio. Se hai più margine di manovra, dovresti sperimentare diversi esempi prima di scegliere quello giusto.

Alcune considerazioni includono:

• Intento progettuale: la scelta di una tipografia dovrebbe corrispondere all’intento del tuo progetto. Se vuoi trasmettere molte informazioni in modo chiaro, punta su font meno decorativi ma eleganti.
• Altri componenti: il tuo carattere è un elemento visivo come qualsiasi altro nel tuo design. Dovrebbe corrispondere al telaio e agli altri componenti inclusi.
• Estetica generale e marchio: l’atmosfera generale del marchio dovrebbe influenzare anche il carattere scelto. Ad esempio, un servizio di consegna di fiori non presenterà lo stesso carattere di una pagina di destinazione SAAS.

Sebbene la scelta del carattere corretto possa richiedere un po’ di sperimentazione, alcuni esempi di caratteri concreti sono le opzioni più affidabili:

• Roboto – Se vuoi andare sul sicuro, usa Roboto. È considerato un carattere versatile e neutro con molte applicazioni. Dato che è così facile da capire, molti scelgono Roboto per le istruzioni e le pagine di destinazione.
• Poppins – Per un appeal amichevole ma moderno e pulito, scegli Poppins. Questo carattere è più arrotondato e rende il testo attraente e facile da leggere.
• Raleway – Quando progetti per un marchio di lusso sofisticato, potresti prendere in considerazione Raleway. È generalmente sottile ma presenta diverse variazioni di peso e un aspetto complessivamente elegante.
• Lato – Amichevole, affidabile e serio sono le parole giuste per descrivere questo carattere. I progettisti possono utilizzare Lato per titoli e testi di paragrafi in cui leggibilità e chiarezza sono le principali preoccupazioni.

Ti consigliamo inoltre di considerare la dimensione del carattere e lo stile del testo scelti. In genere, il grassetto viene utilizzato per i titoli o per enfatizzare i segmenti, mentre il corsivo viene utilizzato per le virgolette.

Modifica del colore della forma della cornice

Oltre a cambiare il carattere, ti consigliamo di cambiare anche il colore della forma della cornice. Ancora una volta, la tonalità esatta dipenderà dal marchio per cui stai progettando o dalla tua estetica. Fortunatamente, l’interfaccia di Figma semplifica la selezione di un colore.

Ecco come puoi cambiare i colori della cornice:

1. Seleziona la cornice che desideri modificare.

   

2. Il livello apparirà sulla barra laterale destra. Passare alla sezione “riempimento”.

   

3. Selezionare il “+” per aggiungere un riempimento.

   

4. Si aprirà una finestra di selezione del colore. Seleziona il colore di riempimento e la sfumatura. Puoi anche digitare un codice esadecimale se conosci la tonalità esatta.

   

Come con altri elementi di design, potrebbe essere necessario sperimentare colori diversi e il loro aspetto con il carattere scelto.

Domande frequenti

Esiste un comando di testo scorrevole in Figma?

Sfortunatamente, non esiste un comando per rendere scorrevole un testo all’interno di Figma. Tuttavia, puoi completare il processo in pochi clic utilizzando il metodo sopra menzionato.

Come faccio a decidere quale opzione di overflow desidero?

Dipende dal tipo di testo che stai utilizzando, dal design generale e dalla sua funzione. Lo stile verticale è solitamente utile per sfogliare testi di grandi dimensioni.

Quale interfaccia del dispositivo avrà solitamente bisogno di un design con testo scorrevole?

Un buon esempio potrebbero essere i modelli di progettazione per un’app. Gli utenti possono creare un telefono come cornice generale, mentre il testo scorrevole può essere l’interfaccia dell’app.

Figma è la scelta migliore per realizzare disegni scorrevoli?

Figma è uno dei migliori strumenti per creare un’ampia gamma di moduli, inclusi disegni scorrevoli. Meglio ancora, Figma è gratuito. Tuttavia, potresti avere alcune preferenze personali. Prova a sperimentare alcune piattaforme, come Adobe Illustrator, finché non trovi lo strumento più adatto a te.

Rendi i tuoi progetti scorrevoli e facili da usare

Creare qualsiasi testo all’interno di una cornice in Figma è semplice. Seleziona semplicemente il fotogramma e poi passa all’opzione del contenuto del clip. Una volta completato, puoi scegliere le opzioni di scorrimento dell’overflow. Allo stesso modo, non dovresti trascurare altri elementi di design cruciali, come il colore e la forma della cornice e il carattere del testo. Rendere scorrevole il tuo design è una scelta eccellente per pagine di destinazione, interfacce di app e finestre pop-up. Rende i testi più facili da sfogliare invece di fare clic, migliorando in definitiva l’esperienza dell’utente.

Hai trovato facile rendere scorrevoli i tuoi contenuti in Figma? Che ne dici di selezionare il carattere giusto? Fatecelo sapere nella sezione commenti qui sotto.