Utilizzo delle App in Canva

Canva non è solo un editor grafico, ma offre anche un’ampia gamma di app e integrazioni che permettono di arricchire i progetti con elementi interattivi, immagini premium, effetti speciali e strumenti di automazione.

Dove trovare le app in Canva?

Per accedere alle app:

1️⃣ Vai nella barra laterale sinistra e clicca su “App”.

2️⃣ Qui troverai diverse categorie, come strumenti di editing, effetti grafici, immagini stock, icone, social media e automazioni.

3️⃣ Cliccando su un’app, potrai provarla e integrarla direttamente nel tuo progetto.

Alcune app utili in Canva

✅ Gen QR – Per generare QR code con personalizzazioni.

✅ Pexels & Pixabay – Librerie di immagini gratuite ad alta risoluzione.

✅ LottieFiles – Per inserire animazioni interattive.

✅ Google Drive & Dropbox – Per importare direttamente file nei progetti.

Utilizzo delle Cornici in Canva

Le cornici sono delle pratiche maschere che permettono di nascondere parte delle immagini caricate per creare piacevoli effetti compositivi. Il software offre un notevole numero di modelli che consentono numerose variazioni sul tema. Esistono cornici basate sulle lettere, numeri, figure geometriche o effetti pittorici.

Come personalizzare una cornice in Canva?

1️⃣ Seleziona un’immagine di partenza nella sezione elementi>Cornici.

2️⃣ Nella sezione caricamenti clicca con tasto sinistro e trascina l’immagine all’interno dell’area da personalizzare dell’area di lavoro.

3️⃣ Clicca sul modello per attivare il comando modifica (nella barra in alto) per effettuare le regolazioni del caso.

Creazione di Mockup in Canva

I mockup sono anteprime realistiche di un design applicato su un prodotto fisico o digitale. Vengono utilizzati per presentare loghi, grafiche e progetti in un contesto reale. Funzionano nello stesso modo delle cornici ma con effetti finali e obiettivi differenti.

Come creare un mockup in Canva?

1️⃣ Seleziona un immagine di partenza nella sezione elementi>Mockup.

2️⃣ Nella sezione caricamenti clicca con tasto sinistro e trascina l’immagine all’interno dell’area da personalizzare dell’area di lavoro.

3️⃣ Clicca sul modello per attivare il comando modifica (nella barra in alto) per effettuare le regolazioni del caso.

💡 Suggerimento: se stai lavorando a una brand identity, i mockup sono essenziali per visualizzare l’applicazione del logo su materiali aziendali.

Utilizzo delle griglie

Le griglie sono uno strumento agile che permette di realizzare rapidamente delle composizioni di immagini all’interno di un documento. Il software mette a disposizione diverse composizioni che possono essere adattate ai differenti contesti.

Anche in questo caso è necessario trascinare dalla sezione caricamenti l’immagine da inserire nell’area designata.

Con il singolo clic si attiva il comando modifica (nella barra in alto) per applicare filtri ed effetti all’immagine oppure con il doppio clic si attiva una sezione dedicata alle regolazioni dove posso modificare la dimensione e la posizione dell’immagine.

Esercitazione

📌 Obiettivo: Creare una pagina statica per Creativa Srl, un sito che propone stampe e gadget. Applicare gli elementi grafici forniti nel documento e a piacere una parte testuale per rendere credibile la schermata.

Istruzioni

✅ Crea un nuovo file in Canva con formato 1920×1080 (Full HD) e assegnagli il nome “Esercitazione 04”.

✅ Scarica il file con il logo nelle sue varianti e inseriscilo nel progetto.

✅ Sviluppa la schermata, includendo:

• Il logo nelle diverse versioni.
• I colori aziendali, applicati agli elementi della pagina (pulsanti, barre laterali, icone).
• Font coerente declinato nei diversi blocchi.
• Mockup per mostrare il logo applicato sui diversi un gadget aziendali.

✅ Impiega un layout pulito e professionale, prendendo ispirazione su Pinterest o Behance.

Scarica Materiale

TEST FINALE

PROPOSTA POSTER A3

Specifiche di progetto Foglio A3 verticale 297×420 mm.

Workshop di Fotografia Urbana

Tecniche rapide per raccontare la città

Sessione pratica dedicata a osservazione, composizione e luce naturale nell’ambiente urbano. Indicato per chi vuole migliorare i propri scatti con fotocamera o smartphone.

Programma
• Esplorazione del quartiere
• Composizione creativa
• Gestione della luce
• Editing essenziale
• Condivisione finale

Sabato 18 maggio, 15:00–18:00

UrbanLab, Via delle Industrie 42

Iscrizioni
Entro il 10 maggio. Posti limitati.

Contatti
info@urbanlabworkshop.it
Almeno un’immagine per contestualizzare: Foto suggestiva a tutta pagina o una porzione

Inserimento di Icone SVG

Le icone in formato SVG (Scalable Vector Graphics) sono molto utili perché sono immagini vettoriali che possono essere ridimensionate senza perdere qualità. Canva supporta il caricamento di file SVG per personalizzare i progetti.

Come caricare e utilizzare un’icona SVG

• Vai su Caricamenti nella barra laterale sinistra.
• Clicca su Carica file e seleziona il file .svg dal computer.
• Una volta caricato, trascinalo nella tua area di lavoro.

Una volta aggiunta un’icona vettoriale, possiamo personalizzarla:

✅ Cambiare il colore → Seleziona l’icona e usa la barra superiore per modificare il colore.

✅ Ridimensionare senza perdere qualità → Trascina gli angoli per ingrandirla o ridurla.

💡 Suggerimento: Le icone SVG sono ideali per creare infografiche, tabelle o migliorare la leggibilità di presentazioni.

Di seguito una serie di siti web dove si possono trovare delle icone SVG:

Google Icons

Box Icons

Feather Icons

Grafici in Canva

Canva permette di creare grafici personalizzati per rappresentare dati in modo visivo e professionale.

Come creare un grafico

1️⃣ Vai su Elementi > Grafici nella barra laterale.

2️⃣ Scegli il tipo di grafico più adatto:

• 📊 Grafico a barre → Per confrontare dati

• 📈 Grafico a linee → Per mostrare tendenze nel tempo

• 🔵 Grafico a torta → Per rappresentare percentuali

3️⃣ Clicca sul grafico scelto per inserirlo nella tua area di lavoro.

Personalizzazione dei grafici

✅ Modifica dei dati → Clicca sul grafico e seleziona “Modifica dati” per inserire i valori manualmente.

✅ Cambiare colori → Personalizza le barre, le linee o le fette della torta.

✅ Modifica delle etichette → Inserisci titoli e valori per rendere il grafico chiaro.

💡 Suggerimento: I grafici rendono le presentazioni più professionali e aiutano a comunicare dati in modo efficace.

Come realizzare Tabelle in Canva

Le tabelle sono utili per organizzare informazioni in modo chiaro e strutturato.

Metodo 1: Creare una tabella con griglie e forme

1️⃣ Vai su Elementi > Linee e forme e seleziona un rettangolo per creare la prima cella.

2️⃣ Duplica il rettangolo (Cmd/Ctrl + D) e allinealo con lo strumento Posizione.

3️⃣ Aggiungi il testo dentro ogni cella con lo strumento Testo.

Metodo 2: Usare i modelli di tabelle predefiniti

1️⃣ Vai su Elementi > Tabelle e seleziona un modello già pronto.

2️⃣ Personalizza colori, dimensioni e testo all’interno della tabella.

💡 Suggerimento: Per un design più pulito, usa trasparenza o colori alternati nelle righe della tabella per migliorarne la leggibilità.

Esercitazione

1️⃣ Creare un nuovo file in Canva con dimensioni A3 verticale.

2️⃣ Nominare il progetto: “Esercitazione 03”.

3️⃣ Impaginare il poster e la tabella seguendo le indicazioni contenute nel file scaricabile qui sotto.

Nel progetto Curare l’impaginazione per rendere la tabella chiara, visivamente accattivante e coerente con i riferimenti stilistici del brand. Usare una grafica ben progettata:

• Font leggibili e coerenti con i brand suggeriti.
• Colori equilibrati per evidenziare differenze tra i due prodotti.
• Spaziatura adeguata per facilitare la lettura.

Per ispirazione consultare esempi di tabelle ben strutturate su Pinterest.

💡 Suggerimento Extra: aggiungere icone per rappresentare visivamente le caratteristiche (es. batteria, schermo, impermeabilità).

Scarica Materiale

Inserire e modificare un’Immagine

Per aggiungere un’immagine in Canva abbiamo due metodi principali:

✅ Metodo 1: Trascinamento

Se hai un’immagine sul tuo computer, trascinala direttamente nell’area di lavoro di Canva. L’immagine verrà automaticamente caricata e posizionata nel progetto.

✅ Metodo 2: Libreria di Canva

Clicca su Elementi > Foto per accedere alla libreria di immagini gratuite e premium. Puoi cercare una parola chiave per trovare l’immagine adatta e cliccando sull’immagine puoi aggiungerla alla tua area di lavoro.

💡 Suggerimento: Per sostituire un’immagine in un layout predefinito, basta trascinare la nuova immagine sopra quella esistente.

🖍 Modificare un immagine

Le immagini vengono scalate sempre in modo proporzionale. Scalando in modo proporzionale l’immagine non viene distorta ma viene semplicemente tagliata.

✂️ Ritaglio: Per accedere alle impostazioni di taglio si può fare doppio click oppure cliccare sull’icona di ritaglio sul pannello strumenti.

✏️ Modifica: Selezionando un immagine, cliccando “modifica” si possono modificare le immagini regolando i colori e aggiungendo qualche tipo di effetto.

Dimensioni e Allineamenti

Quando si lavora con più elementi, è importante dimensionare e allinearli correttamente per ottenere un design pulito e armonioso.

✅ Allineare con lo strumento “Posizione”

Selezionando un elemento solo, sotto lo strumento posizione, l’allineamento avviene in relazione alla pagina.

Selezionando più elementi (cliccando su ciascuno con Shift premuto) l’allineamento avviene tra gli elementi selezionati.

Di seguito i vari tipi di allineamento:

• Sinistra, Centro, Destra → Per l’allineamento orizzontale
• In alto, In mezzo, In basso → Per l’allineamento verticale
• Distribuisci orizzontalmente, Distribuisci verticalmente → Per la distribuzione dei elementi tendo fermo il primo e l’ultimo

✅ Dimensionare:

Seleziona un elemento e cliccando sullo strumento posizione, in avanzate, troviamo i parametri di dimensione e posizione parametrica.

✅ Misurare distanze:

Per misurare la distanza tra due elementi:

• Seleziona il primo elemento.
• Posiziona il mouse sul secondo elemento e premi Alt / Option.

Gerarchia degli Elementi

In Canva, ogni elemento inserito si posiziona in un livello sopra o sotto gli altri.

✅ Come funzionano i livelli?

Ogni volta che aggiungiamo un nuovo elemento (testo, immagine, forma), questo si posiziona sopra quelli esistenti. Possiamo spostare un elemento avanti o indietro per modificare la disposizione dei livelli.

Per vedere i livelli andiamo in Posizione e poi clicchiamo su Livelli. In questa schermata si possono riposizionare e cambiare ordine ai livelli.

✅ Raggruppare

Selezionando più di un elemento e cliccando raggruppa si uniscono gli elementi in un livello solo. Combinazione rapida da tastiera Cmd/Ctrl + G.

Per togliere un gruppo premere annulla raggruppamento oppure Cmd/Ctrl + Shift + G.

✅ Bloccare un livello

Se un elemento è nella posizione giusta e non vuoi spostarlo accidentalmente, clicca su Blocca (icona del lucchetto).

Per sbloccare, clicca di nuovo sull’elemento e rimuovi il blocco.

💡 Esempio pratico: Se hai un testo sopra un’immagine, ma vuoi che sia sotto, seleziona il testo e clicca su Porta indietro.

Esercitazione

Impaginare la bozza di un libro in A5, nome progetto “Esercitazione 02”. Di seguito trovi il PDF con nome, piccola descrizione e i capitoli del libro. Creare la bozza della copertina e della pagina dell’indice.

Installazione di Canva Desktop

Prima di iniziare, scarichiamo e installiamo la versione desktop di Canva:

✅ In Canva andiamo su Profilo (in basso a sinistra) > Scarica le app di Canva

✅ Scarichiamo e installiamo la versione per il nostro sistema operativo

✅ Avviamo Canva ed effettuiamo l’accesso

💡 Nota: Canva è disponibile anche come app per smartphone e tablet, utile per modificare progetti in mobilità.

Abilitazione del Tema Scuro

Per attivare il tema scuro, seguiamo questi passaggi:

✅ Clicchiamo sull’icona cerchio diviso in due (in basso a sinistra) per aprire le impostazioni relative al Tema

✅ Scegliamo Scuro

✅ Torniamo alla schermata principale cliccando su Canva (in alto a destra)

💡 Vantaggi del tema scuro: Riduce l’affaticamento visivo e migliora la concentrazione.

Creazione di un Nuovo File

Dalla schermata principale di Canva, possiamo creare un nuovo progetto.

Tipologie di file più usate:

📊 Presentazioni – Per creare slide di presentazione

🖨 Stampe – Volantini, brochure e biglietti da visita

📱 Social media – Post per Instagram, Facebook, LinkedIn, ecc.

🖍 Lavagne online – Per brainstorming e mappe mentali

🎥 Video – Montaggi e animazioni anche per i social

📐 Dimensioni personalizzate – Importante per creare delle dimensioni di file personalizzate

➡️ Creiamo il nostro primo file in formato A4 verticale: andiamo su Stampe > Volantino

Struttura dell’Ambiente di Lavoro

All’interno di Canva, l’interfaccia è suddivisa in diverse aree:

🔹 Barra laterale sinistra → Include strumenti come Elementi, Testo, Immagini, Modelli

🔹 Barra superiore → Contiene opzioni di modifica (colore, testo, allineamento, ecc.)

🔹 Area di lavoro centrale → Dove creiamo e modifichiamo il nostro progetto

🔹 Angolo inferiore destro → Controlli di zoom e impostazioni di visualizzazione

💡 Scorciatoie per chi usa il mouse:

🔍 Zoom → Cmd/Ctrl + rotella del mouse

📌 Pan (spostare il foglio) → Tasto centrale del mouse

➡️ Rinominiamo il nostro file: (In alto centralmente) clicchiamo su Progetto senza titolo e scriviamo “Lezione 01”

Strumenti di Impostazione e Guide

Per organizzare meglio gli elementi nel nostro progetto, utilizziamo guide e margini. All’interno di File > Impostazioni troviamo:

• Righelli e guide: i righelli e le guide sono utili per allineare i vari elementi.
• Margini: i margini sono all’interno del nostro documento e servono per evitare di avvicinarsi troppo ai bordi. Vengono impostati da Canva e non possono essere modificati.
• Stampa al vivo: è un margine posizionato all’esterno del nostro documento e serve per la stampa.

Aggiungere Guide Personalizzate:

✅ Trasciniamo dal righello per posizionare le guide

✅ Per mostrare/nascondere le guide: Shift + R

✅ Per cancellare una guida trascinare all’interno del righello

✅ Per aggiungere guide personalizzate: File > Impostazioni > Aggiungi guide

✅ Per eliminare o bloccare tutte le guide: Click destro sulla pagina > Menu Guide

💡 Usare le guide aiutano a mantenere un design pulito e professionale.

Creazione e Modifica delle Forme

Dal menu di sinistra, selezioniamo Elementi e scegliamo una forma base (es. quadrato).

Azioni principali sulle forme:

✅ Spostare: Cliccare al centro e trascinare

✅ Ridimensionare: Trascinare dagli angoli, se si preme SHIFT lo scala è proporzionale, mentre con Option/Alt avviene dal centro.

✅ Ruotare: Usare l’icona di rotazione in basso

Modifiche avanzate (barra superiore):

✅ Modifica forma – Cambia il tipo di forma

✅ Colore – Cambia il colore riempimento

✅ Traccia – Attiva e modifica il contorno e il suo spessore

✅ Angoli arrotondati – Smussa i bordi

✅ Trasparenza – Regola la visibilità della forma in percentuale da 0 a 100

💡 Scorciatoie per duplicare:

🔹 Option/Alt + trascina → Duplica velocemente la forma

🔹 Cmd/Ctrl + D → Ripete l’ultima duplicazione

Aggiungere e Personalizzare il Testo

Per inserire un testo: Testo > Aggiungi una casella di testo

Opzioni di personalizzazione (barra superiore):

✅ Font → Per scegliere un carattere (Attenzione alla scelta)

✅ Dimensione → Regolare l’altezza del testo

✅ Colore → Cambiare il colore del testo

✅ Grassetto, Italico, Sottolineato → Modificare lo stile

✅ Allineamento → Sinistra, centro, destra e giustificato

✅ Interlinea → Regolare la spaziatura tra le righe

💡 Consiglio: Usare max 2 font per una grafica pulita e leggibile.

Esercitazione

📌 Creare un file A4 orizzontale con testo e forme, rispettando margini e colori. Sotto trovi l’immagine di riferimento.

💡Consiglio: Creare una cartella chiamata “Lezioni” e inserire tutti i progetti del corso al suo interno.

✅ Dimensioni: Creare un nuovo file A4 orizzontale e rinominarlo “Esercitazione 01”

✅ Margini: Impostare margini di 1 cm per ogni lato

✅ Tipografia: Colore dei testi #232a2b e font Sans Serif. Inoltre inserire il proprio Nome e Cognome in Bold, invece la professione in Regular o Light, con trasparenza al 60%

✅ Forme e colori:

Cerchio → #665782

Rettangolo → #5dbba7

Quadrati → #5dbba7

• 1° quadrato → 100% trasparenza
• 2° quadrato → 80%
• 3° quadrato → 60%
• 4° quadrato → 40%
• 5° quadrato → 40%

💡 Consiglio: Usare allineamenti e guide per una composizione ordinata.

Scarica Materiale

Slide 01 | Intro

La prima slide deve essere semplice ma con un buon impatto visivo. Se ci sono immagini o fotografie devono essere di alta qualità. In caso non ci siano giocare con i font per creare gerarchia.

Esempio:

Titolo: Presentazione – Pixel 8 Pro

Logo e Immagine

Nome cognome, nome corso ecc..

Slide 02-03-04… | Presentazione Prodotto

Dopo aver strutturato e progettato le slide attenzione in fase di impaginazione.

Creare sempre una gerarchia tra immagini, titoli e paragrafi. Attenzione ai allineamenti grafici. Se si utilizzano fotografie devono essere di alta qualità, invece per le icone devono essere chiare e semplici. Utilizzare meno colori possibili e non troppo fantasiosi, tipo troppe sfumature e ombre troppo evidenti.

Esempio Slide 2:

Con l’IA di Google e la migliore fotocamera Pixel, è lo smartphone Pixel più potente e personale di sempre.

Esempio Slide 3:

Specifiche e Novità:

• Display Super Actua da 6,7″
• Fotocamere rinnovate
• Struttura in alluminio e vetro

Esempio Slide 4:

Immagine in Photoshop

Titolo: Campagna Social

Tema

Dividersi in Gruppi di 2 persone (massimo 3 in caso di disparità). Ogni gruppo deve scegliere un prodotto diverso dagli altri. Di seguito l’elenco:

• Logithech Pop Keys e Pop Mouse
• Pedrali
• Nintendo Switch
• Dyson Supersonic
• Insta 360
• Oreo
• Herman Miller
• Hoto brushless drill
• Gucci Bloom
• Leica Sistema M
• Bang & Olufsen
• Foscarini
• Bose

Specifiche dei progetti

Dopo aver scelto un brand, realizzare con il supporto di Photoshop e Canva una presentazione così composta:

– Copertina

– Minimo 3 Slide per presentare il prodotto (spiegare con foto e testi cos’è e come funziona)

– Presentazione campagna social:

• Slide Introduzione Campagna Social (su cosa si basa la campagna e qual è l’obiettivo comunicativo)
• Immagine promozionale (1 immagine per componente del gruppo)
• 1 carosello per Instagram (composto da 3 a 5 immagini per componente del gruppo)

– Slide Chiusura

Presentazione

La presentazione dovrà essere realizzata in 16:9 dimensione minima (1920px x 1080px) ed esportata in formato PDF.

Immagine promozionale

Le dimensioni del file devono essere di 1800×1200 pixels formato web.

L’immagine deve contenere:

• foto del prodotto
• una frase ad effetto con una piccola descrizione
• il logo dell’azienda o del prodotto
• una chiamata all’azione

Potete utilizzare qualsiasi altro elemento per arricchire la vostra proposta.

Carosello Instagram

Realizzare dei post a “carosello” per Instagram ( 3-5 slide). Le immagini dovranno essere dimensionate ed esportate correttamente per la pubblicazione su Instagram.

Video: https://www.youtube.com/watch?v=4DcQML9zRQ0

Consegna e Valutazione

La consegna prevede l’invio dei vostri elaborati.

Presentazione: invio della presentazione in PDF.

Immagine Promozionale: invio di due file, il primo quello originale in formato photoshop (.psd) e il secondo in formato JPEG (.jpg).

Carosello Instagram: invio dei file del carosello suddiviso formato JPEG (.jpg) e l’immagine del carosello completa in formato JPEG (.jpg).

Attenzione: Nominare la cartella con i cognomi dei componenti del gruppo, i file all’interno della cartella dovranno essere ordinati e riconoscibili.

Inviate la cartella con le consegne alla mail del vostro docente di riferimento in JAC con con wetransfer:
flavio.salvi@ext.fondazionejobsacademy.org 
alessandro.mascoli@ext.fondazionejobsacademy.org

SMKA 1: 14/04

SMKB 1: 19/03

SMKC 1: 05/03

Verrà giudicato l’inserimento del prodotto all’interno degli elaborati, la leggibilità dei testi e la qualità del lavoro in generale.

Presentazione | Bottoni

---

Le regole base

Uno dei metodi di interazione con gli applicativi per l’utente finale sono i bottoni. In genere consentono di spostarsi di pagina oppure dare conferme e effettuare azioni. Possono essere cliccati attraverso Mouse oppure con le dita in caso di touch screen. In questo ultimo caso ricordate che la dimensione deve essere agevole per essere cliccata.

Fondamentale è capire la differenza tra Padding (generalmente segnato in verde), Margin (generalmente segato in arancione), Border (segnato in blu).

Sostanzialmente il padding è lo spazio interno tra la scritta e la fine del bottone, border è il contorno mentre il margine è lo spazio esterno, cioè la distanza tra il nostro elemento e gli altri.

Le dimensioni del pulsante devono essere proporzionate, di solito si usa l’altezza della scritta per impostare il padding sopra e sotto. Mentre il padding destra e sinistra due o tre volte circa l’altezza della scritta.

Attenzione da non fare:

1. Non utilizzare Padding troppo piccoli sia sopra/ sotto sia destra/sinistra.
2. Non creare mai più di una linea di testo all’interno del pulsante.
3. Non creare pulsanti troppo fantasiosi.

Gerarchia dei pulsanti

Una parte fondamentale ricorrente in molti elementi di grafica è la gerarchia. Anche nei pulsanti hanno delle gerarchie, e vengono divisi nel seguente modo:

Pulsante primario: viene utilizzato per le azioni più importanti oppure alle quali vogliamo dare più importanza. Esempio nei siti web per accedere a pagine rilevanti o dare input di invio. Mentre per gli applicativi vengono utilizzate generalmente per dare l’input alle azioni più importanti, come confermare un acquisto o inviare un messaggio.

Pulsante Secondario e Terziario: vengono utilizzati per quelle azioni che non sono fondamentali ma che servono per la navigazione dell’applicativo. In genere sono pulsanti che si usano di meno di quelli primari.

Come disegnare bottoni in Figma

Creare un pulsante in Figma è un processo semplice e veloce utilizzando Auto Layout. Ecco i passaggi:

1. Creare il testo del pulsante

• Selezionate lo strumento Testo e scrivete il contenuto del pulsante (ad esempio, “Invia”).

• Assicuratevi che il testo sia impostato su Auto Width:

• Questo consente al box di testo di adattarsi automaticamente alla lunghezza del contenuto.

2. Aggiungere un’icona (opzionale)

• Se il pulsante include un’icona, posizionatela accanto al testo.

3. Applicare l’Auto Layout

1. Selezionate il testo (e l’icona, se presente).
2. Attivate l’Auto Layout premendo Shift+A oppure dal pannello di destra.

Se avete solo un elemento (ad esempio, solo il testo senza icone):

• Prima create un gruppo selezionando il testo e premendo Cmd+G (Mac) o Ctrl+G (Windows).

• Poi applicate l’Auto Layout al gruppo.

4. Personalizzare il pulsante

Una volta attivato l’Auto Layout, potete personalizzare il pulsante nel pannello di destra:

• Spaziatura interna (Padding): Regolate il padding per definire lo spazio tra il testo/icone e i bordi del pulsante.

• Spaziatura tra elementi: Regolate la distanza tra l’icona e il testo, se presente.

• Colore di Fondo: Create uno sfondo per il pulsante aggiungendo un riempimento (Fill) , se necessario.

• Colore Traccia: aggiungete una traccia (Stroke), se necessario.

• Raggiatura: Impostate gli angoli del pulsante (es. arrotondati o squadrati).

Esercitazione

Replicare la seguente schermata tenendo le proporzioni corrette nei vari pulsanti e nella barra di ricerca.

⚠️ Attenzione: Nome file “Lezione 4”.

Creare e Modificare Forme Base

Per creare forme base, utilizziamo il pannello degli strumenti. Cliccando sulla freccia accanto all’icona delle forme, possiamo scegliere tra diverse opzioni: linee, rettangoli, cerchi, triangoli e altre forme predefinite.

⚠️ Ricordate: una volta terminato il disegno di un elemento, è necessario tornare allo strumento selezione per continuare a lavorare.

Modificare le dimensioni delle forme

1. Selezionate l’oggetto.
2. Spostate il cursore su uno dei bordi o degli angoli dell’elemento:

• Cliccate e trascinate per ridimensionare la forma.
• Utilizzate il tasto SHIFT per mantenere le proporzioni durante il ridimensionamento.
• Premete OPTION / ALT per scalare la forma partendo dal centro.

Modifiche dal pannello laterale

Nel pannello di destra, nella sezione POSITION e LAYOUT, è possibile:

• Regolare la posizione e le dimensioni dell’elemento in modo preciso, inserendo valori numerici.
• Aumentare o diminuire i valori usando le frecce direzionali della tastiera (SU e GIÙ).
• Eseguire calcoli direttamente nei campi numerici (es. 30+10, 20/4, ecc.).

Modificare i colori

Per modificare i colori di un oggetto o di un gruppo di oggetti:

1. Selezionate l’elemento desiderato.
2. Nel pannello di destra, sotto la sezione APPEARANCE, trovate:

• FILL: il riempimento dell’elemento.
• STROKE: la traccia (o contorno).

Modifiche al riempimento (FILL)

Il colore è rappresentato da un codice HEX. Mentre Cliccando sul quadrato del colore, si apre un pannello da cui è possibile:

• Selezionare un colore.
• Applicare una sfumatura al posto di un colore pieno.

Per togliere il colore di riempimento premere il tasto ”-”.

Modifiche alla traccia (STROKE)

Per attivare una traccia, cliccate sul pulsante ”+” accanto a STROKE. Nelle impostazioni è possibile regolare:

• Il colore.
• Lo spessore.
• La posizione (interno, esterno, o centro).
• Altri parametri avanzati.

Opzioni aggiuntive

Nella sezione APPEARANCE, è possibile regolare anche:

• Opacità: per rendere l’elemento più trasparente.
• Raggiatura degli angoli: utile per creare forme con bordi arrotondati.

Duplicare e allineare gli elementi

Duplicare gli elementi

• Metodo classico: Copiate e incollate l’elemento utilizzando i comandi Ctrl / Cmd + C e Ctrl / Cmd + V.
• Metodo rapido: Tenete premuto Option / Alt e trascinate l’elemento con il mouse.

Se si utilizza il metodo rapido, per ripetere la duplicazione in sequenza, premete Ctrl / Cmd + D dopo aver duplicato un elemento.

Allineare gli elementi

1. Quando selezionate più elementi, appariranno i comandi di allineamento nella barra in alto.
2. Selezionando un singolo elemento, questo verrà allineato al Frame in cui si trova.
3. Nel pannello di destra, sotto POSITION, trovate ulteriori opzioni di allineamento e distribuzione.

⚠️ Distanze tra gli elementi: sempre nel pannello di destra, sotto LAYOUT, è possibile visualizzare e regolare la distanza tra più elementi selezionati.

Testi

Per creare un testo:

1. Selezionate lo strumento Text dal pannello degli strumenti.
2. Cliccate e trascinate per creare un rettangolo di testo nell’area di lavoro.

Modificare il testo

Nel pannello di destra, è possibile personalizzare diverse caratteristiche del testo:

1. Font: scegliete il carattere desiderato.
2. Dimensioni: impostate la grandezza del testo.
3. Interlinea e spaziature: regolate la distanza tra righe, paragrafi e lettere.
4. Allineamento: impostate l’allineamento del testo (sinistra, centro, destra, giustificato).

⚠️ Opzioni avanzate per il box di testo

Nella sezione LAYOUT, trovate tre opzioni fondamentali per gestire la dimensione del rettangolo di testo:

• Auto Width: il box si adatta automaticamente alla lunghezza del testo.
• Auto Height: il box si espande in altezza in base alla quantità di testo.
• Fixed Size: il box ha una dimensione fissa, indipendentemente dalla lunghezza del testo.

Esercitazione

Replicare la schermata seguente assicurandovi di:

1. Create tutti gli elementi necessari che siano allineati correttamente.
2. Mantenete le distanze uguali come immagine di riferimento.
3. Utilizzate le guide, i comandi di allineamento e i tasti di duplicazione per velocizzare il lavoro.

⚠️ Per spegnere e accendere rapidamente le guide premere SHIFT + R

⚠️ Attenzione: Nome file “Lezione 2”.

Nuovi livelli e gruppi

Creare un nuovo livello

Per creare un nuovo livello, basta disegnare un elemento qualsiasi all’interno di un Frame. Noterete che nella barra dei Layers apparirà il nuovo elemento e poiché è stato creato all’interno del Frame, il livello verrà posizionato automaticamente al suo interno.

Se spostiamo l’elemento fuori dal Frame utilizzando lo strumento Move, anche nella barra dei Layers il rettangolo si sposterà all’esterno del Frame. Riposizioniamolo nuovamente all’interno.

Gestire i livelli

Disegnando altri elementi, noteremo che i livelli vengono aggiunti uno sopra l’altro nella barra dei Layers.

Creare un gruppo

1. Selezioniamo più elementi (usando il mouse o tenendo premuto Shift per selezionare).
2. Premiamo Cmd+G (Mac) o Ctrl+G (Windows) per creare un gruppo.
3. Nella barra dei Layers apparirà il nuovo gruppo, indicato con una cartella, cliccando sulla freccia accanto al gruppo, possiamo espandere o contrarre il contenuto.

Opzioni aggiuntive per i gruppi

Nel pannello di destra è possibile trasformare un gruppo in un Frame cliccando sull’apposita opzione.

Sciogliere un gruppo

Per sciogliere un gruppo, selezionatelo e premete Cmd+Shift+G (Mac) o Ctrl+Shift+G (Windows).

Plugins

I Plugins sono risorse esterne sviluppate da terze parti che possono essere integrate in Figma per aggiungere funzionalità extra.

Come accedere ai Plugins

1. Aprite il menu Action (l’ultimo a destra).
2. Andate su Plugins & Widget.
3. Cercate i plugin desiderati.
4. I plugin utilizzati di frequente possono essere salvati per un accesso rapido.

Plugins consigliati

• Boxicons (attenzione: scegliete quello corretto, non Iconduck).

• Material Symbols: una libreria di simboli e icone.

• Unsplash: per aggiungere immagini.

• Lorem Ipsum: per generare testo segnaposto.

Auto Layout

L’Auto Layout è uno strumento potente per creare regole di impaginazione dinamiche.

Attivare e personalizzare Auto Layout

1. Selezionate un gruppo o una serie di elementi.
2. Premete il comando rapido Shift+A oppure attivatelo dal pannello di destra.

Nel pannello di destra è possibile:

• Impostare l’orientamento (verticale o orizzontale).

• Definire l’allineamento degli elementi.

• Regolare lo spazio tra gli elementi.

• Modificare il padding, ovvero lo spazio tra gli elementi e il bordo del contenitore.

Opzioni Aggiuntive

Un Auto Layout si comporta come un Frame, consentendo di aggiungere o gestire elementi al suo interno.

Se un elemento non deve seguire le regole dell’Auto Layout, è possibile selezionarlo e cliccare su “Ignore Auto Layout” nella sezione Position del pannello di destra.

Operazioni Booleane

Le operazioni booleane consentono di combinare più forme con varie modalità:

• Unione: combina le forme in un unico elemento.

• Sottrazione: sottrae una forma dall’altra.

• Intersezione: mantiene solo l’area comune tra le forme.

• Esclusione: mantiene le aree non sovrapposte.

L’opzione “Flatten Selection” trasforma l’operazione booleana in un tracciato, rendendolo un elemento unico e modificabile.

Esercitazione

Creare un file con un frame smartphone nel quale posizionare un Menu nella parte inferiore.

Scegliete uno dei seguenti stili proposti per il menu.

⚠️ Attenzione: Nome file “Lezione 3”.

Specifiche menu:

• Icone: utilizzate Boxicons, dimensione 36×36 px.
• Font: DM Sans, dimensione 10 px.
• Spaziatura: distanza verticale tra icona e testo di 8 px.
• Padding del menu: minimo 16 px.

Colori:

• Colore primario: #0491C5.
• Colore nero: #454545.
• Sfondo del menu: Bianco.

Creare un progetto

All’apertura di Figma, la schermata iniziale permette di creare nuovi progetti o di aprire progetti esistenti.

Nella colonna di sinistra, oltre alle informazioni di login, troviamo:

• Drafts (bozze);
• Teams (spazi collaborativi per i team).

In alto a destra, nelle impostazioni, è possibile cambiare il tema: è consigliato utilizzare il tema scuro per ridurre l’affaticamento visivo.

È importante ricordare che Figma è un software basato sul web, il che significa che è necessaria una connessione a Internet per scaricare, lavorare e salvare i file.

Per iniziare, accediamo alla sezione Drafts e creiamo il nostro primo progetto cliccando su “New design file”. Dopo aver cliccato, si aprirà la pagina di lavoro del file.

Area di lavoro

Una volta creato un progetto, ci troviamo nella schermata di lavoro di Figma, che è composta da:

1. Pannello Strumenti Inferiore: contiene gli strumenti principali.
2. Barra di sinistra: mostra il nome del file (di default “Untitled”), che può essere modificato con un semplice clic, i Layers (Livelli) e gli Assets (Risorse).
3. Barra di destra: è un menu dinamico che mostra le proprietà degli elementi selezionati.
4. Area centrale: è la finestra di lavoro principale dove si svolge il design.

Frames

I Frames sono i contenitori in cui possiamo inserire forme, testi e immagini. Puoi immaginare i Frames come singole schermate del tuo progetto.

Come creare un Frame

1. Clicca sull’icona Frame nel pannello degli strumenti in alto.
2. Nella barra di destra, seleziona un dispositivo (es. Phone) e scegli la dimensione, ad esempio iPhone 16.
3. Il Frame apparirà al centro dell’area di lavoro.

Nella barra dei Layers, il Frame appena creato verrà visualizzato come un nuovo elemento. Per rinominarlo, fai doppio clic sul nome e scrivi, ad esempio, “Home”.

Per rimuovere una tavola selezionarla e premi Cancella sulla tastiera.

Zoom e Panning

Ecco le scorciatoie per ingrandire e spostare l’inquadratura:

• Zoom:
• Ctrl / Cmd + scroll del mouse (per ingrandire o ridurre);
• Ctrl / Cmd + “+” (per aumentare lo zoom);
• Ctrl / Cmd + “-” (per ridurre lo zoom).
• Panning (spostare l’inquadratura):
• Space + Click e trascina con il mouse.

Annullare comando

Qualsiasi operazione può essere annullata o ripristinata:

• Annullare: vai su Modifica > Annulla (o usa la scorciatoia Ctrl / Cmd + Z).
• Ripristinare: vai su Modifica > Ripristina (scorciatoia Ctrl / Cmd + Shift + Z).

⚠️ Nota: se esegui una nuova operazione dopo aver annullato un comando, l’opzione Ripristina verrà disattivata.

Salvare lavoro

Figma salva automaticamente il tuo lavoro, quindi non è necessario eseguire salvataggi manuali.

Distanze e righelli

Visualizzare i righelli

• Vai su Figma Logo > View > Rulers oppure premi Shift + R.

Aggiungere e rimuovere guide

• Per posizionare una guida, trascinala dai righelli fino all’area di lavoro.
• Per cancellare una guida, trascinala nuovamente sul righello o selezionala e premi Cancella sulla tastiera.

Misurare le distanze

Durante il posizionamento delle guide, premi Alt / Option per vedere le distanze tra la guida e altri elementi.

Per misurare la distanza tra due elementi:

1. Seleziona il primo elemento.
2. Posiziona il mouse sul secondo elemento e premi Alt / Option.

⚠️ Attenzione: il tasto Alt / Option viene utilizzato anche per duplicare un elemento durante lo spostamento.

Esercitazione

Crea un file Figma e rinominalo “Lezione 01”.

All’interno del file, aggiungi due Frames:

• Uno con dimensione iPhone.
• Uno con dimensione MacBook Pro 16”.

Posiziona i Frames affiancati e inserisci due guide per ciascun Frame:

• 32px di distanza dai bordi per l’iPhone.
• 160px di distanza dai bordi per il MacBook Pro.

Rinominare le tavole nel seguente modo:

• ”Home – Smartphone” per l’iPhone.
• ”Home – Desktop” per il MacBook Pro.