Figma Web Design Tutorial for BeginnersYouTube↗  IA↗(long shot)
Education  2K views 100 likes 1 dislikes   16 Jun 2020
Sara Brunettini 11.6K subscribers United Kingdom YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
today we are taking a look at that amazing software code figma figma is
Oggi diamo un'occhiata a uno stupendo software chiamato Figma.
great for collaborating designing and prototyping perfect for UX designers web
Figma è ottimo per collaborare, progettare e prototyping. Perfetta per i designer UX, web
designers or designers of all sorts hi my name is Sara I work full time as a
designer o designer di ogni sorta. Ciao, sono Sara e lavoro a tempo pieno come
product designer and they also run my own freelance business from home if you
Product Designer e gestiscono anche la mia attività freelance da casa.
new here make sure you click the subscribe button and all the links that
Se sei nuovo qui assicurati di fare clic su pulsante Iscriviti e tutti i link che
mentioned in this video you can find them in the description below if you
menzionerò in questo video li potrai trovare nella descrizione qui sotto.
want to have a closer look at my life at the designer you can find me everyday on
Se vuoi dare un'occhiata più da vicino alla mia vita come designer mi puoi trovare tutti i giorni
Instagram so now let's jump into this video in the
su Instagram. Passiamo subito al video.
last video we look at my five best web frame and prototyping tools and one of
Nell'ultimo video abbiamo visto i miei 5 strumenti preferiti per il wireframing il prototyping e uno
them was actually figma I've been designing websites in figma for over two
di questi era Figma. Progetto siti web con Figma da oltre due
years and because I've been doing this for so long
anni e siccome lo sto facendo da così tanto tempo
I created a kind of formula to help me speed up my workflow and I'm super
ho creato una specie di formula per aiutarmi ad accelerare il mio flusso di lavoro e sono super
excited to share it with you but first what is Figma figma is a
entusiasta di condividerla con te. Ma prima cosa è Figma?
design and collaborating tool and basically you can do anything from
Figma è uno strumento di progettazione e collaborazione e in pratica puoi fare qualsiasi cosa dalla
producing wireframes prototypes component libraries and invite everybody
produzione di prototype, wireframe, components library e invitare tutti
to collaborate with you with real time make sure you stick around to the end
a collaborare con te in tempo reale. Assicurati di rimanere fino alla fine
because I'm gonna share with you some tips to help you collaborate in figma
perché condividerò con voi alcuni suggerimenti per aiutarvi a collaborare con Figma
with clients and developers now let's jump into it
con i clienti e gli sviluppatori. Inziamo subito!
I love figma because I can manage the whole design project in one place and
Amo Figma perché riesco a gestire l'intero progetto di design in un unico posto e
avoid the stress of constantly having to email my clients or having to deal with
evito lo stress di dover costantemente inviare e-mail ai miei clienti o dover aver a che fare
hundreds of documents emails pictures phones and so on of course I still have
con centinaia di documenti e-mail, immagini, fonts e così via. Ovviamente ho ancora
emails and documents but way less than you probably think
e-mail e documenti ma molti meno di quanto pensi.
first we're gonna look at how I use pages to organize my figma files each
Prima vedremo come uso le pagine per organizzare i miei file di Figma.
page represents a different stage in the design process let me show you for this
Ogni pagina rappresenta una fase diversa del processo di progettazione lasciate che vi mostri.
website I've created seven pages so I can do massive brainstorming and wanna
Per questo sito web ho creato sette pagine così da poter fare un enorme brainstorming su una
put the finished design in another one and so on the first page includes mood
e mettere il ​​disegno finito in un altra. La prima pagina include
board snapshots and any kind of random file but I can use them as a starting
mood boards, snapshots e qualsiasi tipo di file che posso usare come punto di inizio.
point the second one is dedicated to user research which means I'm gonna add
La seconda è dedicata alla ricerca sull'utente, il che significa che aggiungerò
any kind of information about the users to help the creation of user personas in
qualsiasi tipo di informazione sugli utenti per aiutare la creazione degli users personas
them empathy mapping on the third page I've
e la mappatura empatica. Nella terza pagina
got the wireframe stage which doesn't look very exciting but
ho il wireframe stage che non sembra molto eccitante ma
it's super important as it allows me to explore different solutions without
è super importante in quanto mi permette di esplorare diverse soluzioni senza
spending too much time on the details I split the final design into desktop and
passare troppo tempo sui dettagli. Divido il design finale in desktop e
mobile as each pal world owns his own prototype and which makes it easy to run
mobile visto che ogni pagina ha il proprio prototype e questo rende facile eseguire
user tests for different platforms or screen sizes in the component lighter
user test per differenti piattaforme o dimensioni dello schermo.
bloody we can find all the reusable components such as bottoms tabs heading
Nella components library possiamo trovare tutto le componenti riutilizzabili come bottoni, intestazioni, schede
service abuse multiple times in the file having a system like this in place helps
che ho usato più volte nel file. Avere un sistema come questo aiuta
maintain consistency and speed up the design process and it helps developers
a mantenere la coerenza e ad accelerare il processo di progettazione e aiuta gli sviluppatori
understand the logic behind any design decisions last but not least on the
a comprendere la logica alla base di ogni decisione di design. Ultimo ma non meno importante
draft folders where we've all the ideas my clients and I have decided not to use
la cartella delle bozze in cui abbiamo tutte le idee che io e i miei clienti abbiamo deciso di non utilizzare
but I wanna keep in case' I wanna use fire in future projects but isn't a
ma che voglio tenere nel caso in cui le voglia usare in progetti futuri.
right or wrong way to organize pages as every company team and individuals have
Non c'è un modo giusto o sbagliato di organizzare le pagine perchè ogni team, azienda o individui ha
unique needs but because pigma is so flexible you can
delle esigenze uniche ma visto che Figma è così flessibile
organize your design files in the web air works best for you
potrai organizzare i tuoi file di progettazione nel modo che funziona meglio per te.
alright we just seen how to organize pages and now we're gonna look at the
Okay, abbiamo appena visto come organizzare le pagine e ora vedremo
components by clicking on assets on the top left we can see all the components
le componenti. Facendo clic su Assets in alto a sinistra possiamo vedere tutti i components
i've created for this project there are basically two kinds of components master
che ho creato per questo progetto. Ci sono fondamentalmente due tipi di componenti
components define all the properties of a component Y component is tensor is the
Master components che definiscono tutte le proprietà di un component mentre il component Instance
copy of the master component on this panel we've got the component instances
è la copia del Master component. Su questo pannello abbiamo gli Instance compomponents
that we can drag into pages while in the component library I keep all the master
che possiamo trascinare nelle pagine. Mentre nella components library tengo tutto i Master
components instances are linked them to the master component so if we want to
components. Le Instances sono collegate alle Master components, quindi se vogliamo
change the master components all the component histories will automatically
cambiare tutti i Master components, tutti gli Instancecomponents lo faranno automaticamente.
change building a high quality component system is not easy and it takes time
Progettare un sistema di components di alta qualità non è facile e richiede tempo
honestly I don't always follow a rigid structure when it comes to organizing
Onestamente non seguo sempre una rigida struttura quando si tratta di organizzare
in labeling components as some of my website projects are very simple but for
e etichettare i componenti perchè molti dei miei progetti di siti web sono molto semplici ma
sure having a component library in place helps a lot when I first started using
sicuramente avere una components library aiuta molto. Quando avevo appena iniziato a usare
figma I didn't know the benefits of using master components so my design
Figma non conoscevo i benefici dell'uso dei Master components quindi i miei design
would often inconsistent and my process was much slower so what I want to say to
erano spesso incoerenti e il mio processo era molto più lento, quindi quello che voglio dire
you is that you need to find a balance between building a high quality
è che devi trovare un equilibrio tra la costruzione di una components library di
component library and don't use it at all and you can do this by assessing the
alta qualità e non utilizzarla affatto e puoi farlo valutando la
complexity of the website you are designing are you designing a blog an
complessità del sito web che stai progettando. Stai progettando un blog o
e-commerce or a simple landing page is it scalable most importantly speak with
un e-commerce o una semplice landing page, è scalabile? Ma soprattutto parla con
a developer and try to understand what information they actually need from your
uno sviluppatore e cerca di capire di quali informazioni hanno effettivamente bisogno dal tuo
figma file to achieve the best results all right we just seen how organized
file di Figma per ottenere i migliori risultati. Okay, abbiamo appena visto come organizzare
pages and components and now let's talk about resources and plugins you probably
pagine e componenti e ora parliamo di risorse e plug-in.
have noticed that all my figma files have something in common and that's
Probabilmente hai notato che tutti i miei file Figma hanno qualcosa in comune e questo è
because they all come from the same template but abused as a starting point
perché provengono tutti dallo stesso modello che uso come punto di partenza
for all my projects besides me speed up my wardrobe and make sure I'm not
per tutti i miei progetti. Questo mi aiuta ad accelerare il mio flusso di lavoro e ad assicurarmi di
missing anything important this is where all my web design project starts is
non dimenticare qualcosa di importante. Qui è dove tutti i miei progetto di web design iniziano
called web design template yeah I'm very crazy we name some there's no much to
chiamato web design template, sì sono molto creativa coi nomi. Non c'è molto da
show here as old pages at Blancas except for the component library but I can use
mostrare qui perchè tutte le pagine sono vuote tranne che la components library, che posso usare
as a starting point for building the new one to set the frame size for desktop
come punto di partenza per la creazione di un nuovo progetto. Per impostare le dimensioni della frame per desktop
tablet and mobile I follow the bootstrap Creed with 12
tablet e cellulare seguo il bootstrap grid con 12
columns on large and medium screens and 6 term on most or small screens there
colonne per schermi grandi e medi e 6 per schermi piccoli.
are hundreds of free UI kits and templates online but I personally prefer
Ci sono centinaia di kit UI gratuiti e modelli online ma personalmente
using my own one and maybe grab a few elements from other UI cubes now let's
preferisco usare i miei e magari prendere alcuni elementi da altri kit UI.
talk about plugins plugins provide simple and intuitive ways to speed up
Adesso parliamo dei plugin. I plugin forniscono un modo semplice e intuitivo per accelerare
your work amp automate repetitive tasks and they are super easy to install now
il tuo lavoro, automatizzano le attività ripetitive e sono semplicissimi da installare.
I'm gonna show you how I create with simple illustrations in three steps
Ora ti faccio vedere come creo delle semplici illustrazioni in tre passaggi
using three plugins so here we go
usando tre plugin. Iniziamo!
all right we just seen how are you stages asset resources and plugins has
Okay, abbiamo appena visto come uso pagine, assets, risorse e plug-in.
promised here's my free tips to help you collaborating in figma if you don't want
Come promesso ecco i miei 3 suggerimenti per aiutarti a collaborare con Figma.
to let your client see what you're doing a real time make sure you only share the
Se non vuoi far vedere al tuo cliente cosa stai facendo in tempo reale assicurati di condividere solo
preview and not the actual file often my clients want to see how the page will
l'anteprima e non il file. Spesso i miei clienti vogliono vedere come sarà la pagina
look with real copy but because I don't wanna let them edit my figma files I use
con una copia reale ma siccome non voglio lasciarli modificare i miei file Figma uso
a super useful plugin called a Google sheet sync all you need to do is to
un plug-in super utile chiamato Google Sheet Sync. Tutto quello che devi fare è
create a Google sheet and Link it to your figma file you can find out more
creare un foglio di Google e collegarlo al tuo file Figma. Puoi saperne di più
about this tool in the description below bring your clients and developers on
su questo strumento nella descrizione qui sotto. Fai partecipare clienti e sviluppatori
board and make sure they understand how figma works I usually send them a
e assicuratati che capiscano come funziona Figma. Di solito invio loro
document explaining my design process how to use this tool and the benefits of
un documento che spiega il mio processo di progettazione, come utilizzare questo strumento e i vantaggi
using my system you can download it it is description below inviting developers
del mio sistema. Puoi scaricarlo, è nella descrizione qui sotto. Invitare gli sviluppatori
to view your figma file can sound intimidating but it helps promote
a visualizzare il tuo file Figma può suonare intimidatorio ma aiuta a promuovere
responsi and better collaboration as they can leave notes download asset
la trasparenza e una migliore collaborazione perchè possono lasciare note, scaricare assets
inspect elements just make sure you let them build a file instead of edit now
ispezionare elementi. Assicurati che visualizzino il file anziché modificarlo.
let me know in the comments below how you use pigma with your clients
Fatemi sapere nei commenti qui sotto come usate Figma con i vostri clienti,
developers or colleagues and if you wanna see more videos like this make
sviluppatori o colleghi e se volete vedere altri video come questo
sure you click the subscribe button like this video and share it with your
fate clic sul pulsante Iscriviti, lasciate un like e condividetelo con i vostri
friends as it really helps to support this channel thank you for watching I
amici perché aiuta davvero a sostenere questo canale. Grazie per la visione.
hope you learned something new today and I'll see you in the next video ciao
Spero che tu abbia imparato qualcosa di nuovo oggi e ci vediamo nel prossimo video. Ciao!
Similar videos:

UX Design Tutorial for Beginners
Antony Conboy
670.7K views 13.3K likes 502 dislikes 08 Nov 201760% match

Figma Web Design Tutorial In Less Than 30 Minutes.
Hyginus Ukeh - Building Amazing Things
1.2K views 50 likes 0 dislikes 09 Jul 202057% match

Flexbox layouts for beginners - Web design tutorial
Webflow
30.5K views 72 likes 4 dislikes 14 Aug 201757% match

Web Design Tutorial For Beginners Using Photoshop
Cosmin Serban
25.1K views 686 likes 16 dislikes 16 Jul 201857% match

3D web design for beginners - Webflow CSS tutorial
Webflow
28.4K views 275 likes 9 dislikes 14 Aug 201757% match

Figma Web Design Tutorial: About Me Landing Page
Skillthrive
8.3K views 118 likes 2 dislikes 03 Jun 201957% match

My 5 BEST wireframe & prototyping tools for UI/UX Designers (2020)
Sara Brunettini
1K views 56 likes 0 dislikes 04 Jun 202026% match

How I became a UX Designer in less than 3 months
Sara Brunettini
10.4K views 597 likes 13 dislikes 07 Jul 202025% match


Settings Privacy About Contact Donate