14, 15 e 16 dicembre 2020
NEXT LEVEL FIGMA
Online Workshop con Mirko Santangelo
Con l’inizio di una nuova decade del design, la nostra comunità globale aprirà nuovi scenari per l’esplorazione creativa.
In un’era di moderni visionari, in cui la linea tra design e codice diventa sempre più sottile, Figma è diventata uno dei player maggiori nel mercato dei design tool, offrendo ai suoi utilizzatori la possibilità di abbracciare nuovi modelli di lavoro collaborativo per la gestione del flusso di progettazione digitale.
Il workshop è diviso in tre sessioni online a tema, ed illustrerà tecniche pratiche per la produzione di esperienze web in Figma, attraverso lo sviluppo di un progetto dedicato.
Le sessioni, guidate dal designer Mirko Santangelo, approfondiranno tematiche sul lavoro multidisciplinare in Figma in ambiti come l’ideazione e art direction, l’architettura delle informazioni, visual design, tipografia e interaction design.
Un focus su come lavorare in Figma per elevare la qualità delle produzione creative, iterare e validare idee velocemente, restare al passo con i design trend e non ultimo, utilizzare Figma al di là della classica progettazione statica. Ad esempio, sviluppando strumenti per estendere le capacità di Figma attraverso il creative coding e plugins — dall’automazione dei task ripetitivi, allo sviluppo di prototipi con animazioni interattive — “Designers Can Code™”.
Un’occasione di formazione professionale unica e irripetibile targata HANDOFF in cui scoprire come i progettisti del digitale possono combinare design e codice in Figma per raggiungere nuovi traguardi creativi.
Questo evento non è direttamente correlato a Figma, Friends of Figma o a nessuno dei suoi marchi
A chi è rivolto questo workshop
Il corso è rivolto a figure del digital design quali Creative Designer, UI Designer, Creative Developer e Graphic Designer impegnati nel misurarsi con i nuovi modelli di progettazione in Figma.
Al termine del workshop avrai acquisito conoscenze utili a massimizzare il flusso di progettazione creativa in Figma, estendere le capacità di Figma attraverso le API, e migliorare la qualità della progettazione per prodotti web responsive.
Livello di difficoltà: Intermedio/Avanzato
Good to Have: Conoscenza base o intermedia di Figma e codice front-end (HTML, CSS, JS)
Programmazione e formato
Le sessioni del workshop si terranno nelle seguenti giornate:
• lunedì 14 dicembre dalle 10.00 alle 13.00
• martedì 15 dicembre dalle 10.00 alle 13.00
• mercoledì 16 dicembre dalle 10.00 alle 13.00
Tutte le sessioni avranno lo stesso formato:
09:45 – 10:00 • Apertura virtuale delle porte, chat e networking
10:00 – 11:15 • Prima sessione
11:15 – 11:30 • Coffee break
10:30 – 13:00 • Seconda sessione + Domande e risposte
Di quale software avrai bisogno
Per visualizzare i webinar, installa il client Zoom per Meetings, disponibile per tutti i principali sistemi operativi. Il download e l’installazione potrebbero richiedere alcuni minuti, quindi, se possibile, scaricalo in anticipo.
Design Tools
– Figma
Development Tools
– VS Code
– Google Chrome
– Front-End Stack (HTML, CSS, Javascript, Typescript)
– Front-end Tooling (Figma Plugin e Rest API, Parcel, NPM, Greensock GSAP)
Programma del workshop
Questo workshop online è suddiviso in tre giorni.
Il programma potrebbe cambiare leggermente in base a come stiamo procedendo di giorno in giorno, dando anche il tempo di rispondere alle domande.
Al termine del workshop i partecipanti riceveranno la registrazione video dell’intero workshop, per poter rivedere le sessioni in un momento più comodo.
Le sessioni si svolgeranno dalle 10:00 alle 13:00 di lunedì 145, martedì 15 e mercoledì 16 dicembre 2020
Lunedì 14 dicembre
THINK
Fig{max} Creative thinking
Semantica del Design ( ~ 45m )
Processi di ricerca generativa per il design digitale e la direzione creativa in Figma
• Curated Research: Ispirazione artistica, riferimenti e design patterns;
• Mood-boarding selettivo: collezionare e definire gli elementi del linguaggio visivo; • Validazione delle idee, gestire sessioni di brainstorming collaborativo;
Scenari di collaborazione alternativa ( ~ 30m )
Non solo visual — Workflow, strategie e management di progetto in Figma
• Process Architecture: Organizzazione multi-progetto e files su modello agency; • On-boarding e condivisione delle risorse con il design team;
DEFINE
Fig{max} User Experience Design
Architettura dell’informazione ( ~ 45m )
Strumenti per la progettazione di layout web a taglio editoriale.
• Auto-layout e componenti per il mapping e la classificazione dei contenuti;
• Low-fidelity: Layout e composizione, content-blocking di un interfaccia responsive.
Do more with less ( ~ 45m )
Metodi di scripting in Figma per l’integrazione del codice nel flusso di lavoro
• Figma Plugin API e document-tree.
• Data parsing e automazione dei task ripetitivi.
Martedì 15 dicembre
VISUALIZE
Fig{max} UI Design per il Web
Concept e Page Design ( ~ 45m )
Definizione del visual design per contenuti e testi;
• Spatial system: ritmo orizzontale e verticale, costruzione grid system responsive; • Typesetting: scala e contrasto tipografico, definizione del type system, pairing.
• Art-direction fotografica e gestione delle immagini.
Colore come linguaggio ( ~ 45m ) Metodi di ricerca e applicazione dei colori;
• Costruzione palette colori e abbinamenti;
• Theming e generazione programmatica di varianti colore;
ADAPT
Fig{max} UI Design per il Web
Responsive design ( ~ 45m )
Adattamento dei layouts desktop verso i dispositivi touchscreen.
• La progettazione per i piccoli schermi.
• Simulazioni e preview su dispositivi reali.
Showcase & Handoff ( ~ 45m )
Utilizzare Figma sul modello di single source of truth (SSOT).
• Showtime: presentazioni live e showcase dei progetti.
• Viewers vs Editors: esportare ed accedere al progetto. • Guidelines, specifiche ed on-boarding per i developers.
Mercoledì 16 dicembre
BUILD
Fig{max} Creative Development
D.I.Y. Design Tools ( ~ 1.15 hr )
Estendere le capacità creative di Figma attraverso il codice.
• Sviluppo di una web-app per integrare animazioni avanzate attraverso i file di Figma.
• Coding per Designers: setup dell’ambiente di sviluppo, live-server locale e bundling;
• Preparazione degli assets in Figma per la realizzazione di prototipi interattivi;
ANIMATE
Fig{max} Creative Development
Motion Design ( ~ 1.30 hr )
Design e sviluppo di animazioni per il web
• Coding di animazioni interattive attraverso GSAP.
• Timeline, Easing ed Eventi DOM.
• Motion design trends, risorse e references per lo sviluppo.
Codici, sconti e regali
I nostri sponsor hanno messo a disposizione dei premi per tutti i partecipanti e regali a estrazione.
- Fifthbeat
1 borsa di studio per UX Dojo del valore di 2000€ per un estratto a sorte tra tutti gli iscritti - Avocode
2 anni di account per un estratto a sorte tra tutti gli iscritti - Balsamiq
3 mesi di estensione trial per tutti gli iscritti - Overflow
20% di sconto sulla licenza annuale per tutti gli iscritti. 1 anno gratis per un estratto a sorte tra tutti gli iscritti - Zeplin
3 mesi di Starter account per tutti gli iscritti - Stickermule
Un codice promozionale per tutti gli iscritti
Tickets
Riserva il tuo posto in anticipo e risparmia sul prezzo
Super Early Bird
- fino al 15 novembre
Early Bird
- fino al 6 dicembre
Full Price
- dal 7 dicembre
Sponsor
Ringraziamo gli sponsor dell’evento per il prezioso supporto
Partners
La realizzazione di questo evento è stata possibile anche grazie al prezioso aiuto dei nostri partner
HANDOFF si rivolge a tutti quei professionisti, creativi digitali, designer e developer che credono nella visione di un futuro in cui queste figure professionali convergono sempre di più e le cui competenze tendono a contaminarsi.
HANDOFF vuole raccontare e diffondere il rinascimento del design digitale attraverso la testimonianza e la pratica condivisa di designer e developer professionisti che si sono contraddistinti, sulla scena italiana e internazionale, proprio per questa loro capacità di innovare con una visione più ampia e trasversale della progettazione, integrando conoscenze che solo fino a qualche anno fa erano impensabili, per l’uno e per l’altro.
