Figma è davvero fantastico.
Non sono la prima a dire che Figma è una manna dal cielo per i designer.
Ha reso il mio processo di progettazione più efficiente e mi ha reso un designer migliore.
Figma ha raggiunto la sua meritata posizione di superiorità nella comunità dei designer non per caso. Tuttavia, noi come designer non possiamo contare su un solo strumento per fare TUTTO.
Anche se Figma ha apparentemente inghiottito Abstract, Invision, Zeplin, Sketch, e qualsiasi altra cosa sul suo cammino, Framer può ancora essere un concorrente.
Uso ancora Figma per tutto il mio lavoro di UI, per gestire i sistemi di progettazione, la collaborazione del team e altro. Quando si tratta di creare prototipi cliccabili per i test degli utenti o di creare animazioni per Dribbble, però, sono rimasto impressionato dalla potenza di Framer.
Perché la comunità design non si accorge dell’enorme potenziale di Framer?
Parliamo di come possiamo utilizzare Framer per migliorare i nostri progetti.
Cos’è Framer?
Come UX Lord ha detto nel suo articolo Figma vs Framer — “Framer è uno strumento di progettazione di prototipi, ma si può usare il codice reale per creare o personalizzare i componenti. Anche se lo strumento di codifica può spaventare i designer, Framer funziona perfettamente e funziona alla grande come uno strumento di progettazione autonomo anche se si sceglie di non usare affatto la codifica”.
1. Campi di testo
Documentazione su Framer — Per saperne di più
I campi di testo giocano un ruolo praticamente in ogni interfaccia in una forma o nell’altra. Con i componenti interattivi in Figma si può mettere insieme qualcosa che imita un po’ la digitazione in un campo di testo, ma ci vorrà una vita per crearlo e non si avvicina al campo di input di default in Framer.
È facile come cliccare su insert e poi trascinare e rilasciare un campo di input e stilizzarlo come si vuole. Il tuo design avrà immediatamente la possibilità di un reale input da parte dell’utente senza alcuna difficoltà.
2. Elementi di scorrimento sticky
Tutorial su Framer — Guarda su YouTube
Occasionalmente una certa cornice dovrebbe rimanere in una posizione durante lo scorrimento. Questo è particolarmente utile per le intestazioni di sezione e la navigazione fluttuante. Tuttavia è molto difficile da fare in Figma, quindi dobbiamo fare affidamento su esempi e documentazione di terze parti per spiegare questa caratteristica ai nostri sviluppatori.
In Framer gli oggetti in uno stack scrollabile possono essere impostati come un oggetto “sticky” e le regole possono essere impostate per regolare come si comporta. Raccomando di seguire il tutorial di Framer per capire come funziona.
3. Cursori
Documentazione su Framer — Per saperne di più
Recentemente è stato creato un tutorial su come creare un cursore di layout automatico in Figma, ma molte persone hanno chiesto, “come faccio a farlo funzionare in prototipazione?”
Beh, non si può fare in Figma, ma Framer ha un componente di default che può essere trascinato in giro in prototipazione proprio come nella realtà. Potete anche attaccarlo facilmente ad un valore numerico con un piccolo frammento di codice.
4. Effetti di scorrimento
Documentazione su Framer — Per saperne di più
I diversi effetti di scorrimento sono davvero divertenti e facili da usare. Mi ricorda il vecchio windows movie maker – basta trascinare un effetto sullo schermo e il gioco è fatto!
Flusso di copertura
È frustrante quanto tempo è necessario spendere per creare un prototipo con un effetto cover flow in Figma. Sì, si può fare, ma c’è bisogno di una nuova schermata per ogni artboard ed è complicato da gestire.
Framer rende questa esperienza un gioco da ragazzi. Potete trascinare una “pagina” e poi semplicemente collegare l’artboard che volete far scorrere e funziona senza bisogno di un’animazione automatica.
Effetto cubo
Effetto pila
Un effetto pila è difficile da realizzare in Figma, ma è divertente giocarci per ottenere qualcosa di simile alle carte di credito impilate come in Apple Wallet.
5. Integrazione della mappa
Documentazione su Framer — Per saperne di più
L’integrazione della mappa è una delle centinaia di integrazioni diverse che possono essere utilizzate in Framer. Andate su Framer Packages e sfogliate tutti i diversi modi in cui potete far impazzire il vostro team di progettazione.
6. Hover prospettico
Questo è un altro pacchetto che è davvero pulito e facile da implementare. Di nuovo, ci sono centinaia di questi pacchetti, quindi andate a controllare per vedere cosa c’è là fuori – Guardate
7. Effetti sonori e media
Se la tua app ha effetti sonori, Framer ti copre. Puoi anche riprodurre musica, video, GIF, video di Youtube e altri tipi di contenuto proprio all’interno del tuo prototipo.
8. Effetto ruota
Documentazione su Framer — Per saperne di più
9. Animazione del cuore
Documentazione su Framer — Per saperne di più
Framer ha un numero infinito di possibilità quando si tratta di sovrapposizioni di codice. Questa è una di esse. In Framer puoi scrivere funzioni e applicarle a qualsiasi elemento del tuo canvas.
Gli override possono essere utilizzati per passare dati tra gli input di testo, visualizzare dinamicamente dati da un’API e creare animazioni di gesti personalizzate.
Le sovrapposizioni di codice sono più complicate delle altre opzioni che ho condiviso, ma la maggior parte delle volte copiare e incollare uno snippet di codice è tutto quello che dovete fare. Vedi altre sovrapposizioni di codice qui.
10. Blocco da disegno
Documentazione su Framer — Per saperne di più
Avere una firma o un blocco da disegno in un prototipo sembra una magia nera, ma è tutto possibile con le integrazioni del pacchetto Framer.
In questo articolo ho coperto solo una piccola parte di tutte le brillanti capacità di Framer. Raccomando di sfogliare l’elenco completo per vedere cos’altro ha da offrire Framer.
Vuoi diventare un UX designer? Prova questo corso pratico!
