Figma Masterclass: trasforma le tue idee in siti web Pro

Creare un artboard selezionando "Frame" nell'angolo superiore sinistro o usando la scorciatoia "F"; scegliere un formato standard di 1280x832 pixel, adatto alla maggior parte dei notebook.

Utilizzare il tasto "R" per iniziare a disegnare rettangoli che replicano il design della pagina Nike, trascinandoli successivamente nell'artboard e regolando le dimensioni (es. da 38 a 40 pixel di altezza).

Modificare il colore dei rettangoli selezionando l'opzione "Fill" nella barra degli strumenti a destra e inserendo il codice esadecimale del colore desiderato o utilizzando il contagocce.

Duplicare i rettangoli per creare nuove forme, sempre mantenendo il tasto "Shift" premuto per evitare distorsioni dell'immagine durante il ridimensionamento.

Preparare un wireframe iniziale con questi elementi per presentare la struttura di base agli stakeholder, prima di procedere con il design definitivo.

Utilizzo di Estensioni e Strumenti: Si descrive come usare l'estensione "WhatFont" di Google Chrome per identificare le famiglie tipografiche utilizzate nei siti web, come quello della Nike. Alternativamente, si può utilizzare la funzione di ispezione del browser per utenti con competenze tecniche più avanzate.

Analisi Specifica del Sito Nike: Nel sito Nike, il font "Helvetica Now" è usato per il corpo del testo, mentre "Nike Futura" è impiegato per i titoli. Questi sono esempi di font a pagamento, creati specificatamente per soddisfare gli obiettivi di branding della Nike.

Operazioni in Figma: Ritornando in Figma, si spiega come inserire testo usando il tasto "T", selezionare un font simile (Helvetica Neue) e regolare la grandezza del carattere per corrispondere agli standard di Nike (es. 14 per il corpo del testo).

Duplicazione e Allineamento del Testo: Si illustra come duplicare il testo usando il tasto "Option" o "Alt" e allineare gli elementi all'interno del design per garantire coerenza visiva.

Fine Lezione e Preparazione per la Prossima: La lezione si conclude con l'aggiustamento del design del testo e la preparazione per la prossima sessione, dove si tratterà la creazione di un bottone.

Creazione e duplicazione dei rettangoli: Iniziamo analizzando tre immagini correlate a prodotti, creando un rettangolo per ciascuna immagine utilizzando le dimensioni specifiche e duplicandole con i comandi "Command D" o "Ctrl D". Utilizziamo il tasto "Option" per trascinarle e posizionarle correttamente nel layout.

Utilizzo di plugin per l'importazione delle immagini: Introduciamo l'uso dei plugin di Figma, come il plugin Unsplash, per cercare e inserire immagini stock gratuite direttamente nel design. Selezioniamo il rettangolo, attiviamo il plugin e inseriamo l'immagine scelta automaticamente all'interno del rettangolo.

Gestione delle proprietà dell'immagine: Una volta inserita l'immagine tramite il plugin, possiamo modificare le sue proprietà, come il colore o l'aggiunta di un gradiente, direttamente dal pannello delle proprietà di Figma.

Inserimento e configurazione di testo: Aggiungiamo testo sotto le immagini per descrivere le offerte (es. "fino al 50% di sconto") e regoliamo le proprietà del testo, come la dimensione, utilizzando le impostazioni consigliate dal sito di riferimento.

Creazione di auto layout e spaziatura tra elementi: Completiamo la sezione immagini utilizzando la funzionalità di auto layout di Figma per mantenere una distanza costante tra le immagini e i testi, facilitando la gestione del layout e assicurando la coerenza visiva tra i diversi elementi del progetto.

Introduzione alla funzionalità di copia e incolla in Figma per sostituire elementi all'interno di frame specifici, permettendo una sostituzione precisa e armoniosa nel design.

Utilizzo del plugin Unsplash per selezionare e inserire immagini adeguate, come l'esempio della scarpa Nike, integrando l'immagine direttamente nel frame desiderato.

Adattamento e correzione di testi e layout per assicurare che i nuovi elementi inseriti corrispondano esteticamente e funzionalmente a quelli già presenti nel design originale.

Impiego dell'auto layout per mantenere una distanza costante di 10 pixel tra gli elementi, facilitando un design pulito e organizzato.

Esecuzione della sostituzione di un frame con un altro attraverso lo shortcut 'Command shift R' o 'Control shift R', che permette di sostituire simultaneamente più frame, ottenendo così un risultato finale coerente e desiderato.

Introduzione alla funzionalità: Il video inizia esplorando la funzione di saturazione delle immagini, utilizzata per regolare l'intensità del colore. Una saturazione a zero trasforma l'immagine in bianco e nero.

Selezione e preparazione dell'immagine: Viene selezionata un'immagine da Unsplash riguardante il calcio, che viene poi ritagliata mantenendo le proporzioni corrette per enfatizzare elementi specifici, come il pallone.

Modifica della saturazione: Si procede con l'aggiustamento della saturazione dell'immagine selezionata direttamente su Figma, riducendo la saturazione al minimo per ottenere l'effetto bianco e nero.

Aggiunta di elementi di design: Dopo aver modificato il colore, il video mostra come inserire testi e altri elementi grafici nel design, utilizzando funzioni come l'auto layout per migliorare la composizione visiva.

Finalizzazione del layout: Si conclude con l'organizzazione del layout, inclusi il posizionamento di nuovi elementi grafici e la gestione dei livelli (z-index), per garantire che ogni elemento sia visibile e ben integrato nel design complessivo.

Creazione di sfondi gradiente in Figma: Il tutorial mostra come riprodurre l'effetto gradiente degli sfondi utilizzando il sito Nike come esempio. Viene descritto il processo per selezionare e modificare le immagini, concentrandosi sull'uso dei gradienti che passano da un giallo paglierino a un arancione.

Uso di immagini da Unsplash: Vengono scaricate immagini di scarpe dal sito Unsplash tramite un plugin dedicato. Successivamente, queste immagini vengono modificate per rimuovere lo sfondo con il plugin Magic Cut, che facilita lo scontorno automatico degli elementi desiderati.

Applicazione del gradiente: Nel tutorial si illustra come applicare un gradiente all'immagine di una scarpa modificando il campo 'Fill' e selezionando i colori appropriati per creare un effetto simile a quello originale del sito Nike.

Gestione dei layout: Si enfatizza l'importanza di mantenere la coerenza del design seguendo le linee guida stabilite. Viene utilizzato l'auto-layout per organizzare gli elementi in modo pulito ed elegante, e si mostrano tecniche per duplicare e ridimensionare correttamente i frame.

Finalizzazione del design: Verso la fine del tutorial, si spiega come integrare tutti gli elementi in una presentazione finale coerente. Si discute l'allineamento delle icone, la gestione del testo e l'aggiustamento dell'opacità, completando il design con dettagli precisi per migliorare l'usabilità e l'estetica generale.

Utilizzare il plugin in Figma per inserire icone, illustrazioni e foto nel design.

È possibile cercare icone specifiche (come quelle di Nike) attraverso una barra di ricerca interna al plugin, selezionando le icone desiderate dai risultati.

Modificare le dimensioni delle icone mantenendo le proporzioni tramite la barra delle proprietà per evitare distorsioni grafiche.

Utilizzare la funzione "Align Vertical" per allineare e centrare le icone all'interno del design.

La consistenza nella dimensione delle icone è essenziale; ad esempio, regolare tutte le icone a dimensioni simili (18 pixel) per mantenere un design uniforme.

Introduzione al Progetto: Il video inizia descrivendo il lavoro su un design per il sito della Nike, con focus sulla creazione di una barra di ricerca che includa un'icona e una etichetta (label) usando la funzionalità di auto layout di Figma.

Selezione dell'Icona: Viene scelta un'icona di lente di ingrandimento per la barra di ricerca, utilizzando il plugin Icons 8 per trovare l'icona adatta che corrisponde allo stile di quella usata da Nike.

Configurazione dell'Auto Layout: Dopo aver inserito l'icona e il testo nella barra, si utilizza l'auto layout per raggruppare e organizzare automaticamente gli elementi all'interno del frame, prestando attenzione a mantenere tutto all'interno dell'area di lavoro.

Dettagli di Design e Aggiustamenti: Si ajustano le distanze tra gli elementi e il padding, optando per un riempimento (fill) e un colore che corrisponda a quello utilizzato nel design di Nike, con un particolare focus su una maggiore armonizzazione visiva e consistenza.

Rifiniture e Revisione Finale: Dopo aver assicurato che l'icona e il testo siano centrati correttamente e che la barra di ricerca abbia le proporzioni desiderate, si fa una revisione finale per assicurarsi che il design sia conforme a quello di Nike, modificando il carattere e l'intensità del testo per una migliore corrispondenza.

Introduzione alla creazione del menu secondario per il sito Nike: utilizzo di Auto Layout di Figma per posizionare testi come "Trova un negozio", "Aiuto" e "Accedi", separati da divisori verticali.

Implementazione del menu attraverso la duplicazione e posizionamento di testi e divisori, selezionando gli elementi desiderati e applicando l'Auto Layout con un gap orizzontale regolabile.

Creazione del menu principale, iniziando con voci come "Novità", "Uomo", "Donna", "Kids", "Outlet" e applicando un Auto Layout per allinearli correttamente.

Aggiunta di testo informativo riguardante le consegne e resi gratuiti, con particolare attenzione a dettagli come la sottolineatura e la consistenza del layout.

Verifica finale del design per assicurare la correttezza della distribuzione spaziale degli elementi e l'aderenza al design originale del sito Nike, con particolare attenzione alla precisione delle centrature e dei margini.

Il video si focalizza su come usare la funzionalità "Mask" in Figma per migliorare il design, partendo da un esempio di rettangoli nella sezione "Scopri di più" di un sito web.

Viene spiegato come creare una maschera in Figma: selezionando una forma (rettangolo o ellisse) e utilizzando il plugin Unsplash per inserire immagini pertinenti.

Si illustrano i passaggi per applicare la maschera all'immagine scelta, utilizzando lo shortcut "Control Command M" o l'opzione "Mask" dalla barra degli strumenti per associare forma e immagine.

Al termine, si mostra come riposizionare e ridimensionare le immagini all'interno della maschera senza distorsioni, mantenendo l'omogeneità del design e facilitando il riutilizzo di componenti.

Utilizzo di Estensioni per Colori: Il video spiega come utilizzare l'estensione ColorZilla per estrarre colori da un sito web, in questo caso il sito della Nike, per utilizzarli in Figma. Basta attivare l'estensione e usare il contagocce per selezionare un colore dalla pagina.

Applicazione in Figma: Una volta estratto il colore, l'utente può copiarlo negli appunti e poi incollarlo in Figma, dove viene utilizzato per riempire un rettangolo creato, garantendo che il colore corrisponda esattamente a quello del sito originale.

Integrazione con Elementi di Design: Il tutorial continua con l'integrazione del colore in un design più ampio, mostrando come sovrapporre elementi grafici per rendere il design il più simile possibile all'originale.

Uso di Plugin per Immagini e Icone: Il video descrive anche l'uso di plugin come Unsplash e Icons8 in Figma per selezionare immagini e icone che si abbinano al design, migliorando la coerenza visiva del progetto.

Creazione di Layout e Testo: Infine, vengono illustrati passaggi per l'aggiunta di testo e la configurazione del layout, usando auto layout in Figma per mantenere le distanze consistenti tra gli elementi, e mostrando come selezionare e modificare font per abbinarsi al sito originale.

Il video tutorial riguarda il design del pre-footer di un sito Nike utilizzando Figma, concentrato su un menù pre-footer e successivamente sul footer completo, includendo icone social e informazioni legali.

L'istruttore esamina e applica il font Helvetica con una dimensione di 16 pixel, usando una estensione per identificare il colore del testo, specificamente #111 (nero), e dettagli su stili di grassetto e peso del font (VD 500).

Viene creato un layout in Figma, dove il presentatore prepara un elemento singolo per non ripetere il processo durante il tutorial, menzionando varie categorie di scarpe come esempi di contenuto.

L'uso di auto layout permette di aggiustare rapidamente le distanze tra gli elementi a 12 pixel, e l'instruttore mostra come duplicare e distribuire gli elementi orizzontalmente per mantenere la coerenza visiva.

La sessione si conclude con l'aggiornamento del pre-footer con il design appropriato della Nike e anticipa la prossima lezione sul footer, dimostrando le tecniche base per il design UX/UI tramite Figma.

Introduzione alle Icone Social: La lezione si concentra sull'aggiunta di icone social personalizzate nel footer di un sito web su Figma, utilizzando plugin specifici come Icons 8 e Mono Social Icons by Icon Duck per trovare icone con sfondi ellittici adatti.

Impostazione dello Sfondo: Viene mostrato come inserire e modificare uno sfondo nero per le icone, bloccando il rettangolo di sfondo per evitare selezioni accidentali mentre si lavora sulle altre componenti della UI.

Dimensionamento e Colorazione delle Icone: Le icone vengono ridimensionate a 32 pixel e colorate utilizzando il contagocce per assicurarsi che corrispondano al design desiderato. Viene utilizzata la regola dei multipli di 8 pixel per mantenere la coerenza nel design.

Allineamento e Auto Layout: L'allineamento delle icone viene ottimizzato creando un auto layout, assicurando che le icone siano uniformemente spaziate e visivamente bilanciate nel footer.

Visualizzazione e Prototipazione in Figma: La lezione conclude mostrando come visualizzare il design finale e navigare nel prototipo dentro Figma, utilizzando comandi specifici per differenti sistemi operativi, permettendo agli utenti di vedere il design come apparirebbe su un dispositivo reale.

Panoramica sulla Prototipazione: Il tutorial inizia spiegando come creare un prototipo digitale in Figma, utilizzando una homepage e pagine aggiuntive come quella di elenco prodotti e dettagli prodotto. Questi vengono illustrati con screenshot incollati nella tela per dimostrare il processo.

Configurazione dell'Interattività: L'istruttore mostra come rendere interattivi gli elementi selezionandoli e collegandoli ad altre schermate. Ad esempio, un pulsante nella homepage è collegato alla pagina di elenco tramite la scheda ‘Prototype’ in Figma.

Opzioni di Interazione: Vengono discussi vari tipi di interazione, come le azioni on-click che navigano verso diverse pagine. Il tutorial copre le opzioni di animazione come istantanea, dissolvenza e animazioni intelligenti, insieme a interazioni più complesse come hover, trascinamento e trigger con ritardo.

Funzionalità di Prototipazione Avanzate: Il tutorial approfondisce le funzionalità di prototipazione avanzate in Figma, inclusa la configurazione di effetti hover e risposte dinamiche, che migliorano il feedback dell'interfaccia utente e l'interazione.

Revisione e Condivisione del Prototipo: Infine, viene spiegato il processo per anteprima e condivisione del prototipo con clienti o stakeholder. Questo include visualizzare il flusso del prototipo, presentarlo in una scheda separata e l'importanza dei prototipi nel fare una buona impressione con i clienti.

Creazione Componenti Interattivi: La lezione si concentra sulla creazione di un menu interattivo in cui ogni elemento reagisce al passaggio del mouse. Prima di procedere, si crea un componente per il menu nel software di design.

Duplicazione e Modifica di Elementi: Si inizia duplicando la sezione del menu e creando una pagina separata denominata "Componenti". Successivamente, si crea un frame chiamato "Navigation Item" e si duplicano elementi come "Novità in evidenza" aggiungendo una linea sotto per indicare lo stato "over".

Definizione Stati del Componente: All'interno del frame, si scrivono gli stati "default" e "over" per gli elementi. Si creano due componenti per questi stati e si combinano usando la funzione "combine as variants" per gestire il cambio di stato durante il passaggio del mouse.

Implementazione di Interazioni: Si utilizza la sezione "prototipo" per trascinare il pulsante e selezionare l'azione "over", modificando lo stato del componente in "over". Si esplorano opzioni di animazione con "Smart Animate" per rendere l'interazione più fluida e visivamente attraente.

Riproduzione e Verifica nel Menù: Dopo aver implementato i componenti nel menu principale, si sostituiscono i componenti esistenti per verificare il corretto funzionamento. Si affrontano e si risolvono problemi come la regolazione della larghezza di una linea sotto il testo per assicurarsi che copra l'intero elemento quando attivato.

Condivisione delle schermate in Figma: È possibile condividere facilmente le schermate cliccando il bottone "share" in alto a destra nell'interfaccia di Figma, per copiare il link o invitare persone tramite email, assegnando diritti di accesso specifici (visualizzazione o modifica).

Link alla Dev Mode: Per i piani a pagamento, è possibile generare un link alla Dev Mode che dà agli sviluppatori accesso diretto agli stili, permettendo loro di scaricare asset e vedere i codici esatti degli elementi come i colori.

Link Diretto a Artboard Specifiche: Gli utenti possono creare un link per un artboard specifico (es. homepage) usando l'opzione del menu contestuale "Copy Link to Selection", rendendo facile per gli stakeholder visualizzare una parte specifica del design.

Condivisione dei Prototipi: Aprire un prototipo e usare il bottone "share Prototype" per invitare i membri del team a collaborare, supportando l'interazione in tempo reale all'interno della piattaforma Figma.

Funzionalità di Collaborazione in Tempo Reale: Figma mostra la presenza di tutti gli utenti connessi, migliorando gli sforzi collaborativi tra il team.