Corso di Prototipazione con Figma da Zero

Lezione 1 • Ecosistema Figma e configurazione dell'account

Tratta le app web e desktop di Figma, i tipi di piano e la configurazione dell'account. Stabilisce la base tecnica prima che inizi qualsiasi lavoro di design.

Lezione 2 • Scorciatoie da tastiera e impostazioni essenziali

Tratta le scorciatoie e le impostazioni delle preferenze più rilevanti per un flusso di lavoro efficiente. La rapidità e la precisione acquisite qui producono un effetto cumulativo in tutti i capitoli successivi.

Lezione 3 • File, pagine e organizzazione del progetto

Insegna come creare, duplicare e organizzare file e pagine all'interno dei progetti. Una struttura adeguata previene la confusione durante il lavoro successivo di prototipazione multi-schermo.

Lezione 1 • Disegnare e modificare forme di base

Tratta rettangoli, ellissi, poligoni e lo strumento stella con le relative proprietà. Queste primitive costituiscono i blocchi fondamentali di ogni elemento dell'interfaccia utente creato successivamente.

Lezione 2 • Strumento Penna Vettoriale e Modifica del Tracciato

Presenta lo strumento penna per la creazione di tracciati vettoriali personalizzati e la manipolazione dei punti di ancoraggio. Le icone e le illustrazioni personalizzate realizzate qui appariranno nelle schermate dei prototipi successivi.

Lezione 3 • Allineamento, distribuzione e spaziatura

Tratta gli strumenti di allineamento, la distribuzione automatica e i controlli di spaziatura ordinata. Una spaziatura precisa è essenziale prima di introdurre l'auto layout nel prossimo capitolo.

Lezione 4 • Comprendere la differenza tra frame e gruppi

Spiega la differenza strutturale tra frame e gruppi e quando utilizzare ciascuno di essi. I frame sono il fondamento di schermate, componenti e layout automatico.

Lezione 1 • Riempimenti, gradienti e immagini

Tratta i riempimenti a tinta piatta, i gradienti lineari e radiali e le modalità di riempimento con immagine. Queste tecniche producono sfondi rifiniti e superfici UI in tutto il progetto.

Lezione 2 • Costruire una scala tipografica

Insegna come definire una scala tipografica modulare per titoli, corpo del testo e didascalie. Una scala definita garantisce la gerarchia visiva su ogni schermata del prototipo.

Lezione 3 • Stili di testo e gestione degli stili

Tratta la creazione, la denominazione e l'applicazione di stili di testo condivisi all'interno del file. La gestione degli stili riduce le incongruenze prima che vengano introdotti i componenti.

Lezione 4 • Creazione di un sistema di colori locali

Insegna come definire token di colore primari, secondari, neutri e semantici come stili locali. I colori centralizzati rendono istantanei gli aggiornamenti globali su tutti i frame.

Lezione 1 • Vincoli e frame reattivi

Tratta le impostazioni dei vincoli che controllano come i livelli si comportano quando un frame viene ridimensionato. I vincoli combinati con l'auto layout producono design di schermate realmente responsive.

Lezione 2 • Annidamento di frame con layout automatico

Insegna ad annidare i frame di auto layout per costruire strutture UI complesse e adattive. I layout annidati sono la spina dorsale delle griglie di card, delle barre di navigazione e dei layout dei moduli.

Lezione 3 • Introduzione all'Auto Layout

Illustra il concetto fondamentale dell'auto layout relativo a direzione, spaziatura e padding. La comprensione di questo modello è richiesta prima di realizzare qualsiasi componente responsive.

Lezione 4 • Costruzione di pattern di UI responsive

Applica l'auto layout e i vincoli per costruire una barra di navigazione, una griglia di card e un modulo. Questi pattern vengono riutilizzati direttamente negli schermi del prototipo nei capitoli successivi.

Lezione 1 • Realizzazione di una libreria di componenti UI principali

Applica componenti e varianti per costruire pulsanti, campi di input, icone e card. Questa libreria è la fonte diretta per tutte le schermate realizzate nel capitolo sulla prototipazione.

Lezione 2 • Proprietà dei componenti

Tratta le proprietà booleane, di testo, di scambio istanza e di istanza annidata sui componenti. Le proprietà consentono una personalizzazione controllata senza compromettere la struttura del componente.

Lezione 3 • Varianti dei componenti

Insegna come raggruppare gli stati correlati di un componente in un insieme di varianti con proprietà denominate. Le varianti consentono di gestire i cambi di stato interattivi nei prototipi senza duplicare i componenti.

Lezione 4 • Creazione e utilizzo dei componenti

Tratta la conversione dei frame in componenti principali e il posizionamento delle istanze all'interno del file. I componenti garantiscono che una singola modifica si propaghi istantaneamente a ogni schermata.

Lezione 1 • Connessioni e interazioni del prototipo

Insegna ad aggiungere connessioni di prototipo, trigger e destinazioni tra le cornici. Le connessioni trasformano schermate statiche in un prototipo cliccabile e navigabile.

Lezione 2 • Progettazione delle schermate chiave dell'applicazione

Applica la libreria dei componenti per costruire le schermate di onboarding, dashboard e dettaglio. Ogni schermata utilizza il layout automatico e gli stili condivisi stabiliti nei capitoli precedenti.

Lezione 3 • Pianificazione delle schermate e dei flussi utente

Tratta la mappatura del flusso utente, l'inventario delle schermate e le convenzioni di denominazione prima di progettare. Pianificare previene la rilavorazione strutturale quando si collegano le schermate nelle sezioni successive.

Lezione 4 • Impostazioni di Transizioni e Animazioni

Tratta le transizioni istantanee, a dissolvenza, a scorrimento, a spinta e con animazione intelligente. Transizioni appropriate comunicano chiaramente la direzione di navigazione e il comportamento dell'interfaccia.

Lezione 1 • Componenti interattivi e cambiamenti di stato

Tratta l'uso delle varianti di componente con connessioni prototipo per simulare i cambiamenti di stato. I componenti interattivi riducono il numero di fotogrammi necessari per flussi complessi.

Lezione 2 • Scorrimento, overflow ed elementi fissi

Illustra lo scroll verticale e orizzontale, il ritaglio dell’overflow e i livelli fissi adesivi. Queste impostazioni replicano il comportamento di scorrimento nativo nei prototipi mobile e web.

Lezione 3 • Logica condizionale e azioni

Insegna le condizioni if-else e le sequenze di azioni multi-step sulle interazioni del prototipo. La logica condizionale consente flussi ramificati che rispecchiano i punti decisionali reali di un'app.

Lezione 4 • Introduzione alle variabili di Figma

Tratta la creazione di raccolte di variabili di tipo numero, stringa, booleano e colore. Le variabili consentono una gestione dinamica di dati e stati non disponibile nella prototipazione di base.

Lezione 1 • Test di usabilità con prototipi

Tratta la pianificazione dei compiti di test, il reclutamento dei partecipanti e la conduzione di sessioni moderate. I test strutturati generano un feedback utile per il ciclo di iterazione.

Lezione 2 • Modalità Ispezione ed Esportazione degli Asset

Insegna agli sviluppatori come utilizzare il pannello di ispezione di Figma e come i designer esportano le risorse. Le impostazioni di esportazione corrette garantiscono risorse pixel-perfect su tutte le risoluzioni di destinazione.

Lezione 3 • Cronologia delle Versioni e Manutenzione dei File

Tratta il salvataggio delle versioni con nome, il ripristino di stati precedenti e il mantenimento della pulizia del file nel tempo. Il controllo delle versioni protegge il lavoro e sostiene il design iterativo attraverso i vari sprint.

Lezione 4 • Analizzare i feedback e dare priorità alle modifiche

Insegna l'affinity mapping, la classificazione della gravità e la definizione delle priorità di modifica a partire dai risultati dei test. La definizione delle priorità garantisce che i problemi a maggiore impatto vengano risolti prima del passaggio di consegne.