FIGMA LE BASI: Guida per iniziare (Italiano) Web Design di un Sito Mobile - Corso Web Design #6

➡️ Scarica la guida FREE sul WEB DESIGN che CONVERTE qui:
bit.ly/guida-w...
🔥 Passa al Next Level con il Corso Web Design UX Pro:
bit.ly/next-le...
➡️ Dai un occhiata la Corso sullo Sviluppo di Siti Web:
marchettidesig...
In questo video andiamo a vedere le basi del software free di web design per eccellenza FIGMA. Questo potente programma free per realizzare design professionali di siti web è diventato in pochi anni il top player, è incredibile che il suo piano free consenta di utilizzare praticamente tutte le funzionalità che servono per realizzare un sito professionale.
In questo video andremo a vedere come utilizzare Figma al meglio e come partire a realizzare Web Design professionali realizzando il design di un sito mobile, impareremo a utilizzare l'interfaccia di Figma e le risorse free disponibili per questo fantastico software.
...
Seguimi su instagram per vedere il dietro le quinte del mio lavoro: / andrea_marchetti_design
Iscriviti al gruppo dove parliamo di eCommerce e WooCommerce:
bit.ly/gruppo-n...
🎁SCARICA TUTTE LE RISORSE FREE + i file creati nei Video, iscriviti alla community:
bit.ly/marchett...
🔥Dai un occhiata al corso su WordPress Next Level WP PRO:
bit.ly/next-lev...
🔥Dai un occhiata al corso su WooCommerce Next Level WOO PRO:
bit.ly/next-lev...
🚀 Il mio hosting preferito: bit.ly/md-siteg...
📦 Il mio Setup Postazione + Video: www.amazon.it/...
🤖Rimani aggiornato con i nuovi contenuti iscriviti al Bot: bit.ly/bot-marc...
🔴Iscriviti al canale, nuovi video ogni settimana ;-)
/ @marchetti_design
TEMI WordPress FREE
WLOW: www.marchettidesign.net/wlow
Fullby: www.marchettide...
Gridby: www.marchettide...
Swipy: www.marchettide...
Fullbase: it.wordpress.o...
SOCIAL
Twitter: / afmarchetti
Facebook: / marchettidesignnet-140...
Github: github.com/afm...
Codepen: codepen.io/afm...
- ♪♫ Artists' Credit & Links ♫♪ -
► Music by: LAKEY INSPIRED
• SUBSCRIBE to the LAKEY INSPIRED KZbin channel HERE - www.youtube.co....
• Follow LAKEY INSPIRED on SoundCloud HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Instagram HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Spotify HERE - open.spotify.c....
• Support LAKEY INSPIRED on Patreon HERE - (Optional) / lakeyinspired
--- • (C) Copyright Notice:
This is FREE royalty free music that has been released under the "Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) license." Details about the license can be found HERE - creativecommon.... - Disclaimer: The creative commons music featured in this video has been modified and adapted. The original music has been remixed/edited and converted into video format. This video was made to create artistic visuals for entertainment purposes, to help promote the music and original artist.
-♫ [NCM Links] ♫♪- [No Copyright Music]
• Follow NCM on Twitter HERE - goo.gl/VF8ggk
• Follow NCM on Facebook HERE - goo.gl/aaTtyF
• If you're an artist who wants your music featured on the channel or an artist that would like your music removed, please contact Airtight @ ([e-mail])
No Copyright Music is a KZbin channel dedicated to releasing daily music uploads to help creators enhance the creativity and popularity of their content.
We hope you enjoy our FREE KZbin music library of royalty free music, copyright free music, no copyright music, and creative commons music for KZbin videos.
NCM No Copyright Music - Chill Lo-Fi hip hop beat FREE music by LAKEY INSPIRED (Copyright Free Music)
Camera - iPhone 8 Plus / Sony RX100 m4
Stay Tuned!

[@alextrevisan7639]

sei fortissimo, grazie mille per video come questo che mi aiuteranno a non impazzire per un'esame all'uni

[@MaurizioGianniniOlistico]

Finalmente qualcuno che ci illustri con competenza e utilità Figma! Applauso

[@chefaticalavitadabikers]

Ho iniziato da pochi giorni con Figma e questo video mi è stato davvero utile! Verdò anche gli altri, Grazie :)

[@Marchetti_Design]

Grazie a te del feedback!

[@rosaantonellasantamaria9810]

Considerato che non ho nessuna esperienza ma tanta voglia di imparare devo dirti che pare davvero semplice da come lo spieghi.... Ti farò sapere se riesco a metterlo in pratica! Comunque grazie mille

[@Marchetti_Design]

Daje!

[@rosaantonellasantamaria9810]

@@Marchetti_Design Gentilissimo! Mi potresti dire come mai non funziona il Control d sul mio Windows? Ho iniziato a provare come ci hai detto ma non mi duplica...

[@MarcoPlaneta]

Bel Videotutorial su Figma. Bravo Andrea

[@massimilianocoppola4911]

sono uno sviluppatore fullstack freelance e mi sto divorando i tuoi video. Mi sono sempre affidato per avere un riferimento di partenza grafico, ho pensato che è momento di iniziare a farmeli da me :D

[@Marchetti_Design]

Ottima scelta stai aumentando il tuo valore! E il livello dei tuoi progetti!

[@MrRocherit]

Il tuo video è stato super efficiente. grazie.

[@nicolgallo299]

Grazie mille per questo video!

[@AstroLabio1]

"design fico"? viva l'ottimismo!

[@jacklemonfizz6898]

Si mi è stato utile ciao a presto

[@AlbertoFior]

Super come sempre 🤩

[@paolobitocco]

Eccolo l'appuntamento della settimana. Difficilmente riuscirò a rinunciare ad Adobe XD, ma provare i software mi piace troppo. Questa sarà la giusta occasione per provare bene Figma.

[@alessiabarnes1028]

super

[@Valiam.84]

Spieghi in modo davvero chiaro e conciso! Io mi sto avvicinando per la prima volta a questo mondo e vorrei chiederti se Inkscape è un buon programma per iniziare e se rispetto a Figma, presenta molte differenze. Grazie in anticipo!

[@Marchetti_Design]

Grazie del supporto, Meglio figma che è pensato per creare interfacce web 😉

[@Valiam.84]

@@Marchetti_Design Grazie!

[@AforismiDAutoreAD]

Una volta fatto il design, per cosa torna utile Figma in maniera pratica? Come si porta tutto online?

[@Marchetti_Design]

Figma serve a fare il design in modo veloce, poi fai il codice a manina del sito con le giuste strategie e skills sei molto piu veloce di un builder, lo vediamo nei corsi pro

[@AforismiDAutoreAD]

@@Marchetti_Design Ma si potrebbe fare il design con qualunque software di grafica a questo punto?

[@christianlopiccolo1318]

una domanda: una volta ideato il design di un ipotetico sito, come importo la grafica creata con frigma nel sito reale?

[@Marchetti_Design]

Si scrive il codice a manina, se vuoi imparare come farlo professionalmente in modo efficace dai un occhiata qui: kzbin.info/www/bejne/gGKTZniQjddoba8

[@SanchezMusics]

@@Marchetti_Design quindi su questo rispetto ad Adobe XD cambia poco? Rimane pure Figma un solo software di progettazione grafica, senza la possibilità di pibblicare il sito finito come si poteva fare con l'ottimo Adobe Muse, aihmè abbandonato. Grazie

[@carlochiavellati7762]

Adoravo letteralmente ADOBE Muse, era assolutamente fantastico, e mi permetteva di fare tutto quello che mi passava per la testa! @@SanchezMusics

[@simonecontesini]

Non so se hai detto che c'è anche la possibilità di scaricare app desktop. Penso sia comodo in caso di modalià off-line

[@noceranunzio]

non capisco una cosa---chi sara a rendere reattive le icone? questo progetto saras fatto in html? grazie

[@AforismiDAutoreAD]

quoto

[@WorldAnimal-vs4we]

Buongiorno sig. Marchetti, grazie per le informazioni di questa utile guida. Avrei una domanda da farti, è possibile realizzare un layout con un immagine ad alta definizione "in movimento, per capirci, una sorta di google- heart visto dallo spazio e con le luci dalla notte al giorno? grazie Dimenticavo, il layout dev'essere realizzato per una web-app

[@Marchetti_Design]

si basta inserire un video

[@GiuseppeStancarone]

Perdona la domanda magari sciocca, di solito i lavori li salvo in cartelle sul locale, non ho niente nel cloud, come gestisco tutti questi lavori con Figma se vengono lasciati sul cloud? Altra domanda, se devo condividere il file con uno sviluppatore X, ma voglio che la mia copia originale sia mantenuta senza che nessuno lo tocchi come faccio?

[@Marchetti_Design]

Figma e i tuoi file vivono solo in cloud, non puoi scaricarli è un modo nuovo (si fa per dire ormai sono quasi 10 anni) e moderno di lavorare.

[@carolmaI1mn]

Ciao! Se posso chiederti, una volta che hai prototipato il tuo progetto, esporti il codice da figma o riscrivi a parte il tutto per fare il sito?

[@Marchetti_Design]

Ciao, scrivo a manina possibilmente utilizzando il tuo framework di partenza per ottimizzare i tempi

[@receitasdecomidacaseiraita6218]

@@Marchetti_Design sono duro di comprendonio... Che senso ha creare un sito in Figma se poi devo usare un editor html? Tanto fa usare direttamente un editor html, o no? Proprio non ci arrivo

[@Marchetti_Design]

@@receitasdecomidacaseiraita6218 perchè a fare una modifica su figma ci metti un secondo a fare una modifica via codice e con altri sistemi molto di più, hai poi vincoli che non ti permettono di creare e sperimentare creando un design perfetto per l'utente

[@receitasdecomidacaseiraita6218]

@@Marchetti_Design scusami, sono rimasto ancora a Dreamweaver e agli anni 90 e la tua risposta non mi è chiara. Vorrei ben capire quale potrebbe essere l'utilità di Figma per la creazione del mio sito in html o PHP... Figma è un programma vettoriale con il quale si può simulare il design di una interfaccia utente, giusto? Il file vettoriale creato da Figma però non può essere semplicemente trasformato in un file .html o .PHP per la visualizzazione su un browser, quindi bisogna usare un editor html o un software CMS tipo Wordpress. Di conseguenza una modifica visuale apportata al file Figma è semplice ed immediata ma poi la modifica deve essere fatta al file .html o .php che verrà visualizzato dal browser. Allora che ci faccio con il file vettoriale generato da Figma? Sinceramente continuo a non capire

[@micolvilla8368]

@@receitasdecomidacaseiraita6218 purtroppo probabilmente non hai mai avuto occasione di avere qualche designer bravo che collaborasse con te e ti spiegasse. Comprendo che se si ha la testa da sviluppatore sia un po' difficile, come se si ha la testa da designer spesso non si comprende che si deve lavorare per lo sviluppo e non per un' interfaccia superfica che poi è difficile da sviluppare. infatti uno dei problemi più grandi è la comunicazione tra UX designer e developer. In giro vedi video UI che fanno robe assurde e poi c'è sempre qualche developer che piange per svilupparle e a ragion veduta. Credo che tu sia confuso anche perchè con tutto il rispetto questo video mostra le basi, ma non parla ad esempio di colonne (fondamentali per un corretto layout), è solo puramente grafica. Ma FIGMA è molto ma molto di più, e ti permette di collaborare e di fare cose in maniera molto più veloce rispetto a qualunque altro tool. Prova magari a guardare anche i video direttamente dall'account di Figma.

[@wasimboukahil8942]

Ciao, non ho capito come inserirlo magari su Wordpress e far si che le icone siano reattive (sono alle prime armi)

[@Marchetti_Design]

Devi scrivere il codice a manina, vediamo come farlo nei corsi pro

[@vincenzomarinosci8972]

ciao, ho visto che quando inserisci un immagine o un rettangolo, questo rimane comunque nel layer (non si vede " l'eccesso" dell'immagine se non durante la lavorazione, poi puntando il cursore in un altro punto, la punte della scarpa [che non rientrava nel layer] scompare). come mai a me non succede? le foto e i rettangoli a me ad es. si vedono anche oltre il layer e sono perciò costretto a farli precisi, senza poter eccedere.

[@annamarialocurtodesign]

Ma il piano gratuito permette di fare progetti illimitati o solo 3??

[@Marchetti_Design]

Puoi fare infinite bozze

[@dle9216]

Ciao, video non bello di più! Dato che stavo seguendo passo passo questo esempio volevo dirti che sono arrivato alla fine ( importare le icone social dall'altro progetto) e il copia incolla non va. So che è una fesseria ma non capisco cosa c'è che non va. Grazie e seguirò tutti i tuoi video

[@giulioguerra884]

con figma si possono creare anche loghi?

[@Marchetti_Design]

Si io lo uso anche per quello

[@marcobelli1736]

Si può implementare a shopify?

[@Marchetti_Design]

è un bel casino lavorare custom su shopify meglio woocommerce

[@federicacrasto9815]

E se uno volesse aggiungere in figma un font di adobe? Come si possono aggiungere nuovi font?

[@Marchetti_Design]

Cerca su google basta scaricare un plugin

[@carmineammaturo8485]

💯🔝

[@Diacono96]

c'è un modo per trasformare il progetto in codice?

[@Marchetti_Design]

Studiare html/css e js dai un occhiata ai corsi in descrizione ;)

[@diegoanselmi4989]

Ciao, che programma hai usato per registrare questo tutorial?

[@diegoanselmi4989]

intendo registrare lo schermo e mettere la tua faccia nella finestrella che all'occorrenza si può spostare oltre a mostrare cosa viene digitato nella tastiera 😄

[@maccalfa]

Faccio una domanda al gruppo, magari qualcuno mi può aiutare. E' possibile e come si può integrare della grafica animata fatta con Figma in altri tipo di codice, tipo .net, C#, ecc.

[@Marchetti_Design]

Si basta saper programmare con il linguaggio che vuoi utilizzare per fare l'interfaccia

[@PietroLaTorre-w6r]

questo video è visibile a 2x senza problemi

[@Marchetti_Design]

Daje!

[@CocacolaBoy83]

Io sulla grafica e la comunicazione me la cavo, ma se voglio imparare a farmi siti da solo quanto devo sapere di programmazione? perchè su quello sto a zero proprio…è sufficiente che mi guardo tutti i tuoi video? eheh

[@Marchetti_Design]

Vai sul home del canale guarda il primo video in alto 😉

[@CocacolaBoy83]

@@Marchetti_Design Grazie era il video che cercavo, sono nel posto giusto allora

[@NicolaStrumia]

Se dovessi in poche parole dire cosa offre in più rispetto a MockFlow? :)

[@Marchetti_Design]

Non conosco mockflow

[@TheMarco1985ism]

si può convertire un progetto figma in wordpress?

[@Marchetti_Design]

Si scrivendo il codice a manina

[@TheNightflier70]

È possibile generare il codice HTML/CSS dei prototipi creati con Figma?

[@Marchetti_Design]

no

[@AforismiDAutoreAD]

@@Marchetti_Design e quindi a cosa serve?

[@Marchetti_Design]

@@AforismiDAutoreAD a fare un preview del sito in poco tempo progettando design e comunicazione.

[@AforismiDAutoreAD]

@@Marchetti_Design e poi? A questo punto si potrebbe fare con qualsiasi software di grafica come Photoshop, Canva, Illustrator ecc?

[@AforismiDAutoreAD]

@@Marchetti_Design e poi? A questo punto si potrebbe fare una preview con qualsiasi software di grafica come Photoshop, Canva, Illustrator ecc?

[@simonecontesini]

Rettifico, ho fatto un test e l'app off-line non funziona.

[@micheleattolini]

Non funziona perché figma non salva file in locale, l'unica eccezzione è quando la connessione smette di funzionare una volta aperto un file, in quel caso una copia locale viene salvata dal browser in attesa del ripristino della connessione, ma non puoi aprire altri file di figma nel mentre. La versione Desktop ha l'unico vantaggio di poter essere vista come "indipendente" rispetto al browser web e di poter importare automaticamente i font dal pc.

[@simonecontesini]

@@micheleattolini grazie mille. Gentilissimo per la spiegazione

[@roberto6759]

Ora Figma è a pagamento confermate?

[@Marchetti_Design]

No