Siamo abituati a vedere sempre i soliti slider o carousel con scorrimento orizzontale (a proposito..hai già visto il tutorial su come creare uno slider automatico con Figma?)

Così ho deciso di crearne uno davvero creativo che ha come oggetto..la pizza.

Alla fine del tutorial sarai in grado di creare uno slider circolare con Figma….circolare?? esatto, hai capito bene.

Come ho creato questo slider circolare con Figma?

Innanzi tutto ho scaricato delle immagini di pizze riprese dall’alto.

Poi le ho scontornate con Photoshop.

In alternativa potete trovare qualcosa su pngtree.com ma per questo tutorial non preoccupatevi, ho preparato un file dove potrete scaricare gli assets ed essere pronti per iniziare il tutorial.

In questo link trovi gli assets utili per il tutorial.

Successivamente ho posizionato le pizze sul perimetro di un quadrato di dimensioni 900x900px.

Ho creato degli chevron, dopo aver inserito del testo (“choose your pizza”) nel frame principale.

Successivamente ho raggruppato il quadrato, le pizze e gli chevron.

A quel punto ho creato 4 frame.

In ogni frame il quadrante delle pizze ruotava di 90°.

Ho trasformato i 4 frame in “component set” e ho prototipato il tutto scatenando l’interazione al click sugli chevron.

Come vedrai nel tutorial è molto interessante l’effetto della pizza che ruota mentre ruota tutto l’asse con le 4 pizze.

Il tutorial è molto semplice e lo trovi qui.

Iscriviti al canale ed impara ad utilizzare Figma e Adobe Xd come un PRO .

The post Pizza slider tutorial con Figma first appeared on Webdesignerd.

Nella fattispecie ci focalizzeremo sulla realizzazione di un carousel automatico.

Che cosa è un carousel e come si realizza con Figma?

Il “carousel” è un componente che ci mostra delle immagini che si alternano con delle interazioni al click o dopo un delay.

Mi spiego meglio.

Vogliamo mostrare 3 immagini nella homepage del nostro sito per comunicare qualcosa.

Ipotizziamo di essere una palestra e vogliamo che i nostri utenti intuiscano dalle immagini che vedono nella homepage, che nella nostra palestra è possibile fare sollevamento pesi, cross fit e calisthenics.

Come faccio a tradurre tutto questo attraverso delle immagini ma senza creare troppa confusione?

Posso mostrare un’immagine alla volta che cambia dopo una certa quantità di tempo che vado a determinare.

Quella quantità di tempo si chiama “delay” ed è una tecnica utilizzata anche nella produzione dei video, nel motion graphic ed ovviamente nel prototyping quando realizziamo siti web e app mobile.

Prima di iniziare il tutorial scarica gli assets a questo link https://www.dropbox.com/sh/unf9x64oid…

Oppure utilizza delle immagini royalty free su Unsplash.com

Realizzeremo insieme il carousel di sfondo, ovvero le immagini che scorrono in automatico.

Questo è il risultato finale ed una volta realizzato creeremo un secondo mockup andando ad aggiungere una forma tra il testo e il carousel di sfondo.

Successivamente andremo a completare il design con l’aggiunta degli altri elementi che la compongono ovvero: la navbar, il tagline, il sottotitolo e la call to action.

Iscriviti al mio canale e impara ad utilizzare Figma e Adobe Xd come un PRO.

*pssss..a proposito di homepage..hai visto il mio articolo dove spiego come puoi realizzare hero section infinite grazie a questo metodo? dai subito un’occhiata! clicca qui –>

The post Carousel design tutorial con Figma first appeared on Webdesignerd.

Lo swipe esiste da tempo ma ha iniziato ad avere un utilizzo importante da quando esistono i dispositivi touchscreen.

Fare uno swipe significa scorrere il dito da un punto all’altro di uno schermo touch per svolgere un’azione.

Da destra a sinistra (o viceversa) oppure dall’alto verso il basso.

È utile quando dobbiamo scorrere delle immagini contenute in un carousel o quando vogliamo vedere le notifiche nella top bar del nostro smartone.

Nel primo caso scorriamo la immagini da destra a sinistra, nel secondo caso dall’alto verso il basso.

In questo tutorial vi mostrerò come realizzare lo Swipe con Adobe Xd.

Vuoi imparare a disegnare un sito web da zero?

Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd

The post Creare lo Swipe con Adobe Xd first appeared on Webdesignerd.