
English: 
today we are taking a look at that
amazing software code figma figma is
great for collaborating designing and
prototyping perfect for UX designers web
designers or designers of all sorts hi
my name is Sara I work full time as a
product designer and they also run my
own freelance business from home if you
new here make sure you click the
subscribe button and all the links that
mentioned in this video you can find
them in the description below if you
want to have a closer look at my life at
the designer you can find me everyday on
Instagram
so now let's jump into this video in the
last video we look at my five best web
frame and prototyping tools and one of
them was actually figma I've been
designing websites in figma for over two
years and because I've been doing this
for so long
I created a kind of formula to help me
speed up my workflow and I'm super
excited to share it with you
but first what is Figma figma is a
design and collaborating tool and
basically you can do anything from

Italian: 
oggi lo diamo un'occhiata
stupendo codice software figma figma è
ottimo per collaborare alla progettazione e
prototipazione perfetta per i web dei designer UX
designer o designer di ogni sorta ciao
mi chiamo Sara, lavoro a tempo pieno come a
progettista del prodotto e gestiscono anche il mio
possedere un'attività freelance da casa se tu
nuovo qui assicurati di fare clic su
pulsante Iscriviti e tutti i collegamenti che
menzionato in questo video puoi trovare
li nella descrizione qui sotto se tu
voglio dare un'occhiata più da vicino alla mia vita
il designer che mi puoi trovare tutti i giorni
Instagram
quindi ora passiamo a questo video in
ultimo video guardiamo i miei cinque migliori web
strumenti di frame e prototipazione e uno di
loro erano in realtà figma che sono stato
progettare siti web in figma per oltre due
anni e perché lo sto facendo
per così tanto tempo
Ho creato una specie di formula per aiutarmi
accelero il mio flusso di lavoro e sono super
entusiasta di condividerlo con te
ma prima cosa è Figma figma è a
strumento di progettazione e collaborazione e
in pratica puoi fare qualsiasi cosa da

English: 
producing wireframes prototypes
component libraries and invite everybody
to collaborate with you with real time
make sure you stick around to the end
because I'm gonna share with you some
tips to help you collaborate in figma
with clients and developers now let's
jump into it
I love figma because I can manage the
whole design project in one place and
avoid the stress of constantly having to
email my clients or having to deal with
hundreds of documents emails pictures
phones and so on of course I still have
emails and documents but way less than
you probably think
first we're gonna look at how I use
pages to organize my figma files each
page represents a different stage in the
design process let me show you for this
website I've created seven pages so I
can do massive brainstorming and wanna
put the finished design in another one
and so on the first page includes mood
board snapshots and any kind of random
file but I can use them as a starting

Italian: 
produzione di prototipi di wireframe
librerie di componenti e invitare tutti
per collaborare con te in tempo reale
assicurati di rimanere fino alla fine
perché ne condividerò un po 'con te
suggerimenti per aiutarti a collaborare a figma
con i clienti e gli sviluppatori ora andiamo
saltaci dentro
Amo figma perché riesco a gestire
intero progetto di design in un unico posto e
evitare lo stress di dover costantemente
e-mail i miei clienti o dover trattare con
centinaia di documenti e-mail immagini
telefoni e così via ovviamente ho ancora
e-mail e documenti ma molto meno di
probabilmente pensi
per prima cosa vedremo come uso
pagine per organizzare i miei file figma ciascuno
pagina rappresenta una fase diversa in
processo di progettazione lascia che ti mostri per questo
sito web ho creato sette pagine così io
può fare un enorme brainstorming e voglio
metti il ​​disegno finito in un altro
e così nella prima pagina include l'umore
istantanee di bordo e qualsiasi tipo di casuale
file ma posso usarli come inizio

Italian: 
punto a cui è dedicato il secondo
ricerca dell'utente, il che significa che aggiungerò
qualsiasi tipo di informazione sugli utenti
per aiutare la creazione di utenti in
loro
mappatura empatica sulla terza pagina che ho
ottenuto il palcoscenico wireframe
che non sembra molto eccitante ma
è super importante in quanto me lo permette
esplorare diverse soluzioni senza
passare troppo tempo sui dettagli I.
dividere il design finale in desktop e
mobile come ogni amico mondo possiede il proprio
prototipo e che lo rende facile da eseguire
test utente per piattaforme diverse o
dimensioni dello schermo nel componente più leggero
maledettamente possiamo trovare tutto il riutilizzabile
componenti come intestazione schede inferiori
servizio abuso più volte nel file
avere un sistema come questo in atto aiuta
mantenere la coerenza e accelerare il
processo di progettazione e aiuta gli sviluppatori

English: 
point the second one is dedicated to
user research which means I'm gonna add
any kind of information about the users
to help the creation of user personas in
them
empathy mapping on the third page I've
got the wireframe stage
which doesn't look very exciting but
it's super important as it allows me to
explore different solutions without
spending too much time on the details I
split the final design into desktop and
mobile as each pal world owns his own
prototype and which makes it easy to run
user tests for different platforms or
screen sizes in the component lighter
bloody we can find all the reusable
components such as bottoms tabs heading
service abuse multiple times in the file
having a system like this in place helps
maintain consistency and speed up the
design process and it helps developers

English: 
understand the logic behind any design
decisions last but not least on the
draft folders where we've all the ideas
my clients and I have decided not to use
but I wanna keep in case' I wanna use
fire in future projects but isn't a
right or wrong way to organize pages as
every company team and individuals have
unique needs
but because pigma is so flexible you can
organize your design files in the web
air works best for you
alright we just seen how to organize
pages and now we're gonna look at the
components by clicking on assets on the
top left we can see all the components
i've created for this project there are
basically two kinds of components master
components define all the properties of
a component Y component is tensor is the
copy of the master component on this
panel we've got the component instances

Italian: 
comprendere la logica alla base di qualsiasi progetto
le decisioni durano ma non meno importanti sul
bozze di cartelle in cui abbiamo tutte le idee
io e i miei clienti abbiamo deciso di non utilizzare
ma voglio tenerlo nel caso in cui 'voglio usare
fuoco in progetti futuri ma non è un
modo giusto o sbagliato di organizzare le pagine come
ogni team aziendale e gli individui hanno
esigenze uniche
ma perché pigma è così flessibile che puoi
organizza i tuoi file di progettazione sul web
l'aria funziona meglio per te
va bene abbiamo appena visto come organizzarci
pagine e ora vedremo il
componenti facendo clic su risorse sul
in alto a sinistra possiamo vedere tutti i componenti
ho creato per questo progetto ci sono
fondamentalmente due tipi di componenti master
i componenti definiscono tutte le proprietà di
un componente Y è tensore è il componente
copia del componente principale su questo
pannello abbiamo le istanze dei componenti

English: 
that we can drag into pages while in the
component library I keep all the master
components instances are linked them to
the master component so if we want to
change the master components all the
component histories will automatically
change building a high quality component
system is not easy and it takes time
honestly I don't always follow a rigid
structure when it comes to organizing
in labeling components as some of my
website projects are very simple but for
sure having a component library in place
helps a lot when I first started using
figma I didn't know the benefits of
using master components so my design
would often inconsistent and my process
was much slower so what I want to say to
you is that you need to find a balance
between building a high quality
component library and don't use it at
all and you can do this by assessing the
complexity of the website you are
designing are you designing a blog an

Italian: 
che possiamo trascinare nelle pagine mentre ci troviamo in
libreria di componenti tengo tutto il padrone
le istanze dei componenti sono collegate a loro
il componente principale, quindi se vogliamo
cambiare tutti i componenti principali
le storie dei componenti lo faranno automaticamente
cambiare costruendo un componente di alta qualità
il sistema non è facile e richiede tempo
onestamente non seguo sempre una rigida
struttura quando si tratta di organizzare
nell'etichettare i componenti come alcuni dei miei
i progetti di siti Web sono molto semplici ma per
sicuramente avere una libreria di componenti in atto
aiuta molto quando ho iniziato a usare
figma di cui non conoscevo i benefici
usando i componenti master così il mio design
sarebbe spesso incoerente e il mio processo
è stato molto più lento, quindi quello che voglio dire
devi trovare un equilibrio
tra la costruzione di un'alta qualità
libreria dei componenti e non utilizzarlo su
tutto e puoi farlo valutando il
complessità del sito web che sei
progettazione stai progettando un blog un

Italian: 
è l'e-commerce o una semplice landing page
è scalabile soprattutto con cui parlare
uno sviluppatore e cerca di capire cosa
informazioni di cui hanno effettivamente bisogno dal tuo
file figma per ottenere i migliori risultati
Bene, abbiamo appena visto come organizzato
pagine e componenti e ora parliamo
su risorse e plug-in probabilmente
ho notato che tutti i miei file figma
avere qualcosa in comune e questo è tutto
perché provengono tutti dallo stesso
modello ma abusato come punto di partenza
per tutti i miei progetti oltre a me accelerare
il mio guardaroba e assicurati di no
manca qualcosa di importante questo è dove
tutto il mio progetto di web design inizia è
chiamato modello di web design sì, sono molto
pazzi ne nominiamo alcuni non c'è molto da fare
mostra qui come vecchie pagine a Blancas tranne
per la libreria dei componenti, ma posso usare
come punto di partenza per la costruzione del nuovo
uno per impostare le dimensioni della cornice per il desktop
tablet e cellulare
Seguo il bootstrap Creed con 12

English: 
e-commerce or a simple landing page is
it scalable most importantly speak with
a developer and try to understand what
information they actually need from your
figma file to achieve the best results
all right we just seen how organized
pages and components and now let's talk
about resources and plugins you probably
have noticed that all my figma files
have something in common and that's
because they all come from the same
template but abused as a starting point
for all my projects besides me speed up
my wardrobe and make sure I'm not
missing anything important this is where
all my web design project starts is
called web design template yeah I'm very
crazy we name some there's no much to
show here as old pages at Blancas except
for the component library but I can use
as a starting point for building the new
one to set the frame size for desktop
tablet and mobile
I follow the bootstrap Creed with 12

English: 
columns on large and medium screens and
6 term on most or small screens there
are hundreds of free UI kits and
templates online but I personally prefer
using my own one and maybe grab a few
elements from other UI cubes now let's
talk about plugins plugins provide
simple and intuitive ways to speed up
your work amp automate repetitive tasks
and they are super easy to install now
I'm gonna show you how I create with
simple illustrations in three steps

Italian: 
colonne su schermi grandi e medi e
6 termini sulla maggior parte o piccoli schermi lì
sono centinaia di kit UI gratuiti e
modelli online ma personalmente preferisco
usando il mio e magari prendine alcuni
ora elementi da altri cubi dell'interfaccia utente
parlare di plugin forniscono plugin
modi semplici e intuitivi per accelerare
il tuo amplificatore di lavoro automatizza le attività ripetitive
e sono semplicissimi da installare ora
Ti faccio vedere come creo
semplici illustrazioni in tre passaggi

English: 
using three plugins so here we go

Italian: 
usando tre plugin così eccoci

English: 
all right we just seen how are you
stages asset resources and plugins has
promised here's my free tips to help you
collaborating in figma if you don't want
to let your client see what you're doing
a real time make sure you only share the
preview and not the actual file often my
clients want to see how the page will
look with real copy but because I don't
wanna let them edit my figma files I use
a super useful plugin called a Google
sheet sync all you need to do is to
create a Google sheet and Link it to
your figma file you can find out more
about this tool in the description below
bring your clients and developers on
board and make sure they understand how
figma works I usually send them a
document explaining my design process
how to use this tool and the benefits of
using my system you can download it it
is description below inviting developers
to view your figma file can sound
intimidating but it helps promote
responsi and better collaboration as
they can leave notes download asset

Italian: 
Bene, abbiamo appena visto come stai
mette in scena risorse e plug-in
promesso ecco i miei consigli gratuiti per aiutarti
collaborare a figma se non vuoi
per far vedere al tuo cliente cosa stai facendo
un tempo reale assicurati di condividere solo il file
anteprima e non il file reale spesso mio
i clienti vogliono vedere come sarà la pagina
guarda con una copia reale ma perché io no
voglio lasciarli modificare i miei file figma che uso
un plugin super utile chiamato Google
sincronizzazione dei fogli tutto ciò che devi fare è
crea un foglio di Google e collegalo a
il tuo file figma puoi saperne di più
su questo strumento nella descrizione che segue
attirare clienti e sviluppatori
bordo e assicurarsi che capiscano come
figma funziona di solito invio loro a
documento che spiega il mio processo di progettazione
come utilizzare questo strumento e i vantaggi di
usando il mio sistema puoi scaricarlo
è la descrizione che segue che invita gli sviluppatori
per visualizzare il tuo file figma può suonare
intimidatorio ma aiuta a promuovere
responsi e migliore collaborazione come
possono lasciare risorse per il download delle note

Italian: 
ispeziona gli elementi solo assicurati di lasciare
costruiscono un file anziché modificarlo ora
fatemi sapere nei commenti qui sotto come
usi pigma con i tuoi clienti
sviluppatori o colleghi e se tu
voglio vedere altri video come questo
sicuro di fare clic sul pulsante Iscriviti come
questo video e condividerlo con il tuo
amici perché aiuta davvero a sostenere
questo canale grazie per aver guardato io
spero che tu abbia imparato qualcosa di nuovo oggi e
Ci vediamo nel prossimo video ciao

English: 
inspect elements just make sure you let
them build a file instead of edit now
let me know in the comments below how
you use pigma with your clients
developers or colleagues and if you
wanna see more videos like this make
sure you click the subscribe button like
this video and share it with your
friends as it really helps to support
this channel thank you for watching I
hope you learned something new today and
I'll see you in the next video ciao
