Tutorial Framer: come creare fantastici prototipi interattivi

Dai un'occhiata ai prototipi di esempio di seguito. Questi sono stati fatti in Framer. Dopo questo tutorial, potrai iniziare a creare i tuoi fantastici prototipi animati in pochissimo tempo.

Framer è uscito con la sua versione più recente una settimana fa e il mercato della prototipazione non sarà più lo stesso. Lo strumento di prototipazione Framer era difficile da padroneggiare ma utile come il software di prototipazione più accurato e illimitato. Ora le cose sono cambiate. Framer ora include le funzionalità Design + Code + Collaborate, il che significa che puoi creare il tuo prototipo direttamente all'interno di Framer, sviluppando un prototipo completamente funzionale senza alcun software di terze parti e senza alcuna abilità di codifica.

Qui, ti insegnerò come utilizzare un semplice codice Framer senza alcuna conoscenza preliminare della codifica richiesta. Imparerai come combinare le migliori funzionalità del design e della modalità codice in Framer per creare prototipi animati e interattivi. Quindi entriamo in questo tutorial e prendiamo alcuni piccoli frammenti di codice per migliorare i tuoi prototipi.

Nozioni di base sul corniciaio

Iniziamo! Basta andare su framer.com e scaricare una versione di prova. Ti stanno dando due settimane della loro demo completamente funzionale e, fidati di me, è abbastanza tempo per imparare molto su questo software di prototipazione.

Dopo l'installazione, potresti voler esaminare alcuni degli esempi forniti e giocarci un po'. Quando hai finito, è il momento di iniziare la prototipazione.

(In questo tutorial di Framer, mi concentrerò sulla creazione di prototipi direttamente in Framer.js. Dovresti anche sapere che ci sono altri modi per iniziare a creare prototipi in Framer. Ad esempio, puoi lavorare direttamente con i file di Sketch. Tratterò quel flusso di lavoro in un altro articolo.)

Il nuovissimo Framer – Modalità Design

In questo articolo creeremo tre fantastici prototipi in pochi minuti con un utilizzo minimo del codice: interazioni di base, componente di scorrimento e componente di pagina

L'ultima versione di Framer ha una grande novità: la modalità design. Ti consente di lavorare quasi allo stesso modo di Sketch o Figma. Puoi creare livelli vettoriali, importare immagini o creare e applicare uno stile ai livelli di testo. Tutto questo diventa molto utile quando vuoi prototipare rapidamente senza app di terze parti.

Creiamo un design di tipo app

Nella prima parte di questo tutorial, prepareremo un playground per il nostro prototipo Framer. Creeremo un design di tipo app, con tre diversi tipi di livelli: vettoriale, immagine e testo.

Passaggio 1: crea un semplice pulsante e uno sfondo.

Per iniziare il tuo design, seleziona la prima scheda, che è la modalità di progettazione, e aggiungi una tavola da disegno, proprio come in Sketch. In questo tutorial, lavoreremo su un prototipo di iPhone 7, quindi ho scelto questo preset come dimensione della mia tavola da disegno. Ho anche aggiunto un riempimento di sfondo blu.

Quindi, seleziona lo strumento rettangolo e crea una forma sotto forma di un semplice pulsante rotondo.

Passaggio 2: aggiungi una carta con un'immagine.

Il secondo metodo per aggiungere livelli è la funzione di trascinamento della selezione. Puoi selezionare qualsiasi file immagine dal tuo computer, rilasciarlo in Framer e modellarlo utilizzando la barra laterale destra. Ho usato una semplice illustrazione e l'ho disegnata come una carta.

Passaggio 3: aggiungi un titolo per l'app.

Framer ti consente anche di aggiungere un livello di testo. Ancora una volta, lo stile è fondamentalmente lo stesso di qualsiasi software grafico. Puoi scegliere font, dimensione, allineamento, spaziatura delle lettere e altro.

Passaggio 4: indica a Framer quali livelli sono interattivi.

Abbiamo ancora un passaggio prima di iniziare il nostro prototipo Framer. Dobbiamo solo dire a Framer quali livelli saranno interattivi. Basta fare clic sul punto accanto al nome del livello all'interno del pannello dei livelli. È bene assegnare un nome appropriato a ciascun livello per un ulteriore utilizzo. Ho chiamato la mia scheda livelli e il pulsante .

Passaggio 5 (Bonus): definisci i tuoi colori globali.

Una buona pratica è definire alcune variabili per l'intero prototipo. Puoi impostare la tavolozza dei colori, la tipografia e le dimensioni di base che utilizzerai dall'inizio. Questo aiuta a risparmiare tempo su tutta la linea.

Quando si impostano i colori, è sufficiente nominarli nell'editor di codice e fornire valori HEX, RGB o RGBa dopo il segno "=" appropriato. Ricorda di mantenere tutte le variabili nella parte superiore del tuo codice.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Passaggio 6 (Bonus): aggiunta della posizione relativa.

Con il nuovo Framer, è molto facile mantenere reattivo il tuo prototipo. È possibile impostare posizioni relative dalla modalità di progettazione , come illustrato di seguito:

Ecco un breve elenco di proprietà utili per allineare e calcolare la posizione del livello direttamente nel codice. Puoi fare i calcoli necessari per calcolare le posizioni dei livelli. Ciò diventa necessario quando aggiungi interazioni in un secondo momento e desideri mantenere il tuo prototipo reattivo.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Ora sei pronto: iniziamo il nostro progetto

Abbiamo creato diversi tipi di livelli Framer. Ora il nostro parco giochi di interazione è pronto per partire.

Finalmente! La parte noiosa è giunta al termine. Ora è il momento di un po' di design dell'interazione.

Scarica l'intero prototipo qui.

1. Creazione di un'interazione di feedback sui pulsanti

Per progettare qualsiasi interazione, abbiamo bisogno di un trigger per realizzarla. Può essere quasi tutto: un tocco sullo schermo, la fine di un'animazione, la fine del caricamento di un'immagine o l'accelerometro del telefono.

Passaggio 1: creazione dell'evento per l'interazione.

Lo terremo semplice. Creiamo un feedback sul pulsante quando lo tocchi, usando il comando seguente:

 layerA.onTap (event, layer) ->

Framer ha appena scritto questa riga di codice per te. Significa che quando tocchi il livello del pulsante, succederà qualcosa.

Passaggio 2: aggiunta di animazioni all'evento.

Iniziamo un'animazione dopo questo trigger. Per fare ciò, fai clic sul punto accanto al livello del pulsante nel pannello dei livelli, quindi seleziona Aggiungi animazione . Quando aggiungi un'animazione, Framer passa alla modalità di modifica dell'animazione. Puoi ridimensionare, spostare, ruotare o modificare qualsiasi parametro del livello:

Framer ha aggiunto alcune righe di codice in più. (Non preoccuparti: puoi ancora modificare la tua animazione con il pannello di animazione.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Congratulazioni! Hai appena creato la tua prima interazione. Funziona solo una volta in questo momento, ma lo sistemeremo. Il motivo per cui puoi attivare questa animazione solo una volta è che non c'è nulla che accada al termine dell'animazione. Dobbiamo ripristinare tutti i parametri al termine della prima animazione come erano prima.

Passaggio 3: ripristino dell'animazione.

Aggiungi un altro evento, quasi come abbiamo fatto prima. La differenza è che stiamo cercando un evento al termine dell'animazione:

Questa volta, il codice aggiunto da Framer sarà simile a questo:

 button.onAnimationEnd (event, layer) ->

Quindi, quando l'animazione sul livello del pulsante è terminata, possiamo aggiungere l'animazione successiva che ripristinerà i parametri del livello del pulsante :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Questo è tutto! Ora abbiamo un feedback funzionante dopo aver toccato il nostro pulsante.

2. Creazione di stati diversi per le interazioni a livello di carte

Ok, ora sai come progettare un'animazione e attivarla. Più spesso, devi progettare diversi stati di un livello. Puoi progettare più stati dello stesso livello modificando solo alcuni parametri, come posizione, dimensione o opacità.

Passaggio 1: aggiunta e creazione di stati per un livello di carte.

Il modo per aggiungere uno stato alla carta è quasi lo stesso dell'aggiunta di un'animazione. Devi fare clic sul punto accanto al livello della carta e quindi fare clic su Aggiungi stato . Ora sei passato alla modalità di modifica dello stato. Progettalo come preferisci:

Si prega di prestare attenzione al rientro del codice. Dovrebbe iniziare dalla prima riga.

Ho progettato due stati diversi per il livello della mia carta :

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Passaggio 2: aggiunta di eventi.

C'è solo un altro passaggio per farlo funzionare. Dobbiamo creare un evento per cambiare questi stati.

 button.onTap -> card.stateCycle()

Ciò che fa è cambiare tutti gli stati del livello uno per uno, ogni volta che esegui un'azione. Quindi, nel nostro caso, ogni volta che tocchiamo il livello del pulsante , passiamo allo stato della carta . Se desideri creare più stati e attivarli correttamente, lo snippet seguente funzionerà molto meglio per te:

 button.onTap -> card.stateSwitch("b")

Questo frammento è utile quando vuoi attivare uno stato particolare del livello.

L'ultima modifica che ho apportato al mio prototipo è una modifica della velocità dell'animazione e della curva tra gli stati:

 card.animationOptions = curve: Spring time: 0.8 

C'è molto di più che puoi fare con gli eventi , ma a questo punto sarai in grado di creare quasi tutte le interazioni di base. È una delle documentazioni meglio scritte che abbia mai visto.

Velocizzare il tuo lavoro in Framer: Componenti

È giunto il momento di aggiungere componenti per velocizzare il tuo lavoro. Per ottenere il massimo da questo tutorial da questo momento in poi, scarica questo prototipo.

1. Il primo componente: lo scorrimento

Ho modificato un po' il nostro prototipo. Ora abbiamo un elenco all'interno, ma la sua altezza è al di sopra della risoluzione dello schermo. Dobbiamo creare lo scrolling per poter vedere l'intero elenco nel prototipo.

Passaggio 1: creazione di livelli e configurazione dei componenti.

Iniziamo creando un livello con un'altezza maggiore del nostro schermo. Contrassegna questo livello come interattivo e assegnagli un nome elenco . Quindi passa alla modalità codice. Questa volta non useremo la comoda barra laterale sinistra. Impostiamo l'intero schermo in modo che sia scorrevole:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Questo codice crea un'area invisibile con la larghezza e l'altezza del dispositivo corrente.

Passaggio 2: indica a Framer quali livelli desideri scorrere.

Non è ancora successo niente. Dobbiamo dire a Framer quali livelli dovrebbero essere scorrevoli. Per fare ciò, aggiungiamo il nostro livello di elenco al componente di scorrimento:

 list.parent = scroll.content

Passaggio 3: blocco dello scorrimento verticale.

Siamo autorizzati a scorrere ora, ma sta accadendo in tutte le direzioni. Dobbiamo bloccare lo scorrimento su un asse verticale:

 scroll.scrollHorizontal = false 

Oh! Hai creato una pergamena all'interno della tua app con solo cinque righe di codice semplice.

2. Il componente Pagina: scorrere da schermo a schermo

Un'interazione molto popolare per passare da una schermata all'altra è lo scorrimento. L'idea qui è molto simile al componente di scorrimento. Puoi scaricare un prototipo funzionante qui.

Passaggio 1: configurazione del componente.

Innanzitutto, dobbiamo creare una "scatola" nell'editor di codice in cui avverrà la magia:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

A questo punto, dovresti avere familiarità con tutto il codice qui. È solo una semplice configurazione del componente e della sua area. Ora dobbiamo creare alcuni livelli da scorrere.

Passaggio 2: creazione di livelli

Useremo il nostro primo prototipo di design e lo modificheremo un po'. Invece di un'immagine della scheda, questa volta ho importato due immagini.

All'inizio, dobbiamo rendere la tavola da disegno due volte più ampia. Nel pannello delle proprietà della tavola da disegno, trova la larghezza e moltiplicala per due (o aggiungi semplicemente *2 ). Metti le carte una accanto all'altra, attivale con il punto blu e nominale correttamente: carta1 e carta2 .

Passaggio 3: aggiunta di livelli al componente pagina.

Alla fine del nostro codice nell'editor di codice, dobbiamo aggiungere:

 card1.parent = page.content card2.parent = page.content

Ciò significa che stiamo aggiungendo questi livelli al componente.

Il componente della pagina è ora pronto per l'uso!

Parola finale

È tutto gente! Spero che tu abbia trovato questo tutorial di Framer utile per iniziare il tuo viaggio con lo strumento di prototipazione più potente sul mercato. Inoltre, dovresti considerare di unirti al gruppo Framer su Facebook. C'è una vasta comunità in giro e sono utili quando inizi.

Se desideri approfondire ulteriormente Framer, prova a leggere la documentazione di Framer.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche