Figma
Figma
seOut
li
ne
S
ect
ion1
Creat
ingNewF il
es&Des igni
ngonaGr i
d
.Creati
nganew l e
.Sett
ingupframes(otherappsc
a l
ltheseart
boa
rds
)
.Addingtext
.Creati
ngcol
oredba c
k gr
oundsfort
e xtcol
umns
I
mporti
ng&CroppingPhotos
.
Import
ing&croppingphotos
.
Addingadropshadow
.
Roundingc
orners
VectorGr a
phics,
Colors,
Sha dows,&More
·I
mpor t
ing&modi f
yi
ngv ectorgr
aphi
cs
.Ali
gning&di str
ibuti
nglayers
.Layeropa ci
tyvs.llopacit
y
.Reusingc ol
ors(
c ol
orst
yles)
.Addingadr ops hadow
T
extSt
y l
es
.
Crea
ting,edi
ti
ng,
&or
gani
zi
ngt
exts
tyl
es
S
ect
ion2
Components(Reusabl
eElements)
.Cr
eati
ng&edi t
ingcomponents
.Over
ri
dingcontentinoneins
tancev
s.gl
oba
ll
yupda
tinga
llc
omponent
s
.
Det
achi
ngf
rom ac
omponent
T
urningaDes ignintoaCli
ckabl
ePrototy
pe
·
Linki
ngbet weenf r
ames(art
boards)
.
Previewingtheprototy
pe
Cr
. eatinganov erl
ay
.
Fixi
ngt hepos i
ti
onofelementssotheydon'
tsc
rol
l
E
xport
ingAss
etsforWeb:S
VG,JPE
G,&PNG
·
Expor
tingi
ndiv
idualas
set
s
.
Expor
tingf
rames(ar
tboar
ds)
S
ha r
ingFigmaF i
les:
Commenting,
Tes
ti
ng,
Dev
eloper
s,et
c.
.
SharingaFigma l e
.
SharingaProt otype
.
Comment i
ngons hared l
es
.
Viewingapr ototypeforus
ert
esti
ng
.
Spec sf
ordev elopers
S
ect
ion3
AutoLayout:I
ntroducti
on
.Usi
ngT i
dyUpf orE v
enS paci
ng
.Usi
ngAut oLayout
.Ali
gnmentCons trai
nts
.Spaci
ng,Rearr
anging,&Addi ngItemswi
thAut
oLa
yout
AutoLayout:DeeperDive
.Nesti
ngAutoL ayouts
.AutoLayoutSpa c
ing&Pa ddi
ng
.AutoLayoutSiz
ing&Cons tra
ints
.Negati
veSpa c
ing&S t
acki
ngOr der
.Absol
utePosit
ioningE l
ements
L
inki
ngUp/ DownaPa ge,Scroll
abl
eAreas
,&Hyper
li
nks
.
Ma ki
ngLinksthatScr
ollUp/DownaPa ge
.
Ma ki
ngtheNa vbarFi
xedtot heScr
een
.
Adjust
ingthePos i
ti
on&S peedoftheScr
oll
.
Creat
ingaS cr
olla
bleAreaWi t
hinaPage
.
AddingHy per
links
I
ntr
otoSmartAni
ma t
e
.
TheBasi
csofSmar
tAnimat
e
.
Differ
entKi
ndsofEasi
ng
S
ect
ion4
Para
llaxAnimati
on
.Set
tingUpt hePar
all
axAss
ets
.Bui
ldingtheParal
l
axAnimati
on
ComponentPropert
ies&Var
iant
s
.ComponentProper
ties(
Tex
t,Bool
ean,I
nst
anc
eSwa
p,&Va
ria
nt)
.Crea
ting&Usi
ngComponentVa ri
ant
s
Hovers&Overl
ays
.Addi
ngaHov erSt
atet
oaButt
on(UsingVa
ria
nts
)
.OpeningaPop-Up(Us
inga
nOv er
lay
)
T
eamLibrari
es(S
ha redLibra
ries
)
.
Publ
is
hingaT eamL i
brar
y
.
Usi
ngComponent sinaT ea
mL ibr
ary
.
Usi
ngS ty
lesinaTea mL i
brar
y
.
SwappingTeamL i
br ari
es