Upcoming events

screenElements:
Illustration
Search Bar
Stacked List
Thumbnail
Button
Top Navigation Bar

pagePatterns:
Community Page
Header Section
Community Page
Community Page
Hero Section

screenKeywords:
'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
List Calendar
Event types v Event tags v
JAN 27,2023 - IN-PERSON EVENT - VANCOUVER, CA
Design Social
Meet with Friends of Figma Vancouver to discuss design topics
|_ -
List Calendar
Search for a city or region Event types A4 Event tags A4

JAN 27,2023 - IN-PERSON EVENT - VANCOUVER, CA
Design Social
Meet with Friends of Figma Vancouver to discuss design topics
DEC 19, 2022 - VIRTUAL EVENT - HOUSTON, US

@@ Friends of Figma, Houston Virtual Event

"Oust,,,.,
Join us on Dec 19th from 6-7pm as we celebrate the holidays with Figma!
|'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
We are so glad you’re here. Whether you're a professional or student, Friends of Figma
exists so our users can come together to help each other; lifting everyone up. It’s run
by the community and everyone is welcome.
So come on in and make some new friends.
. s ]


Adding auto layout

appName: Figma

appCategory: Graphics & Design

appTagline: The collaborative interface design tool

companyHqRegion: US & Canada

companyStage: Public & Mature

platform: web

pageType: Application

hotspotType: Click

hotspotType: Keyboard Input

hotspotType: Hover

screenPatterns:
Edit
Add & Create
Edit

pageType: Application Application Application Application Application Application Application

allAppCategories:
Collaboration
Graphics & Design

screenKeywords:
By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home

#* Background
= Frame1

FSFSF5 100% ®
Contacts
Rectangle 1 Local styles +
Contacts
Ag Headline - 18/Auto
Export +
Name
4
@ Name
Y
|g- W . - % T % & D ¢ © W- D B > > e
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
= Frame1
Frame e
Contacts |
! X 20 Y 244
Rectangle 1
Contacts ‘ )
>< Hug X Hug
5 Lo ro o
! : n
’ [ Clip content
* Name
-— Auto layout —
. l - see
* Name = 20
[=1¢] =R] [
! 0 - -
Hug x Hug
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke 0
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
= Frame1
Frame e
Contacts |
! X 20 Y 244
Rectangle 1
Contacts ‘ )
>< Hug X Hug
: L 0° o o
! : n
’ [ Clip content
* Name
-— Auto layout —
-
I - =
* Name = 20
[=1¢] =R] [
! 0 - -
Hug x Hug
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke 0
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
= Frame1
Frame an
Contacts |
! X 20 Y 244
Rectangle 1
Contacts ‘ )
>< Hug X Hug
5 Lo ro o
! : n
’ [ Clip content
* Name
-— Auto layout —
-
RS =
= 90
o] o o0 [l
p: Name
| Constraints
[ {] 1
Hug x Hug — Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke 0
|g- W . - % T % & D ¢ © W- D B > > e
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
= Frame1
Frame e
Contacts |
! X 20 Y 244
Rectangle 1
Contacts ‘ )
>< Hug X Hug
: L 0° o o
! : n
’ [ Clip content
* Name
-— Auto layout —
. l - see
-
-
. - =
®  Name = 20
o o T 0 [
! 0 -
Hug x Hug ol o o0
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill i-‘r
Stroke +
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
= Frame1
Frame e
Contacts |
! X 20 Y 244
Rectangle 1
Contacts ‘ )
>< Hug X Hug
: L 0° o o
! : n
’ [ Clip content
* Name
-— Auto layout —
-
I - =
-
-
. - =
®  Name = 20
[=1¢] =R] [
! 0 - -
Hug x Hug
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke 0
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T H#+ L nhlv
&> Contact item
Frame
«» Contact item
X 20 Y Mixed
Name
w347 H 79 S
Contacts
b 0° o 3
Line 1
(J Clip content
Ellipse 1 O q
r = 90
Contacts & L
W
Rectangle 1 Auto layout +
m Constraints
1
= Left
' ) | I Top
i . . .
- (O Fix position when scrolling
O ]
347 x 248
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100% 0
EEEEEE 100%


Browse a category

screenElements: Card Illustration

hotspotType: Scroll Vertically

screenElements:
Select
Top Navigation Bar
Search Bar
Button
Avatar
Card
Illustration
Thumbnail
Banner
Illustration
Side Navigation
Chip
Grid List
Card
Illustration

screenPatterns:
Filter & Sort
Browse & Discover
Filter & Sort
Browse & Discover

pageType: Application Application Application Application Application Application

screenKeywords:
o - Community Q - @ v
\
Inspiration
Q Dream bigger with these portfolios, presentations, mockups, and more. { ‘
a8 All Fi i i
oo igma + Figdam v Trending v
v Trending
D Files + templates
— @ Popular
Dylan - =
& Plugins Nufiez /s EE=I S oms Recent
s B My Portfolio
Kavousy nezjad .
) - armam - Followin
{‘Z} Widgets S B y @ BT 9
= . — oo
== Eim S ®. % .9 .0
= == = Montasel:i > ﬁ;n
Related tags |
Q Resume / CV ©3 [743 & portfolio 03 (747 ° portfolio landing page website ©3 [ 14
portfolio logo mockups » Dylan Nufiez ghazall montaseri arkn
redesign typography e
Pitch Deck
casestudy project Template
hony
Get adjustable and editable Pitch D
. “ Deck Template for your next e
landingpage resume presentation
Free For Professional Use o
presentation Create mockups in Figma easily by getting access to High-fidelity Design b”"'r:.,,,%m n Type a search term, select any asset, then drag and
thousands of world-class quality Artboard Studio Neatly & Organized layer e Do, drop to import it into your Figma artboard
e,
i m_ |
“B
.\ Artboard Studio Mockups 26k [7 231K @ Pitch Deck Template (Free) ©35 [7 450 Iconscout - Icons,... ©15k [7 202k
Artboard Studio Bhargav Sai Ram Kattunga IconScout a
|Add a little magic to your files
Discover inspiring portfolios, presentations, mockups, and more.
9. o A
= P 4
Curated by Figma seeall
A - =
5 B h&i \
2 i - HE
9 resources .,~ b oy gzzéfsny g m“;ﬁm:?; - "_' '=
C.elebrate the hOIIdayS with rs =5 _!!” f“ 8 resources . | — [
Figma S50 i Start the New Year with Figma wf o EE
P E Qg tEe 5L S Py
= o T . .
Bv the community. for the community
|@ - Community Q Publish @ v
E; All Figma + Figdam v Popular v
o e ‘ A

Plugins
& 9 @ Free Clay Mockups © 598 [7 281k 0 Whose turn is it? 0162 [7 7.2k e Iconly v2.3 Q1k [ 96.6k
Is.graphics Elynn Lee ARl and 3 others
{3} Widgets
Weight 220
++ i e >N
boesed Variable fonts
Related tags Ii444
+4++ This playground is designed to get you
up to speed on variable fonts for both
. product and expressive uses. a
portfolio logo mockups Pattern Hero enables you to place selected elements n et s Visualize dynamic color and create a custom Material
or frames in a grid to create patterns. Things you c... ’—"’k—‘—‘—‘ ThemeThe Material Theme builder is built to assist i...
redesign typography R
casestudy project a
. Pattern Hero Q11K [7 95.4k F Variable Fonts Playground Q911 [719.7k D Material Theme Builder 027k [2 90K
landingpage resume Nitin Gupta Figma Material Design
presentation s e = -
iR =l = = (s} o | F
- R = | & | |
Fluppqlird —-— 9 ‘_' 0 ) i ‘ ’
_ ¥ Freebie. . . . : : ] ] | ‘
LaslesVPN e ree ol & [PES
e v H P2l iphone 12pro T ) iPhol
—~ __ _ iPhone 12 [tk
[ TR — | Mockup {
3 Lo e | BErE mockups g
- - -
ﬁ Flippy Bird 149 [7 71k @ FREEBIES-Landingpage—... < 689 [7 261k @ iPhone 12 Pro Mockups O 423 [7 431k
Jackie Chui Didi Kurniawan Is.graphics
Wity .
e o OO0 &ayyy ) Priangg
|@ v Community Q. Search Community Publish @ v
\
Inspiration
Dream bigger with these portfolios, presentations, mockups, and more. (
a8 All Fi i
oo igma + Figdam v Popular v
[ Files + templates \ [ g C— O
° o T N MENTION . N
m»“?og‘ LN 888800 ° ZWQ 30 o comw
ﬁ Plugins \,\256\‘\9'1* L - S =
S e
Z A . =
*\ec’ T , AR =
& Widgets O s 5 -
i.(“” o —— i
Create mockups in Figma easily by getting access to 2 —_— —— mt
% thousands of world-class quality Artboard Studio | P i |
<o ’ ao»® oLy
o S a - =
o "
. R Moo 1NN
Related tags - -
ﬁ Style Guidelines ooro 2219k (GN Artboard Studio Mockups 026k [7 231k @ Instagram Ul Kit 1.0 Ok [7 46.4k
portfolio logo mockups You Artboard Studio Ashley Gaunt-Seo
redesign typography
o _— N,
casestudy  project iPhonel” ﬂ \ Your Name e
MOCkU ps 4 Senior Product Designer é
landingpage resume [ Senior X ProcuctDesiner PR
presentation Type a search term, select any asset, then drag and © iPhone 12 Mini | / o e 1t Ot e s o oy Koo
drop to import it into your Figma artboard © iPhone12 process: esearch design, test, and ferate e
@ iPhone 12 Pro | UK Product Designer eracton Do
@ iPhone 12 Pro Max e s e e
Lead the Ul design with the accountabilty o the design Design Research
system, cllaborated with procict and developmant tears o
@ Iconscout - Icons,... O 15k [7 202k iPhone 12 Mockups © 804 [7 54.4k r;‘ CV / Resume ©907 [ 41.2k
IconScout smrkv ‘ Alexis Riols a
|o - Community Q - @ v
\
Inspiration
Q Dream bigger with these portfolios, presentations, mockups, and more. { ‘
aa Al Fi i i
oo igma + Figdam v Trending v
D Files + templates
— | ® |
& Plugins Nufez L = = 2022 ’ e
= S . u I'm Alireza e
— = My Portfolio oot =
@ Widgets S = ) = P
s — OO0
= e S ®. % .9 .0
= == = Montasel:i > ﬁ;n
Related tags |
Q Resume / CV ©3 [743 & portfolio 03 (747 ° portfolio landing page website ©3 [ 14
portfolio logo mockups » Dylan Nufiez ghazall montaseri arkn
redesign typography B2
Pitch Deck
casestudy project Template
o
“ Get adjustable and editable Pitch D
. Deck Template for your next 3
landingpage resume presentation
Free For Professional Use
presentation Create mockups in Figma easily by getting access to High-fidelity Design ) Type a search term, select any asset, then drag and
thousands of world-class quality Artboard Studio Neatly & Organized layer Do, drop to import it into your Figma artboard
ooiirote,
9%,
i m_
P
.\ Artboard Studio Mockups 26k [7 231K @ Pitch Deck Template (Free) ©35 [7 450 Iconscout - Icons,... ©15k [7 202k
Artboard Studio Bhargav Sai Ram Kattunga IconScout a
|Add a little spark to your files
Dream bigger with these portfolios, presentations, mockups, and more.
! ) A
Curated by Figma seeall
‘_ n e . o
| Figy
/! .: * STt . Umper <
9 resources l W 5:%,‘,}, ﬁ m%{f - '.
Celebrate the hOIidayS with & Rl = 8 resources =
Figma E e w25 aTe) Start the New Year with Figma e =
xn SO £ & & iy tsion s
o 5 Gt W g o
Bv the community. for the community


Drafts

screenElements:
Side Navigation
Tab

screenElements:
Dropdown Menu
Avatar

screenElements:
Dropdown Menu
Avatar
Icon

screenElements:
Dropdown Menu
Avatar
Side Navigation
Tab
Dropdown Menu
Avatar
Icon

screenPatterns: Home Home Home

pageType: Application Application Application

screenKeywords:
John "

@ jsmith.mobbin@gmail.com v O\ @ Explore Community @ @ i

Deleted

@ John v
New design file + New FigJam file + [ Import file
. Design and prototype Whiteboard and diagram Bring in files from other tools
@ Community
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f
Favorite files Dlagram — sync meetlng . = - .
. _ basics in agenda e —e R
Hover over any file and click the star to Fi J m B == = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L ,‘ B2 = L :
e A/ - o
Contacts Q " S = i =1 B
00 amd O -
ko9 W W
e i
fa . i .
Contacts App o o FigJam Basics Wireframing in Figma

Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G
|John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts

New design file + New FigJam file + [ Import file

@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f —
Favorite files Dlagram — sync meeting - - ] !
, _ basics in agenda E oo L o S
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L 2 ‘.‘ =) - il -
e oA = i} .
Contacts ‘ " S : = i =1 B
<§<> amd O -
ko9 B W
. ; ey ﬁ
o . - i ]
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G
|John "
8 jsmith.mobbin@gmail.com i Q @) Explore Community Jal @ .
© Recents Drafts Deleted @ jsmith.mobbin@gmail.com
[ Drafts
@ Internal profile
New design file + New FigJam file + [ Import file (& Plugins
@ Design and prototype Whiteboard and diagram Bring in files from o J;“f —
ettings
Ready to go beyond this free
plan? Upgrade for premium @ UIES >
features.
Explore FigJam templates . Getdesktop app
= ‘1_% == <+ Add account
5 oS¢ Team PR . ...
Favorite files |a§_|ram — sync meeting . |
) i basicsin agenda =TT B —
Hover over any file and click the star to Fi J m B == = '
add it here g a E—— o . -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
—|— Create new team
. ) . i i
e A/ - o
Contacts Q . e - S
00 amd O -
ko9 B N
B \ ‘@
o . - i .
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X 0


Reacting to a comment

screenElements: Popover Icon

screenElements:
Chip
Popover
Pagination
Icon
Avatar
Text Field
Popover
Icon

screenPatterns:
Like & Upvote
Comments
Like & Upvote

screenKeywords:
B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
l 2 VN7 VN PN —
- O 8 X
eal - | . =
© B |-
o John &
Check out this home screen! '~ John
Get the app
#1-Page 1
John 1 minute ago
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
eal - | . =
© B |-
o John &
Check out this home screen! ' Qe
e
John Get the app
@ Name #1-Page 1
John Just now
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
l 2 V-S7N VN PN —
@ R X SRR
ol - | [
o John &
Check out this home screen! ' Qe
:
John Get the app
@ Name #1-Page 1
John Just now
Check out this home screen! '~ John


Adding component property (Text)

screenElements:
Dialog
Text Field
Button

screenElements:
Editable Text
Chip
Editable Text
Dialog
Text Field
Button

screenPatterns:
Add & Create
Add & Create

screenKeywords:
By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item [t~
Default
Frame
Name
X Y *
Vector 1
W 390 H 80 S
Contacts
+— Fixed T Fixed
Ellipse 1
+» Contact item L 0° o o
oo o= -2
H# Home | | 2 L
| | (J Clip content
rreme ' Name ' Name
| |
<> Contact item | 4 | 4 & Contactitem v G e
| | [} [
Name [ | 390 x 80 Property 1 Default
Vector 1 Name Name Name
E » H
Layout grid +
Ellipse 1
Contact item Layer
Contacts O Pass through 100% <®©
Rectangle 1
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects GI—
Export +
|g B o O % T 8% & O o Y »EE 2 > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ H# I
Default
X 96 Y 29
T Name
w H C
Vector 1
b 0°
Line ontacts
Ellipse 1 i Parent component
+» Contact item
5 |
H# Home | . | + Contactitem
| | |
Frame 1 | . |
N M | Name Constraints
. y 2
Contact item : 49 % 22 : .
Name R | __  Left
Vector 1 Name I I Top
i
Line 1
Layer =
Ellipse 1
O Pass through 100% ®©
Contact item
Contacts Ag Headline
Rectangle 1 =l — = N % 4 ees
Content
T' Name
Fill to+
Il ooo000 100% ® -
Stroke +
Effects e
|g- B8 £ O % T % & DO H e » S s > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ H# I
Default
X 96 Y 29
T Name
w H C
Vector 1
b 0°
Line 1 ontacts
Ellipse 1 i Parent component
+» Contact item
5 |
H# Home | . | + Contactitem
| | |
Frame 1 | . |
N M | Name Constraints
Contact item | 4 49 %22 | 4
| | 1
Name R | __  Left
Vector 1 Name I I Top
i
Line 1
Layer =
Ellipse 1
O Pass through 100% ®©
Contact item
Contacts Ag Headline
Rectangle 1 =l — = N % 4 ees
Content =
Name
Fill to+
Il ooo000 100% ® -
Stroke +
Effects Q
|@v.nvmvmsta@no 0 © @ J-f b o6% v
Create component property X
Name Name
Value Name
?
|g o O B T & &M O & ¢ © W~ J) Bsharel 2 > 96 v
Layers Assets Page 1 Design Prototype Inspect
+» Contact item 1]~
Default
Frame
Name
X Y o+
Vector 1
W 390 H 80 S
Contacts
i Fixed I Fixed
Ellipse 1 NS
”»
(:_Olaﬁ'_eﬂ______________________j L 0° o [
H# Home | | 2 L -
Clip content
| |
e : Name : John
<> Contact item | 4 | 4 & Contactitem v G e
| | [} [
Name C_ - _________J 390 x 80 Property 1 Default
Vector 1 Name Name John
] g i
Line 1 e e £ R
Layout grid +
Ellipse 1
Contact item Layer
Contacts O Pass through 100% <®©
Rectangle 1
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects GI—
Export +
|@v.nvmvmsta@no 0 © @ J-f b o6% v
Create component property X
Name Text
Value Name
?


Renaming a project

screenElements:
Text Field
Button

screenElements:
Dropdown Menu
Text Field
Button
Dialog
Text Field
Button

screenPatterns:
Action Option
Edit
Edit

pageType: Application Application Application Application

screenKeywords:
John P
(e R R i Q @) Explore Community o @ v
(® Recents See all Acme
[ Drafts
Members of Acme can edit this project
@ New design file A0S
Ready to go beyond this free ey Figm e D
plan? Upgrade for premium Files About
features. Copy link
Rename
View plans
Remove from favorites
New design file + New FigJam file +
Design and prototype Whiteboard and diagram Delete
Favorite files Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v oo |=
Teams Starter team overview
B Acme Free . "
eader 1 W 1 of 3 Figma files used
-
Team project )
sader . .
m Ry 0 of 3 FigJam files used
—|— Create new team — e .
wawe Build your own
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
e design. Team libraries let you share styles . . . .
m e projects, and customizable team libraries.
. p— everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X 0
|John P 2N
(e R R M Q @) Explore Community Jal Q@ -
(@ Recents See all Acme
[N Drafts

.
Members of Acme can edit this project Rename Team pr
Rename Team proje
Ready to go beyond this free Active Projects
lan? U de for premil q
plan pg:ra e for premium Files About
eatures.
ancel
:
New design file + New FigJam file +
Design and prototype Whiteboard and diagram
Favorite files :
Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v e =
jeas Starter team overview
B Acme Free . .
eader 1 W 1 of 3 Figma files used
-
Team project .
sader . e
_ Ry 0 of 3 FigJam files used
-+  Create new team — p—— .
e Build your own
— iy . *
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
B design. Team libraries let you share styles . . . .
m T projects, and customizable team libraries.
e — everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X G
|John "
(e R R i Q @) Explore Community o @ v
(® Recents See all Acme
[ Drafts
Members of Acme can edit this project
Ready to go beyond this free
plan? Upgrade for premium Fi
iles
features. About
New design file + New FigJam file +
Design and prototype Whiteboard and diagram
Favorite files Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v oo |=
Teams Starter team overview
B Acme Free . "
eader 1 W 1 of 3 Figma files used
-
Active Projects )
sader . .
m Ry 0 of 3 FigJam files used
—|— Create new team - p—— .
- Build your own
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
e design. Team libraries let you share styles . . . .
E e projects, and customizable team libraries.
. — everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X 0
|John P 2N
(e R R M Q @) Explore Community Jal Q@ -
(@ Recents See all Acme
[N Drafts

.
Members of Acme can edit this project Rename Team pr
Rename Team proje
Ready to go beyond this free Team projec
plan? Upgrade for premium Fi
iles
features. 00Ut
incel
View plans
New design file + New FigJam file +
Design and prototype Whiteboard and diagram
RaUCHISlES Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v e =
jeas Starter team overview
B Acme Free . .
eader 1 W 1 of 3 Figma files used
-
Team project .
sader . o
_ Ry 0 of 3 FigJam files used
-+  Create new team — p—— .
- Build your own
— iy . *
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
e design. Team libraries let you share styles . . . .
E T projects, and customizable team libraries.
e — everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X G


Adjusting fills (Image)

actions:
Editing & Updating
Uploading & Downloading

screenElements:
Popover
File Upload
Slider

screenPatterns:
Edit
Media Editor

screenElements:
Button
Slider
Select
Popover
File Upload
Slider

screenPatterns:
Upload & Download
Edit
Media Editor
Edit
Media Editor
Upload & Download

pageType: Application Application Application Application Application Application Application Application

screenKeywords:
O+ X
g B o Oy W T &4 @ O 4 J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H# Home
O Ellipse 1
X 20 Y 244
Rectangle 1
w60 H 60 3
b 0°
Constraints
1
= Left
| I Top
60 x 60 Image [e) X (O Fix position when scrolling
Fill OV Layer
O Pass through 100% <®©
Fill to+
= Image 100% ® —
Stroke +
Exposure O
Effects +
Contrast O
Saturation O Export +
Temperature O
Tint O
Highlights O
Shadows O
|O+ X
g B o Oy W T &4 @ O 8 ¢ © J Share & > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
O Ellipse 1
i X 20 Y 244
Rectangle 1 i
w60 H 60 3
b 0°
Constraints
| 1
= Left
| I Top
60 x 60 Solid o) X (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill to+
D9D9D9 100% (O
Stroke +
Effects +
D S—
d Export +
Hex D9D9D9 100%
Document colors
|8- BB & O W T 55 M O g % © J) [share » > 96% v
H
Layers Assets Page 1 ome i Design Prototype Inspect
H# Home d ® = + = T + L
O Ellipse 1
i X 20 Y 244
Rectangle 1
: W 60 H 60 c
§ b 0°
Constraints
3 1
= Left
| I Top
60 x 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill to+
D9DOD9 100% (O
Stroke +
Effects +
Export +
|g- W . - % T % & D & u D B > > e
Layers Assets Page 1 Design Prototype Inspect
H# Home
O Ellipse 1
X 20 Y 244
Rectangle 1
w60 H 60 [0
b 0°
Constraints
1
= Left
I I Top
60 x 60 Image o X (O Fix position when scrolling
Fill o Layer
O Pass through 100% ®©
)
L Fill o +
X
= @ Image 100% ® —
Ay )
o
N “ Stroke +
Exposure O
Effects +
Contrast ®
Saturation O Export +
Temperature O
Tint O
Highlights O
Shadows O
|O+ X
g B o Oy W T &4 @ O 8 ¢ © J Share & > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
O Ellipse1 i
i X 20 Y 244
Rectangle 1
W 60 H 60 8
b 0°
Constraints
: 1
= Left
| I Top
60 x 60 + Solid o) X (O Fix position when scrolling
Linear
Radial Layer
gl O Pass through 100% ®
Diamond
Image
g Fill to+
Video
D9D9D9 100% (O
Stroke +
Effects +
D S—
d Export +
Hex D9DOD9 100%
Document colors
|g PPy v Oy © T 33 @ O ® " J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H# Home
O Ellipse 1
X 20 Y 244
Rectangle 1
w60 H 60 [0
b 0°
Constraints
1
= Left
| I Top
60 x 60 Image [e) X (O Fix position when scrolling
Fill o Layer
O Pass through 100% ®©
Fill o +
= Image 100% ® —
Stroke +
Exposure O
Effects +
Contrast O
Saturation O Export +
Temperature O
Tint O
Highlights O
Shadows O
|g PPy v Oy © T 33 @ O ® " J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H# Home
O Ellipse 1
X 20 Y 244
Rectangle 1
w60 H 60 [0
b 0°
Constraints
1
= Left
| I Top
60 x 60 Image [e) X (O Fix position when scrolling
Fill o Layer
O Pass through 100% ®©
L Fill o +
~
‘* @ Image 100% ® —
- ,ffizs 15,
g S
.".,',‘ RS, Stroke +
Exposure O
Effects +
Contrast O
Saturation O Export +
Temperature O
Tint O
Highlights O
Shadows O
|g o O 2 T & & O 0 ¢ © " J) [shael > > 9e% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
O Ellipse 1 :
i X 20 Y 244
Rectangle 1

‘ w60 H 60 9

H v

I bo0°

Constraints

i 1
— Left

I I Top
60 x 60 (O Fix position when scrolling

Layer
O Pass through 100% ®©
Fill o +
[ Image 100% ® -
Stroke +
Effects 2+
-:&:1:- Drop shadow ® —
Export +


Docking comments to the side

screenElements:
Popover
Pagination
Icon
Avatar
Text Field

pageType: Application Application

screenKeywords:
B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Home, Q_ Search @ H
@ X
Home o ®
Comments are now in our app X
= Frame1 o John Try the Figma mobile app to stay on
. top of activity like comments, replies,
[ e
Contacts Check out this home screen! ' - @_ and @mentions when you're on the go.
John
Rectangle 1
‘- oo v | .
8| |-
)
Q Name Get the app
@ Name #1-Page 1
v
John 3 minutes ago
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
eal - | . =
© B |-
o John &
Check out this home screen! ' Qe
e
John Get the app
@ Name #1-Page 1
John Just now
Check out this home screen! '~ John


Plugin detail

screenElements: Button Icon Thumbnail

screenElements:
Grid List
Thumbnail
Divider

screenPatterns:
Post Detail
Suggestions & Similar Items

screenElements:
Text Field
Avatar
Stacked List

screenPatterns:
Post Detail
Comments

screenElements:
Button
Icon
Thumbnail
Text Field
Avatar
Stacked List
Grid List
Thumbnail
Divider

screenPatterns:
Post Detail
Post Detail
Comments
Post Detail
Post Detail
Post Detail
Suggestions & Similar Items

screenKeywords:
@ - Community Q Publish (j) v
Material Theme Builder
Q 2.7k Tryitout 90k
D By Material Design
9:30 P41
Material Theme Builder X
Care
wallpaper N
S N > -
4. Dynamic @ Custom *‘ )
® Tip: Select an element using Material Design styles and ] “ A‘i
add an image below to update the colors.
a | e r I a Touseplant Care Basics
17
T a ] . !
I I e I I I e ‘uimnmﬁu’rfﬁ& 3
1 i £ W
[} wmt Care
17
I e r Seed Color
u - G
Q
Plants Care
Visualize dynamic color and create a custom Material Theme Tags
The Material Theme builder is built to assist in exploring the possibilities of dynamic color, :
android colors
harmonizing brand colors, and providing a type scale. All with implementation in mind to bridge
designer and developer workflows. dynamic color google
Visualize dynamic color in your Ul material material you
Material Design’s Dynamic color brings user personalization to apps by generating accessible G
light and dark color schemes from a user’s device wallpaper. theming
|@ - Community Q Publish @ v
Material Theme Builder
. . Q 2.7k Tryitout 90k
D By Material Design
- removing read-only directory in styles
See all
156 comments Al v
0 Valentin Bourcier @valentinbourcie - 12 days ago
Hi ! This seems to be a really nice tool, but the colors always reset to default, | can't use it for the
moment.
Q Damo G @damog - 13 days ago
Unusably SLOOOOOOOOWL!. Colours keep resetting to defaults. The previews keep being
duplicated when | change colours. Even the DEL key doesn't work when editing colour values:
after about 30 seconds waiting for the keystroke to register, a couple of new dots appear.
Options to export text styles do nothing. That image upload thing with "Wallpaper" or "Content":
what's the difference? And what does, "make sure to swap an object that uses Material Design
styles to the current theme" mean? If | have to "make sure", then it must be important, but | am
drawing a complete blank.
Oh, and it is SLOOOOOOOO00OW! 20 minutes to type in three hex codes does not seem
reasonable. It even took over a minute just to select and copy the text | quoted above, which also
caused yet another copy of the preview to be created.
I think I'll just write my own script to generate what | need; this MTB is not fit for purpose.
@ Kallirroi Pouliadou @kallirroipoulia + 22 days ago 0
|@ - Community Q Publish @ v
E; All Figma + Figdam v Popular v
o e ‘ A

Plugins
& 9 @ Free Clay Mockups © 598 [7 281k 0 Whose turn is it? 0162 [7 7.2k e Iconly v2.3 Q1k [ 96.6k
Is.graphics Elynn Lee ARl and 3 others
{3} Widgets
Weight 220
++ i e >N
boesed Variable fonts
Related tags Ii444
+4++ This playground is designed to get you
up to speed on variable fonts for both
. product and expressive uses. a
portfolio logo mockups Pattern Hero enables you to place selected elements n et s Visualize dynamic color and create a custom Material
or frames in a grid to create patterns. Things you c... ’—"’k—‘—‘—‘ ThemeThe Material Theme builder is built to assist i...
redesign typography R
casestudy project a
. Pattern Hero Q11K [7 95.4k F Variable Fonts Playground Q911 [719.7k D Material Theme Builder 027k [2 90K
landingpage resume Nitin Gupta Figma Material Design
presentation s e = -
iR =l = = (s} o | F
- R = | & | |
Fluppqlird —-— 9 ‘_' 0 ) i ‘ ’
_ ¥ Freebie. . . . : : ] ] | ‘
LaslesVPN e ree ol & [PES
e v H P2l iphone 12pro T ) iPhol
—~ __ _ iPhone 12 [tk
[ TR — | Mockup {
3 Lo e | BErE mockups g
- - -
ﬁ Flippy Bird 149 [7 71k @ FREEBIES-Landingpage—... < 689 [7 261k @ iPhone 12 Pro Mockups O 423 [7 431k
Jackie Chui Didi Kurniawan Is.graphics
Wity .
e o OO0 &ayyy ) Priangg
|@ - Community Q Publish @ v
Material Theme Builder
2.7k Try itout 90k
(2 By Materiai Design @
e - G
Q
Plants Care
Visualize dynamic color and create a custom Material Theme Tags
The Material Theme builder is built to assist in exploring the possibilities of dynamic color, :
android colors
harmonizing brand colors, and providing a type scale. All with implementation in mind to bridge
designer and developer workflows. dynamic color google
Visualize dynamic color in your Ul material material you
Material Design’s Dynamic color brings user personalization to apps by generating accessible
light and dark color schemes from a user’s device wallpaper. theming
Select an image or color to visualize dynamic color in your Ul. Material Theme Builder utilizes
design tokens available in the new Material 3 Design Kit Share
Generate a custom theme & L 4 H
Build a custom Material Theme, allowing you to migrate to Material Design 3’s new color system,
and export it to code.
Made for Figma design
A Token structure in the Material Design Kit and Material Theme Builder have been updated for Last updated 6 months ago
easier readability and to work with Figma updates. MTB has a migration script built in for the Kit Support: material-theme-builder-
and generated color diagrams. support@google.com
Use Swap on elements with the previous token structure to update them to the new structure.A Licensed under Community
Resource License
How to use:
Setup and explore dynamic color Report resource
1. After installing, open the plugin from the Figma menu or command and click Get Started to
Read more
|Material Theme Builder

D By Material Design @ 27
D Version history

Version 11 on 2 July 2022

- dark mode ui

- fix for theme swap

- fixing light/dark toggle

- adding migration for read-only tokens

- adding migration for type tokens

- figma background color update

Version 10 on 25 June 2022

- new Ul

- adding settings dialog

- adding rename/delete for extended colors
- adding extended colors to dynamic

- fixing export options

- adding content color to dynamic

- fixing performance issues

- adding hct picker

- adding hex code copy/paste

- adding ability to turn off creating diagrams
- fixing surface colors

- adding new typography styles

- adding new color styles

- removing read-only directory in styles

See all 0
y
|Material Theme Builder
2.7k Try itout 90k
(2 By Materiai Design @
How to use:
Setup and explore dynamic color Report resource
1. After installing, open the plugin from the Figma menu or command and click Get Started to
Read more
More like this
” @ Y
Relay for Figma Sympli Handoff Material palette
‘ ' Version history
Version 11 on 2 July 2022
- dark mode ui
- fix for theme swap
- fixing light/dark toggle
- adding migration for read-only tokens
- adding migration for type tokens
- figma background color update 0
Version 10 on 25 June 2022


User groups

pageType: Marketing

pagePatterns:
Community Page
Hero Section

screenElements:
Grid List
Thumbnail

screenElements:
Search Bar
Grid List
Card
Thumbnail

screenElements:
Dropdown Menu
Tab
Button
Search Bar
Grid List
Card
Thumbnail
Grid List
Thumbnail
Top Navigation Bar

pagePatterns:
Landing Page
Community Page
Community Page
CTA Section
Footer Section
Community Page
Community Page
Community Page
Hero Section
Community Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Files and templates Plugins and widgets Events and
Free expertly crafted files you can Extend what’s possible and livestreams
duplicate, remix, and use automate work
N Best practices
Education program
User groups
|
Figma connects everyone in the design process
so teams can deliver better products, faster.
t start
O
romm . HYEEEEE: G
Layers Desigt
. Headline
lay For you Albums Cp ———— Color.
DO o
I
% Slider | . L
Radio I Q ¢
|
2 AR Y
|Join a group
Interests Africa Asia-Pacific Europe India Latin America Middle East and North Africa
North America Languages On Campus
ART & ILLUSTRATION CIVIC DESIGN AND DESIGN SYSTEMS DESIGNOPS
TECHNOLOGY
EDUCATORS ETHICS & DIVERSITY FOF DISCORD HACKERS
ICONOGRAPHY PLUGINS
|ICONOGRAPHY PLUGINS
] ]
Meet more friends on Discord
Start a group
Become a Become a
Community Advocate Student Leader

'@ Quick Links Social

> Groups #FriendsOfFigma
Friends of Figma > Upcoming Events

> Code of Conduct vy f

> Terms of Service
© 2022 Figma All Rights Reserved. Powered by
|Upcoming events
Search for a city to find events Q
Lille, France
Meet-up a la biére @
Rien de tel que cette bonne vieille boisson du Nord
pour lancer notre communauté Figma !
H°“Sto,, Au programme:
* Présentation de la communauté
+ Boite a idée de sujets a aborder pour les
prochains events
- Discussion avec des passionnés
Friends of Figma, Design Social Early Career: Launching [Figma Xmas] - Meet-up
Houston Virtual Event yourself into the market ala biere @
& Houston Dec 19 & Vancouver Jan 27 4 Lisbon Jan 11 @ Lille Dec 20
|We are so glad you’re here. Whether you're a professional or student, Friends of Figma
exists so our users can come together to help each other; lifting everyone up. It’s run
by the community and everyone is welcome.

So come on in and make some new friends.

Join a group Start a group Start a Student’s group

Upcoming events
|'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
We are so glad you’re here. Whether you're a professional or student, Friends of Figma
exists so our users can come together to help each other; lifting everyone up. It’s run
by the community and everyone is welcome.
So come on in and make some new friends.
. s ]
|Friends of Figma, Design Social Early Career: Launching [Figma Xmas] - Meet-up
Houston Virtual Event yourself into the market ala biere @
E4
Houston Dec 19 Vancouver Jan 27 Lisbon Jan 11 Lille Dec 20
‘ 5
a1\ L
!
»w
'S }
&
~
A
\ o -
\-‘f, Y
v/
Join a group
Interests Africa Asia-Pacific Europe India Latin America Middle East and North Africa
North America Languages On Campus


Toggling Outlines

screenElements: Toast Button

screenElements:
Dropdown Menu
Text Field
Toast
Button

screenPatterns:
Action Option
Acknowledgement & Success

screenKeywords:
B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > 70% «
Layers Assets Page 1 » o
«» Contact item |
Zoom in B+
Alternate
Zoom out 8-
Default Zoom to fit 1
1 Contact Detail Zoom to 50%
Zoom to 100% ¥0
Lorem ipsum dolor sit amet co...
Zoom to 200%
Name A
Pixel preview >
Avatar
Contacts  + Pixel grid o
Top bar & Contact item v Snap to pixel grid o8
[ |
+ Home ! ! i v Layout grids °6
Contact list : @ Name } @ Name Nz Rulers @R
: } Show outlines @40 Outlines >
i | | Lorem ipsum dolor sit| . =
Contact item i | Name non suspendisse al v Multiplayer cursors 88\
| | dipiscingiitvg i
Contact item | Name | o adipiscing Include hidden layers v Comments ac
: } Include object bounds
Contacts ‘- Y
Top bar
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > 70% «
Layers Assets Page 1 » o
«» Contact item |
Zoom in B+
Alternate
Zoom out 8-
Default Zoom to fit 1
1 Contact Detail Zoom to 50%
Zoom to 100% ¥0
Lorem ipsum dolor sit amet co...
Zoom to 200%
Name A
Pixel preview >
Avatar
Contacts  + Pixel grid o
Top bar & Contact item v Snap to pixel grid 38’
[ |
+ Home ! ! i v Layout grids °6
! ! Rulers @R
Contact list ! @ Same ! @ Name Name
: } Outlines >
Contact it | | Lorem ipsum dolor sit amet consectetur. Urna . -
ontactitem | | Nee non suspendisse aliquam pharetra ligula v Multiplayer cursors s\
! ! dipiscing bibendum.
Contact item : Wi I s adipiscing bibendum v Comments @cC
| |
Contacts ‘- Y
Top bar
|B - 1 [y Wy T o @ I®) Drafts / Contacts App v J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
FSFSF5 100% ®
Default
o om— _ _ - '
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar @@nﬁ@@ﬁ@
Export +
Top bar + Contact item
H# Home
Neme > Name >
Contact list Q Neme
B Lorem ipsum dolor sit amet consectetur. Urna
Contact item Name S non suspendisse aliquam pharetra ligula
Neme > adipiscing bibendum.
Contact item
Contacts
Top bar
Outlines visible Cancel 0


Deleting a comment thread

screenElements: Dialog Button

screenPatterns: Delete Confirmation

screenElements:
Toolbar
Search Bar
Thumbnail

screenPatterns:
Comments
Empty State

screenElements:
Dialog
Button
Dropdown Menu
Toolbar
Search Bar
Thumbnail

screenPatterns:
Delete
Confirmation
Action Option
Comments
Empty State

screenKeywords:
Delete comment X
Are you sure you want to delete this comment? This action cannot
be undone.
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search @ H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
ol - | [
© B |-
o John )
Check out this home screen! ' Qe
e
John Get the app
: Name #1-Page 1
4 Mark as unread
John 3 mi
Check out ECRAIE
Delete thread
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search @ H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
‘- oo v | .
. e I >
)
% Name Get the app
D Give feedback, ask a question, or
just leave a note of appreciation.
Name Click anywhere in the file to leave
4 a comment.


Updating notification settings

screenElements:
Checkbox
Radio Button

screenElements:
Radio Button
Checkbox
Radio Button

screenPatterns:
Edit
Settings & Preferences

screenKeywords:
Account  Community Notifications  Plugins X
Email notifications
Send me notifications by email
You'll still get emails from Figma about your account.
File comments
O All comments on my files and any threads I'm in
@ Only mentions and replies
O None
Invites and requests
@ All types of invites and requests
O Only invites and requests that need my response
O None
Community comments
(® Al comments on my published resources
O Only mentions and replies
O None
Weekly digests
Summary of Community activity on your resources (once a week)
|Account  Community Notifications  Plugins X
Email notifications
Send me notifications by email
You'll still get emails from Figma about your account.
File comments
@ All comments on my files and any threads I'm in
O Only mentions and replies
O None
Invites and requests
@ All types of invites and requests
O Only invites and requests that need my response
O None
Community comments
(® Al comments on my published resources
O Only mentions and replies
O None
Weekly digests
Summary of Community activity on your resources (once a week)


Holding a vote

screenElements: Toolbar Avatar Button Stepper

screenElements: Dialog Card Button Badge

screenPatterns:
Subscription & Paywall
Pricing

screenElements: Dialog Card Button Badge Toolbar Avatar Button Stepper

screenPatterns:
Subscription & Paywall
Pricing
Canvas

screenKeywords:
X
Put it to a vote
Upgrade your plan to hold votes in FigJam.
Starter curentpian Professional
For trying things out Per editor per month when billed annually
Free for unlimited editors FigJam $3
v 3 design files and 1 project v Voting
v 3 pages per design file v Unlimited files and projects
v Unlimited pages in design files
See all features >
Upgrade to Professional
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
|
~ /
P o
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
4

User action
What actions are they currently
‘taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
S\::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 2 = =1
< .
A A A ‘ . A L] [] ) ﬁ A 8
9 \ & ™ B @


Libraries

screenElements:
Search Bar
Accordion
Tab

screenPatterns:
Canvas
Bookmarks & Collections

screenElements:
Dialog
Stacked List
Banner
Link
Button

screenPatterns:
Empty State
Notifications

screenElements:
Dialog
Stacked List
Banner
Link
Button
Search Bar
Accordion
Tab

screenPatterns:
Misc
Empty State
Notifications
Misc
Canvas
Bookmarks & Collections

screenKeywords:
B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > (%
Layers Assets Page 1 Design Prototype Inspect
Libraries  Updates X
= E Background
< Contacts App Current file
v Local components FSFSF5 100% @®
letail
Ag
Q Name Local styles +
Text styles
Ag Headline - 18/Auto
Export +
« Contact item
| S | 'y
| i
| :
|
\ fams Name
! ”
|
| n ipsum dolor sit amet consectetur. Urna
| n suspendisse aliquam pharetra ligula
} Name adipiscing bibendum.
|
|
| S —— |
Current file has changes Unpublish Publish...
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
Libraries  Updates X
= E Background
v Local components FSFSF5 100% @®
Q Name Local styles +
Text styles
Ag Headline - 18/Auto
R Export +
+ Contact item .
e | No updates available 5
| i
| :
| Updates to components or styles
| Name : P P ves Name
| will show up here as they become available.
| ”
| n ipsum dolor sit amet consectetur. Urna
| n suspendisse aliquam pharetra ligula
} Name adipiscing bibendum.
|
|
| S —— |
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > (%
Layers Assets Page 1 Design Prototype Inspect
Libraries  Updates X
= E Background
Q
v Local components F5F5F5 100% ®
Current file
Q Name Local styles +
Contacts App Publish... >
Text styles
Ag Headline - 18/Auto
Export +
« Contact item
| S | 'y
| i
| :
|
I fams Name
! ”
|
| n ipsum dolor sit amet consectetur. Urna
| n suspendisse aliquam pharetra ligula
I Name adipiscing bibendum.
|
|
| S —— |
Enable libraries for all your drafts from your user account settings X
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > (%
Layers Assets Page 1 Design Prototype Inspect
= m Background
v Local components F5F5F5 100% ®
Home
Local styles +
Text styles
Ag Headline - 18/Auto
Export +
« Contact item
5 | N
| | G
| | )
: Name ‘ Name
1 : Name
| ) | "
| | Description
| |
Name
} Q Name } @
| |
| |
- ___


Applying constraints

screenKeywords:
By B o [y Wy T 34 @ O )0 020 () J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L
= Rectangle 1
390 x 80 x0 Vo
W 390 H 80 o
Lo0° o O
Constraints
1
v Left
-_ i
! Left and right
O Fix positi Center
Scale
Layer
O Pass through 100% ®©
Fill o+
EEEEEE 100% (O
Stroke +
Effects +
Export +
|g B o O % T % M O B ¢ © el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
= Rectangle 1
390 x 80 x0 Vo
W 390 H 80 S
b 0° o o
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
D9DOD9 100% (O
Stroke +
Effects +
Export +
|g B o O % T % M O B ¢ © el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
= Rectangle 1
390 x 80 x0 Vo
W 390 H 80 S
b 0° o o
Constraints
1 .
i Left and right
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
EEEEEE 100% (O
Stroke +
Effects +
Export +


Deleted

screenElements:
Side Navigation
Tab

screenPatterns:
Trash & Archive
Empty State

screenElements:
Tab
Side Navigation
Tab

screenPatterns:
Trash & Archive
Trash & Archive
Empty State
Home

screenKeywords:
John "
(e R R i Q @) Explore Community o @ v
(® Recents Drafts Deleted
[ Drafts

Created by you v All files v Date deleted v oo |=
Ready to go beyond this free Contacts
plan? Upgrade for premium ‘
features. ® - ® John
-
Favorite files
Hover over any file and click the star to
add it here
Contacts App
Deleted Invalid Date
Teams
B Acme Free
Team project

—|— Create new team
. Download desktop app X 0
|John "
(e R R i Q @) Explore Community o @ v
(® Recents Drafts Deleted
[ Drafts

Created by you v All files v Date deleted v oo |=
Ready to go beyond this free
plan? Upgrade for premium
features.
Favorite files
Hover over any file and click the star to
dd it h
addithere You don't have any deleted files.
Teams
B Acme Free
Team project

—|— Create new team
. Download desktop app X 0
|John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts

New design file + New FigJam file + [ Import file

@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f —
Favorite files Dlagram — sync meeting - - ] !
, _ basics in agenda E oo L o S
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L 2 ‘.‘ =) - il -
e oA = i} .
Contacts ‘ " S : = i =1 B
<§<> amd O -
ko9 B W
. ; ey ﬁ
o . - i ]
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G


Internal profile

screenElements:
Dropdown Menu
Avatar
Icon

screenElements:
Dropdown Menu
Avatar
Icon
Stacked List

screenPatterns:
Home
My Account & Profile

screenKeywords:
John "
8 jsmith.mobbin@gmail.com i Q @) Explore Community Jal @ .
© Recents Drafts Deleted @ jsmith.mobbin@gmail.com
[ Drafts
@ Internal profile
New design file + New FigJam file + [ Import file (& Plugins
@ Design and prototype Whiteboard and diagram Bring in files from o J;“f —
ettings
Ready to go beyond this free
plan? Upgrade for premium @ UIES >
features.
Explore FigJam templates . Getdesktop app
= ‘1_% == <+ Add account
5 oS¢ Team PR . ...
Favorite files |a§_|ram — sync meeting . |
) i basicsin agenda =TT B —
Hover over any file and click the star to Fi J m B == = '
add it here g a E—— o . -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
—|— Create new team
. ) . i i
e A/ - o
Contacts Q . e - S
00 amd O -
ko9 B N
B \ ‘@
o . - i .
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X 0
|John "
(e R R i Q @) Explore Community o @ v
@®© Recents Profile View Community profile
[ Drafts
All files v o
@® John
File contributions
Ready to go beyond this free jsmith.mobbin@gmail.com
lan? Upgrade for premium . . -
2 pg: a File name Project Last activity
eatures.
L] Gonacts ApP 8 minutes age
-| . . .
=3 FigJam Basics 27 minutes ago Teams
Favorite files B Acme
Hover over any file and click the star to
add it here
Recent projects
Teams Your recent projects will appear here.
B Acme Free
Team project
—|— Create new team
. Download desktop app X 0


Toggling UI

hotspotType: Right Click

screenKeywords:
B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate Paste here
FSFSF5 100% ®
Default
Show/Hide Ul 8\
H Contact Detail Show/Hide comments  ©*C Local styles +
Lorem ipsum dolor sit amet co... Cursor chat / Text styles
Name Quick actions... 8/ Ag Headline - 18/Auto
Plugins >
Avatar
Contacts :
Widgets 4 Export +
Top bar « Contact item s
[ | \
H Home : I ,v’-"‘"'
i ] Name
Contact list : Q Same I @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! 5 adipiscing bibendum.
Contact item : I ”
| |
Contacts ‘- Y
Top bar
|« Contact item
C '
| | '
| | N
ame
! Name ! Name
| |
| | Lorem ipsum dolor sit amet consectetur. Urna
| | non suspendisse aliquam pharetra ligula
: Q Wi } Q Name adipiscing bibendum.
| | -
| |
L |
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar


Exporting a layer

screenElements:
Text Field
Button
Accordion

screenElements:
Text Field
Text Field
Button
Accordion
Accordion

screenPatterns:
Import & Export
Import & Export

pageType: Application Application Application Application Application

screenKeywords:
g- B - O- % T & & D ¢ © W D B » > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Alternate
Frame 0= 3¢
Default
[rome n X -195 Y -425
1 Contact Detail
W 390 H 844 S
Lorem ipsum dolor sit amet co...
b 0° o 3
Name
Clip content
Avatar
Contacts
Top bar +» Contact item . Auto layout +
oottt T Tt T T T T T T T TN | ,
H# Home : I fifzv
| | N Layout grid +
ame
Contact list : @ Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula Layer
: Name } adipiscing bibendum.
NETE | | . O Pass through 100% ©
| |
Icon/Chevron ‘- Y
Fill o +
Divider
FFFFFF 100% ® —
Avatar
Contact item Stroke +
Contacts
Selection colors
Top bar
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
a 0 See all 5 colors
390 x 844
Effects +
Export e
|g Pl O % T & &M O ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design Prototype Inspect
«» Contact item "
Fill o
Alternate
FFFFFF 100% ® —
Default
& lome q Show in exports
1 Contact Detail
Lorem ipsum dolor sit amet co... Stroke +
Name
Selection colors
Avatar
Contacts Il ooo000 100%
Top bar o P §
SQEIERIER_ o oo momoommea j’ EEEEEE 100%
H# Home | | o
: } D9DOD9 100%
Contact list ! Name ! Name Name
: } See all 5 colors
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name ! y adipiscing bibendum.
Name : } ’ Effects +
| |
Icon/Chevron Lo oasoccossssccasss==d)
Export - 4+
Divider
X V1 PNG cee
Avatar
. Export Home
Contact item
Contacts v Preview
Top bar
Contacts
O ]
390 x 844
|g Pl O % T & &M O ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Clip content
Alternate
Auto layout +
Default
lome - .
H Contact Detail Layout grid +
Lorem ipsum dolor sit amet co...
Layer
Name
O Pass through 100% ®©
Avatar
Contacts
2% Fill N+
Top bar <« Contact item )
oottt T Tt T T T T T T T TN | j
H Home : ! ' FFFFFF 100% ® —
| |
Contact list : @ Name I @ Name Name Show in exports
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | non suspendisse aliquam pharetra ligula
: Name } 5 Dame adipiscing bibendum. Stroke +
Name i ‘ g
| |
Icon/Chevron ‘- Y Selection colors
Divider [l oooooo 100%
Avatar EEEEEE 100%
Contact item D9OD9D9 100%
Contacts See all 5 colors
Top bar
Effects +
Export — 4+
1x PNG
O ]
390 x 844 Export Home
> Preview
|g Pl O % T & &M O ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design Prototype Inspect
«» Contact item N
Fill o
Alternate
FFFFFF 100% ® —
Default
& lome q Show in exports
1 Contact Detail
Lorem ipsum dolor sit amet co... Stroke +
Name
Selection colors
Avatar
Contacts Il ooo000 100%
Top bar o P §
SQEIERIER_ o oo momoommea j’ EEEEEE 100%
H Home ! I L
: } D9DOD9 100%
Contact list ! Name ! Name Name
: } See all 5 colors
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name ! y adipiscing bibendum.
Name : } ’ Effects +
| |
Icon/Chevron Lo oasoccossssccasss==d)
Export - 4+
Divider
1x PNG
Avatar
. Export Home
Contact item
Contacts v Preview
Top bar
Contacts
O ]
390 x 844
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar


Events & livestreams

pagePatterns:
Events & Webinar Page
Header Section

pagePatterns:
Events & Webinar Page
CTA Section

screenElements:
Dropdown Menu
Link

pagePatterns:
Landing Page
Events & Webinar Page
CTA Section
Events & Webinar Page
Header Section
Events & Webinar Page
Events & Webinar Page

pageType: Marketing Marketing Marketing Marketing Marketing

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Files and templates Plugins and widgets Events and
Free expertly crafted files you can Extend what’s possible and livestreams
duplicate, remix, and use automate work
N Best practices
Education program
User groups
|
Figma connects everyone in the design process
so teams can deliver better products, faster.
t start
O
romm . HYEEEEE: G
Layers Desigt
. Headline
lay For you Albums Cp ———— Color.
DO o
I
% Slider | . L
Radio I Q ¢
|
2 AR Y
|30 L0 Playliol ICCK OUL LT SCTiICsS Qtal Lt DUlldiny
Want to learn more about user group events
in your area?
Try Figma for free
I Y A ST P T Y S e I
|3 Products v Enterprise v Pricing Community v Company v @ English v Log in
Find a virtual event that
Join Figma’s designer advocates and customers like you as
they share best practices and give an inside look into
how they work.
Upcoming events
Entre design libre et design structuré : trouver le juste
|Get started
Entre design libre et design structuré : trouver le juste
équilibre
This event is in French
En phase de discovery et d’idéation, les équipes ont besoin d'un environnement qui encourage
la créativité et I'émergence d'idées nouvelles. Au stade du prototype(“build”), a contrario, les
équipes recherchent un environnement qui favorise la rigueur, la précision et I‘analyse.
Les équipes de design performantes et matures sont ainsi invitées a passer, tour a tour, d'un
style de conception libre(appelé ici Freeform Design) a un style de conception
structuré(leStructure Design).
Au-dela du constat, il s’agit de comprendre :
® dans quelle mesure ces deux environnements en apparence antinomiques sont
compatibles et méme complémentaires,
® Et plus important encore, a quel point leur bonne articulation peut favoriser I'atteinte
d’une certaine forme d’excellence opérationnelle.
Alice Boissonnat, Principal UX Designer chez Amadeus, partagera avec nous, au travers
d’exemples concrets et“a méme le fichier”, le cheminement qui a permis a son équipe
Produit(50 collaborateurs) de non seulement prendre conscience, mais au final, de
concrétement concilier Freeform et Structured design dans le quotidien, n’hésitant pas a
embrasser des approches pour le moins osées : le"noEstimate" ou encore 1e“100 %
composants, 100% Atomic Design”.
Ce cas alimentera la réflexion des designers en recherche d’environnements qui favorisent le
bon déploiement d’un Design System ou une collaboration plus étroite avec les développeurs.
Jan 11, 7pom GMT+8 Register
Ei# D8R, UzabaseDT 1 VI AT A
|Get started
Upcoming events
Entre design libre et design structuré : trouver le juste
équilibre
This event is in French
En phase de discovery et d’idéation, les équipes ont besoin d'un environnement qui encourage
la créativité et I'émergence d'idées nouvelles. Au stade du prototype(“build”), a contrario, les
équipes recherchent un environnement qui favorise la rigueur, la précision et I‘analyse.
Les équipes de design performantes et matures sont ainsi invitées a passer, tour a tour, d'un
style de conception libre(appelé ici Freeform Design) a un style de conception
structuré(leStructure Design).
Au-dela du constat, il s’agit de comprendre :
® dans quelle mesure ces deux environnements en apparence antinomiques sont
compatibles et méme complémentaires,
® Et plus important encore, a quel point leur bonne articulation peut favoriser I'atteinte
d’une certaine forme d’excellence opérationnelle.
Alice Boissonnat, Principal UX Designer chez Amadeus, partagera avec nous, au travers
d’exemples concrets et“a méme le fichier”, le cheminement qui a permis a son équipe
Produit(50 collaborateurs) de non seulement prendre conscience, mais au final, de
concrétement concilier Freeform et Structured design dans le quotidien, n’hésitant pas a
embrasser des approches pour le moins osées : le"noEstimate" ou encore 1e“100 %
composants, 100% Atomic Design”.
Ce cas alimentera la réflexion des designers en recherche d’environnements qui favorisent le
[P DL I TR £ SR o L o T SR | (RN R T PR A SRR T (PR (LA [


Drawing on board

screenElements:
Drawer
Color Picker
Toolbar

hotspotType: Draw

screenElements:
Color Picker
Toolbar
Avatar
Button
Stepper
Color Picker
Drawer
Color Picker
Toolbar

screenPatterns:
Draw & Annotate
Canvas
Draw & Annotate

pageType: Application Application Application Application Application Application Application Application Application Application Application Application

screenKeywords:
8 O A& O Drafts / Untitled v 0 m P O — %~ +
[}
~ 4
- A
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74

User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
@::portunity
What are some things that
could improve this moment?
Could this he skipoed or solved
elsewh
. 1‘_):.%-‘\ _ :
) R /
A B . O® ©Le@s +-
2 B 2
1 _ / LY Lo faed! L 1 I
P> f <) . =
" | [ (-7~ &
A A . A L] [] A
°e@o0 2 -
9 \Ir &
|8 O A& O Drafts / Untitled v o m P O — %~ +
]
K
e I':’°.‘-7L‘;‘IS’!‘
cAlTISs 47%
Lg%
SRS
[}
- /
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this hegkipped or solved
elsewhl1 |
A | Py Y T 4
A | O8O0 @
L\ | |
P> f <) T . I:II |
A ~ | ~ t 4 ~ . . ﬁ ~ 8
. —
© \Ir s ™ Q)
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
1.’0‘61"-(':,:(
AGUE 90!
°_L/'L;'°"! Vil
SRS
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this he skipoed or solved
elsewh
g 1‘_)‘-\.%-‘\ _ :
A I O 0 LL00% ©-
Ry 7
] | F, ] -
| x L\ il Z30 | S | !
P> f <) . =
" | [ (-7~ &
A A . A L] [] A
°e@o0 2 -
9 \Ir &
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
| elsewhere?
| 1 vy :
A /] \ <l m -
y AN
A e 0000000
. . s (0010 S .
g f =3 o ]
~ < T .
A A ‘ . A L] [] .ﬁ A 8
O \ & ™ B G
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
| elsewhere?
| 1 — i
| \ W e -
A \ A,
y AN .
ANl e0e0000
. . s (0010 S .
g f =3 o ]
A < T .
A A ‘ . A L] [] ) J) A 8
O \ & ™ B G
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} ' The user journey of....
[}
~ 4
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
V) ) A #C4DC32
Quotes and sentiment £
How do they feel in this moment? -.—
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
A elsewhere?
p
| S A~
M | ‘_)\-\,%al | o
| | | L\ |91 I |
v “ { ]
~ < T . ]
A A ‘ . A L] [] ) ﬁ A 8
9 i s ™ - @
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
|
~ /
P o
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
4

User action
What actions are they currently
‘taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
S\::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
“ o
A < T . |
A A ‘ . A L] [] ) ﬁ A 8
9 \ & ™ B @
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
|
~ /
P o
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
4

User action
What actions are they currently
‘taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
S\::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 2 = =1
< .
A A A ‘ . A L] [] ) ﬁ A 8
9 \ & ™ B @
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
| elsewhere?
|1 — i
2 ol p
A \ A,
y 3 AN .
y % ‘-)%c‘l‘ .O.@...
. . s (0010 S .
V f, < < . o
A ~ | ~ ‘ 4 ~ . | . ﬁ ~ 8 l |
. —
© \Ir s ™ G
|8 O A& O Drafts / Untitled v o m P O — %~ +
} ' The user journey of....
[}
~ 4
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
V) ) A HIEEIE
Quotes and sentiment £
How do they feel in this moment? .—
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment? D
Could this be skipped or solved
A elsewhere?
p
| ) N
R ®
| 18] PR o [
> )
> { ]
~ < . ]
A A ‘ . A L] T [] ﬁ A 8
9 i s ™ . - @
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} ' The user journey of....
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
A elsewhere?
N N )
A S 000000 O
NS ~
b - B
| 1 8 | VAR ! 1 1 | I
g f =3 o ]
~ < T .
A A ‘ . A L] [] ) ﬁ A 8
Y \ & ™ B G
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
1.’0‘61"-(':,:(
20,0
[}
~ 4
- A
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74

User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
@::portunity
What are some things that
could improve this moment?
Could thig heskipned or solved
elsewhw ‘
A | SN, A (D) £
A& O OLees @
1 1 NG < 7
| x L\ | e | !
V f, < < . o
A ~ | ~ ﬁ 4 ~ . | . ﬁ ~ 8 l |
. —
© \Ir s ™ @


Creating a vector

screenElements:
Top Navigation Bar
Button

screenElements:
Top Navigation Bar
Button
Toolbar

screenPatterns:
Draw & Annotate
Draw & Annotate
Draw & Annotate

screenKeywords:
v v o O T % & O B ¢ © el 2 b e
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = ™ H# I
— Line1
: X 20 Y 323
Ellipse 1
: w347 H
Rectangle 1
: b 0°
Constraints
i 1
H = Left
E ’ -_
| | I Top
e — (O Fix position when scrolling
347%x0
Layer
O Pass through 100% ®©
Fill +
Stroke o+
EEEEEE 100% (O
Center = 2
Effects +
Export +
|By BB Hv /v WY T 353 @ I 3 ogo () J Share & > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
— Line1
: X 20 Y 323
Ellipse 1 :
: w347 H
Rectangle 1
: b 0°
Constraints
: 1
H — Left
Q E ! I o
B S U R ——— (O Fix position when scrolling
347%x0
Layer
O Pass through 100% ®©
Fill +
Stroke o+
EEEEEE 100% (O
Center = 2
Effects +
Export +
|By v NV @ Done J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T H#+ L nhlv
> Vector 1
Vector
Line 1
X 362 Y 2815
Ellipse 1
+=> No mirroring
Rectangle 1
~ o
Layer
OO
° O Pass through 100% ®©
Fill +
Stroke o+
Il ooo000 100% ® -
Center =1 .es
Effects +
Export +
|g o O 2. T & & O g ¢ © U [share| » > 9%~
Layers Assets E Pen p ; Design Prototype Inspect
# Home f Pencil P = + = T + I
— Line1
: X 20 Y 323
Ellipse 1
: w347 H
Rectangle 1
: Lo0°
Constraints
! 1
H — Left
5 T
% | | I Top
—— (O Fix position when scrolling
347x0
Layer
O Pass through 100% ®©
Fill +
Stroke 2+
EEEEEE 100% (O
Center = 2
Effects +
Export +
|- o O- % T & & D B % © el 2 b e
Layers Assets Page 1 f Design Prototype Inspect
H Home = + = T + L
> Vector 1
i X 362 Y 260
Line 1 i
H n
: w8 H 145 o
Ellipse 1
: b 0° ~ o
Rectangle 1
Constraints
: 1
H — Left
Q % -
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill +
Stroke o+
D9DOD9 100% (O
Center = 2
Effects +
Export +


Resolving a comment

screenElements:
Popover
Pagination
Icon
Avatar
Text Field
Dropdown Menu

screenPatterns:
Filter & Sort
Comments
Filter & Sort
Other Action

screenKeywords:
B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search e H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
‘- oo v | .
. e I >
)
% Name Get the app
@ Name
Y
John
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
eal - | . =
© B |-
o John &
Check out this home screen! ' Qe
e
John Get the app
@ Name #1-Page 1
John Just now
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search H
# Home e v Sort by date
= Frame1 Tr Sort by unread
top
Contacts i Show resolved comments
Rectangle 1 Only your threads
Contacts
e P
e |
)
% Name Get the app
D Give feedback, ask a question, or
just leave a note of appreciation.
Name Click anywhere in the file to leave
i a comment.
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search @ H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
‘- oo v | .
. e I >
)
% Name Get the app
D Give feedback, ask a question, or
just leave a note of appreciation.
Name Click anywhere in the file to leave
4 a comment.


Adding stamps

screenElements: Popover Icon

hotspotType: Drag

screenPatterns:
Add & Create
Draw & Annotate
Add & Create

screenKeywords:
8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
12’0‘61"){'1,1(
AGEN 90!
“-‘-ﬂ;n"! (AG
SRS
Contact App
[}
~ /
- - B
User goal or problem / i
What s the user trying to |
accomplish? What is the k
problem to be solved? i
/4
User action i
What actions are they currently |
taking? How are they doing it? 3
What information are they i
Quotes and sentiment £ Jamming <3
- How do they feel in this moment? |
Drag one of these stickers or i
write a quote... John [
é\t\:portunity i
What are some things that i
could improve this moment?
Could this be skipped or solved |
elsewhere? i
g A o e@o -l— [=] [
i = ’ ( ’ e ! ’ . . L |
O g ; - ‘
\ -r'i". A G i
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
1:’0‘61“-('1,:(
AGEN 90!
STRsw
SRS
Contact App
[}
~ /
- N e
- : I
User goal or problem / i i
What s the user trying to |
accomplish? What is the k
problem to be solved? i
7/ 3
User action i
What actions are they currently |
taking? How are they doing it? 3
What information are they i
Quotes and sentiment £ Jamming <3
- How do they feel in this moment? |
Drag one of these stickers or i
write a quote... John [
S\J::portunity i
What are some things that i
could improve this moment?
Could this be skipped or solved |
elsewhere? i
A — ST L - = «
i — ’ ( ’ e ’ . . -
O g ) - '
\ -r'i". A G i
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
1:’0‘61“-('1,:(
AGEN 90!
“-‘-ﬂ;n"! (AG
SRS
Contact App
[}
~ /
- - B
User goal or problem / i
What s the user trying to |
accomplish? What is the k
problem to be solved? i
/4
User action i
What actions are they currently |
taking? How are they doing it? 3
What information are they i
Quotes and sentiment £ Jamming <3
- How do they feel in this moment? |
Drag one of these stickers or i
write a quote... John [
S\J::portunity i
What are some things that i
could improve this moment?
Could this be skipped or solved |
elsewhere? i
A — ST L - = «
i — ’ ( ’ e ’ . . -
O g ) - '
\ -r'i". A G i
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
» i
v A8 I
L ACA RSS!
SAM RS AT
S
SRS
Contact App
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
Quotes and sentiment £ Jamming <3
- How do they feel in this moment?
Drag one of these stickers or ‘
write a quote... L . .
‘
@::portunity &
What are some things that :
could improve this moment? N
Could this be skipped or solved N (
elsewhere? D
A — o c@° T - =
i — ’ ( ’ e ’ . . -
O g ) =
\ -r'i". A G
L]
|8 O A& O Drafts / Untitled v o m P O — %~ +
» i
Ve AL
B R
SAM RS AT
S
SRS
Contact App
[}
~ 4
- - B
User goal or problem / i
What s the user trying to |
accomplish? What is the k
problem to be solved? i
/4
User action i
What actions are they currently |
taking? How are they doing it? 3
What information are they i
Quotes and sentiment £ Jamming <3
- How do they feel in this moment? |
Drag one of these stickers or b i
write a quote... John, ' +1 g
9 i
S\‘::portunity - - i
What are some things that i
could improve this moment? 9
Could this be skipped or solved H |
elsewhere? - ' — |
A — ST L T - = ‘
i — ’ ( ’ e [ ' ’ . . -
K B
\ -r'i"'. A G i


Grouping layers

hotspotType: Double Click

screenElements: Accordion Tree

screenElements:
Accordion
Keyboard Key
Top Navigation Bar
Accordion
Tree

screenKeywords:
B BB o O % T 8 & O n ¢ 0 @ » B 2 > e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
T Scale
4 |
42x22
Layer
O Pass through 100% ®©
Ag Headline
- = — -
= = = T =+ i A
Fill to+
Il ooo000 100% ® -
Stroke +
Effects +
Export +
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T H#+ L nhlv
it Group 1 P ® :
Group
Contacts
: X 20 Y 244
Rectangle 1
H n
Contacts e E
i ho0° o
0 i O Auto layout +
P John
| A Constraints
g
! 0 1 Left
—
347 x79 _ e
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%
|By B o [y Wy T 34 @ O OXOV ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L :iv
T John
X Mixed Y Mixed
Contacts
w H 3
> Vector 1
Copy #C b 0° ~ 0
~ e Contacts
Paste to replace ©8R
B9 Ellipse 1 Copy/Paste as 2 Constraints
Rectangle 1 1
9 Bring to front ] 'r Ll — Left
Send to back [ -_
. I Top
L o !
Group selection G O | (O Fix position when scrolling
Frame selection X #G 347 x79
REREINTE #R
Layer
Flatten #E
Outline stroke @4 #80 O Pass through 100%  ©
Use as mask ~EM
Text o
Add auto layout A
Inter
Create component N #8K
Plugins > Semi Bold 18
Widgets S A Auto |A| -3%
T o0 o =
Show/Hide @ 8H — o
Lock/Unlock 8L =Sl = = T+
Flip horizontal a4H
Fill o
Flip vertical oV +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed =2 0
|- o O- % T & & D ® © W el 2 b e
Layers Assets Page 1 : Design Prototype Inspect
H Home = F = T H# L hv
oo
i Group
John |
i X 20 v 244
Vector 1 i
: w347 H 79 C
Line ontacts |
: bo0° o
Ellipse 1
Contacts - i - Auto layout +
Rectangle 1 R John
i:i Constraints
m; 0 1 i Left
347 x79 __ ¢
I I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
i1 Contact item
i Group
John |
i X 20 v 244
Vector 1 i
: w347 H 79 C
Line ontacts |
: bo0° o
Ellipse 1
Contacts - i - Auto layout +
Rectangle 1 R John
i:i Constraints
m; 0 1 i Left
347 x79 __ ¢
I I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%
|By B o [y Wy T 34 @ O OXOV ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L :iv
T John
X Mixed Y Mixed
Contacts
w H 3
> Vector 1
b 0° ~ 0 oo
~ e Contacts
K] Ellipse 1 Constraints
Rectangle 1 1
g .r . o
N I Top
O | (O Fix position when scrolling
347x79
Layer
O Pass through 100% ®©
Text o
Inter
Semi Bold 18
A Auto |A| -3%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Click + to replace mixed content.
Stroke 2+
Click + to replace mixed content.
Mixed = 2 0
|g B o O % T % M O ® © W el 2 b e
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T H#+ L nhlv
it Group1 :
Group
Contacts
: X 20 Y 244
Rectangle 1
H n
Contacts e E
i ho0° o
0 i O Auto layout +
P John
| A Constraints
g
! 0 1 Left
—
347 x79 _ e
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%
|g B o O % T % M O ® © W el 2 b e
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = ™ # L N
it Group 1 P ® :
Group
John |
: X 20 Y 244
Vector 1 i
w347 H 79 o
Line ontacts
i ho0° o
Ellipse 1
Contacts - : - Auto layout +
Rectangle 1 \ John
t *}ﬁv Constraints
g
! 0 1 Left
—
347 x79 _ e
I I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%


Setting a file's thumbnail

screenKeywords:
g- B - O- % T & & D ¢ © W D B » > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Alternate
Frame 0= 3¢
Default
[rome n X -195 Y -425
1 Contact Detail
W 390 H 844 S
Lorem ipsum dolor sit amet co...
b 0° o 3
Name
Clip content
Avatar
Contacts
Top bar +» Contact item . Auto layout +
oottt T Tt T T T T T T T TN | ,
H# Home : I fifzv
| | N Layout grid +
ame
Contact list : @ Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula Layer
: Name } adipiscing bibendum.
NETE | | . O Pass through 100% ©
| |
Icon/Chevron ‘- Y
Fill o +
Divider
FFFFFF 100% ® —
Avatar
Contact item Stroke +
Contacts
Selection colors
Top bar
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
a 0 See all 5 colors
390 x 844
Effects +
Export e
|g- B - O- % T & & D ¢ © W D B » > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Alternate
Frame 0= 3¢
Default I
[Fome n X -195 Y -425
1 Contact Detail
W 390 H 844 S
Lorem ipsum dolor sit amet co...
b 0° o 3
Name
Clip content
Avatar
Contacts
Top bar © Contact item i Auto layout +
oottt T Tt T T T T T T T TN | ,
H# 8 Home : I fifzv
| L Name Layout grid +
Contact list : @ Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula Layer
. : Name } 5 adipiscing bibendum.
Contact item i | g O Pass through 100% <®©
| |
Contacts ‘- Y
Fill o +
Top bar
FFFFFF 100% ® —
Stroke +
Selection colors
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
a 0 See all 5 colors
390 x 844
Effects +
Thumbnail set Export e
|g- B - O- % T & & D ® © W » R 2 b ooxe
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Alternate
Frame 0= 3¢
Default
o Copy ¥C ] X -195 Y -425
1 Contact Detail
Paste here W 390 H 844 n
Lorem ipsum dolor sit amet co... Paste to replace 4 %R
b 0° o o
Name Copy/Paste as >
Clip content
Avatar ( Bring to front 1
Send to back [
Top bar « Contact item Auto layout +
5 | S
! | i )
H Home @ | | Convert to section "
| | _ Layout grid +
Contact list : @ Name } Group selection #®G Name
! ! Frame selection X #G . .
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna L
| | Ungroup 426 non suspendisse aliquam pharetra ligula ayer
. : Name } adipiscing bibendum.
Contact item i | Flatten ®E O Pass through 100% ©
| |
Contacts o _____J Outline stroke © 80
Use as mask ~¥EM Fill o+
Top bar
Set as thumbnail
FFFFFF 100% ® —
Add auto layout A
- Strok
Create component N #8K roxe +
Plugins >
Widgets > Selection colors
Il ooo000 100%
Show/Hide @ 8H
EEEEEE 100%
Lock/Unlock 8L
D9DOD9 100%
Flip horizontal a4H
See all 5 colors
= Flip vertical @V =
Effects +
Export e


Toggling Rulers

screenKeywords:
B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > 70% «
Layers Assets Page 1 » o
«» Contact item |
Zoom in B+
Alternate
Zoom out 8-
Default Zoom to fit 1
1 Contact Detail Zoom to 50%
Zoom to 100% ¥0
Lorem ipsum dolor sit amet co...
Zoom to 200%
Name A
Pixel preview >
Avatar
Contacts  + Pixel grid o
Top bar & Contact item v Snap to pixel grid 38’
[ |
+ Home ! ! i v Layout grids °6
! ! Rulers @R
Contact list ! @ Same ! @ Name Name
: } Outlines >
Contact it | | Lorem ipsum dolor sit amet consectetur. Urna . -
ontactitem | | Nee non suspendisse aliquam pharetra ligula v Multiplayer cursors s\
! ! dipiscing bibendum.
Contact item : Wi I s adipiscing bibendum v Comments @cC
| |
Contacts ‘- Y
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna
Contact item | | Name non suspendisse aliquam pharetra ligula
} Name } y adipiscing bibendum.
Contact item | |
| |
Contacts e
Top bar
Rulers visible 0


Creating new text style

screenElements:
Search Bar
Button

screenPatterns:
Bookmarks & Collections
Empty State

screenElements:
Popover
Text Field
Button

screenElements:
Popover
Stacked List

screenElements:
Popover
Stacked List
Text Field
Search Bar
Button
Popover
Text Field
Button

screenPatterns:
Bookmarks & Collections
Add & Create
Bookmarks & Collections
Empty State
Add & Create

screenKeywords:
B BB o O % T 8 & O n ¢ 0 @ » B 2 > e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
T Scale
4 |
42x22
Layer
O Pass through 100% ®©
Ag Headline
- = — -
= = = T =+ i A
Fill to+
Il ooo000 100% ® -
Stroke +
Effects +
Export +
|8- BB oY [0 W T 55 M O 0 % © @ J) [share » > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
T Scale
4 |
42x22
Layer
O Pass through 100% ®©
Ag Headline
Text styles m +
Q
Ag Headline - 18/Auto
Stroke +
Effects +
Export +
|- o O- % T & & D B % © & el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
I T Scale
i 22 % 22
Layer
O Pass through 100% ®©
Text n
Create new text style X Text styles +
Q
Rag 123
(7 Browse libraries...
Name Headline Fill . +
Description [l oooooo  100% ® —
Stroke +
Show more options
Effects +
Export ei—
|- o O- % T & & D B % © & D EE o b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
T Scale
4 |
42x22
Layer
O Pass through 100% ®©
Text n
Text styles +
Q
(7 Browse libraries...
Fill o +
Il ooo000 100% ® -
Stroke +
Effects +
Export ei—
|8- BB oY [0 W T 55 M O 0 % © @ J) [share » > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = T + L
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
T Scale
4 |
42x22
Layer
O Pass through 100% ®©
Text o
Inter
Semi Bold 18
A Auto |A] -3%
T o o =0
- = — -
= B T -+ 4 b
Fill to+
Il ooo000 100% ® -
Stroke +
Effects +
Export ei—
|8- BB oY [0 W T 55 M O 0 % © @ J) [share » > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
I T Scale
i 22 % 22
Create new text style X  Layer
O Pass through 100% ®©
Rag 123 Toxt =
Text styles +
Q
Name Headline
Description
(7 Browse libraries...
Properties
Inter Fill . +
Semi Bold 18 Il ooo000 100% ® -
A Auto |A| -3%
- Stroke +
T 0 “ee
Effects +
Export as
|By B o [y Wy T 34 @ O 0 ® © & J Share &P > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
X 76 Y 19
T John
w H C
Vector 1
b 0°
Contacts
Ellipse 1 Constraints
Contacts |
—  Scale
Rectangle 1 __
I T Scale
i 22 % 22
Layer
O Pass through 100% ®©
Text n
Create new text style X Text styles +
Q
Rag 123
(7 Browse libraries...
Name Fill o+
Description [l oooooo  100% ® —
Stroke +
Show more options
Effects +
Export ei—
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home

#* Background

John
FSFSF5 100% ®

Contacts
Vector 1 Local styles +
Contacts

Export +
Ellipse 1
Rectangle 1

Q John
4


What's new

pagePatterns:
Landing Page
Footer Section

pagePatterns:
Releases & Changelog Page
Hero Section

screenElements:
Animation & Video
Link

screenElements: Illustration Button

screenElements:
Animation & Video
Link
Animation & Video
Illustration
Button
Button

pagePatterns:
Releases & Changelog Page
Feature Section
Landing Page
Footer Section
Releases & Changelog Page
Releases & Changelog Page
Releases & Changelog Page
Releases & Changelog Page
Releases & Changelog Page
Feature Section
Releases & Changelog Page
Hero Section
Releases & Changelog Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
Meet in a new way
Bring your team together in more creative ways with
features that make project syncs and team rituals more
focused, decisive, and engaging.
e 11
(- o— P a— PN Y
-, R . Work to the beat
‘/"-:‘\Q\ M u S I C
‘/ (,;) b A Get on the same wavelength as
I‘\/XO ] ) j your team by listening to music
(Q\ b /'/ / together. Try music in Figdam.
"N/ . . —_—
NS Lofi Hip Hop ~
N ofi Hip Hop
|Fi g ma Use Cases Explore Resources Compare
¥ Twitter Ul design Design features Blog Sketch
O YouTube UX design Prototyping features Best practices Adobe XD
Instagram Graphic design Design systems features Support Invision Studio
Kl Focebook Wireframing Collaboration features Developers Framer
Diagramming Design process Learn design Design on Windows
Brainstorming Figdam Downloads Miro
Templates Pricing What's new
Remote design Enterprise Releases
Agencies Organization Careers
Figma for education Professional About us
Customers Agency partners
Security Privacy
Integrations Modern Slavery Statement
Contact Status
|A. )
5 .V I~
\ ~/ g
< pr— -
Ay 4
|e? that's not -
inal
ying: iral tik tol
Rock the vote !
Narrow down options to speed up
decision making by allowing
everyone in a file to anonymously
vote on a set prompt. Try voting
in Figdam.
Times Square
BILLBOARD???
|R |
Figma is redesighing how teams work
together to propel ideas 7¢ into actionable
next steps—because it’s execution © that
separates building a good product from
building a great one. %
|H H H B
|/
Even more new releases »
Head over to our release notes to stay up to date on
all the big and small updates we’re making .
in real time.
: =
]
Try Figma for free
|Get started
u u
u L] [ ]
Get a running start Make every meeting a jam
Save time and lead more engaging meetings, brainstorms, and Attach Figma and Figdam files to any Google Calendar event
more, with over 300 ready-made FigJam templates. with the Figma Chrome extension. Plus, collaborate on files
directly in Microsoft Teams and Zoom (coming soon) in just
a few clicks.
|T | l | l
t .
With all of the different ways that teams collaborate, it can
be difficult to keep up momentum and move work forward.
That’s why product teams need a single place to ideate,
iterate, and make things happen.
i )Xo
|Get started
In case you missed it
¥ Tempo / Brainstorm % Tempo / Brand System
°
* Favorites
& Lvoe Stop typos in their tracks
e ‘;‘;-.a’ ; RSN .
2 dEy
where this « Share ideas and hand off files with
& is goning — confidence that they’re typo-free
s ’ Basat . oa Favorites with spell check. Now available in
s k i\ % Figma design and FigJam.
Add to dictionary
1 Spell check preferences
Copy
Copy/Paste as
Low Hanging Fruit


Finding layers

screenElements:
Search Bar
Icon

screenElements:
Search Bar
Search Bar
Icon

screenPatterns: Search Search

screenKeywords:
g B o Oy W T &4 @ [®) B % © 2 J Share & > 100% v
Q  Name H X Design Prototype Inspect
5 results - This page v A v = + = ™ H# I
Name i X 162 Y 280
Name w H S
Name b 0°
Name
Constraints
T Name ts
1
. — Left
I -_
A I I Top
] &
- (O Fix position when scrolling
- Layer
Lorem ipsum dolor sit amet consectetur. Urna O Pass through 100% @®
I non suspendisse aliquam pharetra ligula
adipiscing bibendum.
Text o
Inter
Semi Bold 24
A Auto |A| -3%
T o - =0
— = —= =
= B = T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Q I;? X Design Prototype Inspect
Background
FSFSF5 100% ®
Local styles +
Text styles
Ag Headline - 17/Auto
Export +
« Contact item
5 | N
| | i
| | “
| |
I Q neme I @ name Name
| y | p
| |
| | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
I Name I y adipiscing bibendum.
| |
| |
- ]


Quick actions

screenPatterns:
Command Palette
Command Palette

screenKeywords:
B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
Q FSFSF5 100% ®
Default
Name Local styles +
Icon/Chevron Text styles
Divider Ag Headline - 17/Auto
Avatar Contacts
Export +
1 Contact Detail +» Contact item
5 | 'y
| | g
Lorem ipsum dolor sit amet co... | | @ . i
| |
Name Name
| |
John | @ | 4 John
| |
| | Lorem ipsum dolor sit amet consectetur. Urna
Avatar | | N non suspendisse aliquam pharetra ligula
! N ! ame adipiscing bibendum
| ame | y piscing .
Top bar | |
| |
H# Home e
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > (%
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate Q L FSFSF5 100% ®
Default . q
Libraries
Name . Local styles +
[ Legal summary
Icon/Chevron .
Line L Text styles
Divider . . ine -
Publish changes to library Ag Headiine - 17/Auto
Avatar .
Show layout grids e N
Export
Contact Detail +» Contact item -
d R Collapse layers L S
| )
Lorem ipsum dolor sit amet co... . —-—
P | N Show left sidebar 138\
| ame
John | B John
| . Open layers panel X1
Avat | Lorem ipsum dolor sit amet consectetur. Urna
wvatar y N -
} Select all text layers non suspenQ|§sg allqgam pharetra ligula
| Name adipiscing bibendum.
Top bar | Toar libears, A-aen
| |
H# Home B e ——
|gy > o Oy © T 33 @ O Drafts / Untitled v J Share & > 100% v
Back to files Design Prototype Inspect
Q  Quick actions... 8/ Background
: FSFSFS 100% ®
File 4
Edit >
Local styles
View > V! +
Object >
Text > Export +
Arrange >
Vector 4
Plugins >
Widgets >
Preferences >
Libraries
Get desktop app
Help and account >
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
Q Lorem FSFSF5 100% ®
Default
Lorem Ipsum >
Name Local styles +
Back up all overrides in document to clipboard
Icon/Chevron Text styles
Divider Ag Headline - 17/Auto
Avatar Contacts
Export +
1 Contact Detail +» Contact item
5 | 'y
| | g
Lorem ipsum dolor sit amet co... | | @ . i
| |
Name Name
| |
John | @ | 4 John
| |
| | Lorem ipsum dolor sit amet consectetur. Urna
Avatar | | N non suspendisse aliquam pharetra ligula
| | ame diviscing bibend
| Name | y adipiscing bibendum.
Top bar | |
| |
H# Home e


Inserting an ellipse

screenKeywords:
8- BB & O W T 55 M O g % © J) [share » > 96% v
H
Layers Assets Page 1 ome i Design Prototype Inspect
H# Home d ® = + = T + L
O Ellipse 1
i X 20 Y 244
Rectangle 1
: W 60 H 60 c
§ b 0°
Constraints
3 1
= Left
| I Top
60 x 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill to+
D9DOD9 100% (O
Stroke +
Effects +
Export +
|g B o O % T % M O B ¢ © el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
= Rectangle 1
390 x 80 x0 Vo
W 390 H 80 S
b 0° o o
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
EEEEEE 100% (O
Stroke +
Effects +
Export +
|gv v MO8 BN T % M O B ¢ © el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
= Rectangle 1
390 x 80 x0 Vo
W 390 H 80 S
b 0° o o
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
EEEEEE 100% (O
Stroke +
Effects +
Export +
|g- B - O- % T % & DO B % © ) B » - -
H
Layers Assets Page 1 ome " Design Prototype Inspect
H# Home d ® = + = T + L
O Elipse 1
i X 22 Y 244
Rectangle 1 i
W 60 H 60 9
H v
b 0°
Constraints
i 1
— Left
o I I Top
60 x 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
D9DOD9 100% (O
Stroke +
Effects +
Export +
|By B o 1. WY T 33 @ I®) 3 020 () J Share & > 96% v
Lay [] Rectangle R Design Prototype Inspect
Line L —
£ nol I
/' Arrow oL
T O Ellipse [e]
/\ Polygon SIDIE0 *e e
W 390 H 80 o
S Star 5
E] Place image/video... 8K L 0° ~ o o
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o+
EEEEEE 100% (O
Stroke +
Effects +
Export +
|O+ X
By By v Oy W T & @ O 8 ¢ © J Share & > 96% v
Home .
Layers Assets Page 1 Design Prototype Inspect
H Home ¥ ® = + = ™ H# I
O Ellipse 1
X 22 Y 244
Rectangle 1
W 60 H 60 9
b 0°
Constraints
rr ‘.1 - = Left
— I Top
LL J“
60> 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill to+
D9D9D9 100% (O
Stroke +
Effects +
Export +


Open tutorial

screenElements:
Button
Coach Marks

screenElements:
Button
Tooltip
Button
Coach Marks

screenPatterns:
Guided Tour & Tutorial
Guided Tour & Tutorial
Guided Tour & Tutorial

screenKeywords:
8 O A& O Drafts / Untitled v 0 m P O — %~ +
[ E [
} l The user journey of....
|
~ /
-
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
4
User actici-
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
v
Quotes and sentimert 2
How do they feel in this moment?
Drag one of these stickers or
write a quote...
h For more tips and tricks, here’s a 2-
Orportunity SEmRmRLET minute, hands-on tutorial.
228
am
What are some things tha ‘* i
could improve this momel 'ee
Could this be skipped or Y BT Maybe later Open tutorial
elsewhere? P
| o
A 2 o . T =1
.
A A A ‘ . A L] [] J) A 8
9 | & . - @
|g O A O Drafts / FigJam Basics v o m S O = 1%y 4+
B R S, = - mm—ree mmm— S ST g
Figlam |, vos =9 = == b ==& = @ - = o) & i o2 o * e T
¢ ama @ nii I — o o P Y s : =
=BT BE = we e JE - i Em T o7
[N % Y Tn LR T e S R Ay Ao
A :
‘ N ~ A ATEPN . . T A =
o N M e T e n °
|g 0 A O Drafts / FigJam Basics v ° m e —  1B3% v+
o
unes for the timer
The timer now has built-in tracks, carefully
curated for collaboration.
a3t e ——— S A —— — —— p——
> fmE S Lol T P e T — ) e " e e ]
[ CEC L 2N R J— . e 7y — —
-oo 728 == oo == @ = @ = e 5 2 I - YT BF By T
P~ - [—— < e 2 . %
s L0 % am aw = iy Wy & i
¥ve B W . - e YYD —
p o .f % ia . TLOEE LEN W o LI Eaae [ — i H
=
A s o g
A A A . A L] T [] A
B s ' - ®


Copying embed code

actions:
Sharing
Copying & Duplicating

screenElements:
Dialog
Text Field
Button
Stacked List
Avatar
Link
Tab

screenPatterns:
Share
Invite Teammates

screenPatterns:
Share
Share
Invite Teammates

screenKeywords:
Invite Publish to Community X
Email, comma separated can edit v

22 Everyone at Acme can access this file.
@ Anyone with the link v can view v
John (You) owner
Jane can view v
[ Link to selected frame

Embed code copied to clipboard
|Copy public embed code
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450"
src="https://www.figma.com/embed?
embed_host=share&url=https%3A%2F % 2Fwww.figma.com%2Ffile % 2Fv5z5r1alAixf2xsUtTjz3Y%2FC
ontacts-App%3Fnode-id%3D0%253A1%26t%3D4glzRdywzP48eAa2-1" allowfullscreen></iframe>
|Invite Publish to Community X
Email, comma separated can view v
22 Everyone at Acme can access this file.
@ Anyone with the link v can view v
John (You) owner
Jane can view v
[ Link to selected frame


Subscribing to Blog

appCategory: Photo & Video

appTagline: Video review and collaboration

screenElements:
Text Field
Button

screenPatterns:
Acknowledgement & Success
Follow & Subscribe

pagePatterns:
Blog Page
Blog Page

pageType: Marketing Marketing Marketing

allAppCategories:
Collaboration
Photo & Video

screenKeywords:
)i frameio insider CHECK YOUR EMAIL!
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,C)
| Behind The Scenes, Interviews 25 MIN READ r‘g \i C” '\ ' \ ! ;::.
o { ” g'l ¢ 7» 1A\ .‘ M =
How Guillermo o MU TN L TR N -
3 4 W e / o ayls

del Toro's i = ez e 4

Animators /| o ——d & LA J

Brought Pinocchio L&_ § & —d Sf/y_s -y W

to Life, One ~ | AP ‘ /7 f

Frame at a Time (& |

December 19, 2022 l/l$ t )

7 A
RECENT @ ) POPULAR
|))i- frameio insider
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,O
| Behind The Scenes, Interviews 25 MIN READ r‘! \i Cﬁj '\ ' \ ! ;::.
. ( P @i .. 7" LAY .‘ M e
How Guillermo L LTS\
4 e A a8 [5G

del Toro’s - = szl ||E

Animators /| of—— & LA J

Brought Pinocchio L&_ (=" Sf/y_s -y W

to Life, One ~ AP ‘ ] f

Frame at a Time ,;f"‘}\..&:i,,—, |

December 19, 2022 1/,3’ 3 }

7 A
RECENT @ ) POPULAR
|)i frameio insider jdoe.mobbin@gmal.cc
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,O
I | 4N
| Behind The Scenes, Interviews 25 MIN READ r‘g \i C” '\ ' \ ! ;::.
o { ” g'l ¢ 7» 1A\ .‘ M =
How Guillermo - ML T L AN N
3 4 W e / o ayls
del Toro’s - = swazal ||E
Animators /| o ——d & LA J
Brought Pinocchio L&_ § & —d Sf/y_s iy W
to Life, One ~ | AP ‘ /7 fi
Frame at a Time ,,‘f"‘)\,&;z,—, ,
December 19, 2022 l/l$ t )
7 N
RECENT @ ) POPULAR