Tipografia e testo | Figma per principianti #5

Come aggiungere e modificare testi in Figma? A cosa prestare attenzione quando si progetta contenuto? Troverai risposte a queste domande nel seguente articolo. Continua a leggere.

Tipografia e testo in Figma – indice dei contenuti:

1. Aggiungere testo
2. Proprietà del testo

Aggiungere testo

Puoi aggiungere testo al tuo file utilizzando lo strumento Testo che troverai nella Barra degli strumenti

Puoi creare due tipi di caselle di testo. Scegli lo strumento Testo, e poi:

• clicca sulla Tela – in questo modo creerai una casella di testo che si adatterà automaticamente al testo inserito.
• clicca e trascina il cursore nella Tela, in questo modo creerai una casella di testo di larghezza fissa. Questo significa che il testo che non si adatta alla larghezza della casella verrà automaticamente spostato alla riga successiva.

Proprietà del testo

Proprio come nel caso di cornici e forme, puoi vedere le proprietà del testo nel pannello Proprietà, dopo aver selezionato un livello di testo. Le opzioni disponibili ti consentono di controllare molti aspetti dei livelli di testo, tra cui dimensione, font e allineamento.

1. Stili di testo – qui puoi visualizzare e creare stili di testo.

2. Font – qui puoi scegliere un tipo di font che desideri utilizzare. Dopo aver cliccato, verrà espansa una lista a discesa. Se conosci il nome del font, basta inserirlo.

Consiglio utile: Il testo è uno degli elementi chiave dell’interfaccia, quindi la sua leggibilità è molto importante. Evita di utilizzare font script. Anche se sembrano belli, rendono il contenuto meno leggibile. Se non hai molta esperienza con la tipografia, utilizza i seguenti font: Open Sans, Roboto o Source Sans Pro.

Il plugin “Typescale” renderà il tuo lavoro più facile poiché selezionerà le dimensioni appropriate.

3. Peso e inclinazione del testo – qui puoi personalizzare l’aspetto del testo selezionando una delle varianti di font disponibili.

Consiglio utile: alcuni font non hanno le loro varianti, quindi questa opzione potrebbe non essere disponibile.

4. Dimensione del testo – qui puoi cambiare la dimensione del testo.

Consiglio utile: cambiare la dimensione della casella di testo non cambia la dimensione del testo.

5. Altezza della linea – consente di regolare la distanza verticale tra le righe di testo.

6. Spaziatura delle lettere – ti consente di regolare la distanza orizzontale tra le lettere.

7. Spaziatura dei paragrafi – ti aiuta a regolare la distanza orizzontale tra i paragrafi.

8. Larghezza automatica – fa sì che la lunghezza della casella di testo si adatti alla lunghezza del testo che digiti.

9. Altezza automatica – abilitando questa opzione controlli la larghezza della casella di testo, e la sua altezza si adatterà automaticamente.

10. Dimensione fissa – questa opzione fa sì che la dimensione della casella di testo si adatti al suo contenuto.

11. Allinea a sinistra / centro / destra – ti consente di regolare l’allineamento orizzontale nella casella di testo.

12. Allinea in alto / centro / in basso – ti consente di regolare l’allineamento verticale nella casella di testo.

Compito. 5.1. Aggiungi testi alla tua applicazione. Ricorda di mantenere le dimensioni dei font appropriate. Assicurati che il contenuto più importante sia accattivante.

• Nel caso di un’app di e-commerce, è importante che le informazioni sui prezzi e il nome del prodotto siano chiaramente visibili. Usa il font in grassetto per evidenziare il testo a cui vuoi attirare l’attenzione dell’utente.
• Assicurati che i pulsanti CTA (call to action) siano chiaramente visibili e incoraggino l’utente a cliccarci sopra. In questo caso, i pulsanti sono: “Accedi” e “Aggiungi al carrello”.
• Il colore del pulsante e il colore del testo su di esso devono contrastare tra loro in modo che il testo sia facile da leggere.
• Aggiungi etichette ai segnaposto.

Hai appena imparato come utilizzare tipografia e testo in Figma. Leggi anche: Sai cosa significa UX design?

Se ti piace il nostro contenuto, unisciti alla nostra comunità di api laboriose su Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.