Creare un sito portfolio con Figma - Da principiante ad ESPERTO in 45min

[@filippo3416]

Grazie! Già uso figma ed avevo bisogno esattamente di questo video, una panoramica del flusso di lavoro di un designer che lo usa da tempo 👍👍 molti consigli preziosi, grazie ☀️

[@Webdesignerd23]

Grazie a te Filippo

[@mrmikimessina]

posso aiutarti

[@ShinkaMyers]

Grazie! Spieghi molto bene e si vede che sei molto ferrato sull'argomento! Ti ringrazio di cuore !

[@Webdesignerd23]

@@ShinkaMyers grazie a te! Gentilissima

[@SABBATINIPEVERIERIRICCARDO]

grazie mille!!

[@manuelguidi]

Davvero utile! Grazie mille.

[@micheleabbatiello2787]

Ciao, io ho un problema nella creazione della 2 tavola. Non avendo un mc, non posso usare il tasto command. Quindi quando trascino la 1 tavola verso il basso, trascina in automatico le 3 icone social. Come posso procedere?

[@Webdesignerd23]

Ciao usa CTRL. support.apple.com/it-it/guide/mac-help/cpmh0152/mac

[@francescocristiano3921]

Ciao, sto cercando di costruire il mio portfolio, conosco i linguaggi di programmazione ma sono del tutto ignorante sulle motions da poter applicare, tu come fai a trasformare i progetti in codice poi? Grazie in anticipo.🙏🏻

[@Webdesignerd23]

@@francescocristiano3921 Ciao li sviluppo a mano perché i tool che convertono il design in codice non sono affidabili

[@sergiomolinari2655]

Ciao! Anzitutto grazie e complimenti per l'esposizione chiara ed esaustiva. Puoi indicarmi se hai realizzato un video che spiega come gestire il form dei contatti?

[@Webdesignerd23]

@@sergiomolinari2655 Ciao grazie per i complimenti.. no non l'ho fatto. Considera che quello è solo il design di un form, svilupparlo e renderlo funzionante è complesso e servono conoscenze di programmazione ciao!

[@manuelguidi]

Una domanda...mi manca l'opzione "Fix position when scrolling". Come posso lasciare la Navbar fissa?

[@Webdesignerd23]

Semplice: 1. Clicca sulla navbar che hai creato 2 Clicca su prototype in alto a destra 3 Scroll behavior seleziona position 'Fixed' Ora quando scrolli in verticale la nav rimane fissa.

[@manuelguidi]

@@Webdesignerd23 Grazie, fatto.

[@andrearagazzi7375]

Ciao! Vorrei chiederti un’informazione, ho creato un sito portfolio con il tuo video, c’è la possibilità di mettere dentro immagini prese da altre sorgenti? Invece che foto prese da internet con plugin?

[@Webdesignerd23]

Certo se hai delle foto nella cartella del tuo PC o Mac puoi caricarle tranquillamente anche trascinando direttamente l'immagine su Figma

[@andrearagazzi7375]

Ciao! Grazie per la risposta! Ho caricato le immagini su figma, ma quando le vado a trascinare all’interno dei rettangoli (sezione portfolio) e quindi vado ad adattare le mie immagini alla sezione del quadrato, l’immagine si distorce. Spero di essermi spiegato bene 😂

[@RobertaMartin-s9x]

Ciao! Io ho un problema con il menu perché non mi esce quell'opzione flaggabile che esce a te per fissarlo in alto, cosa può essere? Grazie mille!

[@Webdesignerd23]

Ciao se mi indichi il minuto del video dove ne parlo, ti aiuto volentieri. Ad occhio credo tu debba: 1 selezionare l'elemento che vuoi fissare in alto 2 cliccare su prototype nella spalla a destra 3 cliccare su 'position' selezionando 'fixed stay in place'. Attendo tue

[@RobertaMartin-s9x]

Ciao! il minuto è il 41 circa, non mi compare "fix position when scrolling" invece, per quanto riguarda il punto 3, se clicco la voce "fixed stay in place" e faccio partire l'anteprima mi sparisce proprio la barra. Grazie mille!@@Webdesignerd23

[@Webdesignerd23]

@@RobertaMartin-s9x se nell'anteprima non vedi un elemento vuol dire che non è dentro il frame principale, prova a fare un check

[@Webdesignerd23]

@@RobertaMartin-s9x Ho capito cosa è successo. Con l'aggiornamento hanno tolto "fix position when scrolling" da quel punto. Ora per farlo devi selezionare la nav, andare su prototype e selezionare la position dal menu a tendina. Se non vedi la nav è perchè non è dentro il frame #PORTFOLIO come ti dicevo.

[@RoanCorporation]

ALTRO VIDEO ECCELLENTE

[@laurynb.5517]

Grazie mille, tutorial molto chiaro! Per caso farai un tutorial da figma a webflow?

[@Webdesignerd23]

Ciao Lauryn grazie mille! non credo perché non so utilizzare Webflow..sicuramente farò un tutorial su come svilupparlo in html e css che è anche più utile. ciao!

[@laurynb.5517]

@@Webdesignerd23 Grazie. Per quanto riguarda invece le pagine su figma, non ho ben capito come andrebbero gestite (non c'è un video giusto, dove nei hai già parlato?)...

[@Webdesignerd23]

@@laurynb.5517 Cosa intendi esattamente? come realizzare il sito multipagina anzichè onepage?

[@laurynb.5517]

@@Webdesignerd23 nella barra laterale a sinistra di fianco a Layer ed asset c'è Page... ma non ne ho capito le potenzialità e funzionalità😬

[@Webdesignerd23]

@@laurynb.5517 ahhh ho capito! No quella è un'altra funzione, non si riferisce alle pagine del tuo progetto (per esempio sito web multipagina). Quella funzione ti permette di creare un'altra area di lavoro. Ti faccio un esempio: Io di solito uso un'area di lavoro dove tengo le bozze, gli screenshot, i componenti e le varie soluzioni di una sezione. Poi creo un'altra pagina dove ho solamente i progetti definiti senza robe in giro.

[@ivan-vt8fn]

Domanda... io ho creato un sito web con i frame in formato 1920x1080, quando vado a fare la preview però mi taglia parte del sito perché ovviamente parte dello schermo viene sormontato dalla barra degli indirizzi del browser e da tutte le altri componenti del browser. quindi quale formato dovrei usare per far si che la mia pagina sia della grandezza giusta?

[@Webdesignerd23]

Se vuoi che si adatti perfettamente al tuo schermo, crea un frame delle dimensioni del tuo schermo. Io per esempio ho un Macbook Pro da 2880x1800. A quel punto dopo aver aperto l'anteprima clicchi sul tasto in alto a destra (con le frecce) per espandere la view a full screen. Un altro consiglio è utilizzare Figma tramite web app e non da browser, in questo modo non hai la barra del browser.

[@ChristianRubini-g1i]

bel video, posso chiederti che tasto utilizzi per prendere più elementi insieme, con il mouse non riesco

[@pinohey8648]

shift

[@nessuno2158]

Ciao sono solo un appassionato del settore per vivere faccio tutt'altro vorrei realizzare per un amico che ha una micro attività un sito carino di design diciamo.. come si fa a mettere online un sito del genere?

[@Webdesignerd23]

Ciao Figma serve solo a progettare un sito web. Per svilupparlo devi conoscere il codice HTML, CSS e JavaScript oppure puoi usare dei CMS tipo WordPress.

[@nessuno2158]

@@Webdesignerd23 grazie per il tuo tempo quindi... Quindi si può costruire un prototipo su figma ed esportarlo su WordPress con le relative animazioni senza scrivere codice?

[@Webdesignerd23]

​@@nessuno2158 Non proprio. Ci sono 2 vie: la prima è tradurre il design in codice se appunto conosci il codice html, css, js. Da qui puoi decidere se mettere tutto il codice all’interno di un cms (come wordpress) in modo da gestire tutto il sito da una dashboard. In alternativa puoi caricare il sito senza cms mettendo nel tuo hosting i file html, css e js. La 2a strada è utilizzare un plugin di Figma che trasforma in modo automatico il tuo design di Figma in codice. Non è un metodo che consiglio ma esiste e ci farò un tutorial a breve.

[@nessuno2158]

@@Webdesignerd23 ti ringrazio sarebbe molto interessante vorrei crearli qualcosa di bello come sito vetrina nulla di più l'unica funzionalità sarebbe quella di un modulo di contatto che volendo ssi può creare un pagina su WordPress Ti ringrazio in anticipo per il tutorial che farai

[@danielgalaxy40]

@@Webdesignerd23 non lasciarcii stiamo aspettando il video🥺