Adding component property (Variant)

screenElements: Select Icon

screenElements:
Editable Text
Select
Icon

screenPatterns:
Canvas
Add & Create
Add & Create
Add & Create

screenKeywords:
- o O- % T & & D D EE o b e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
€ Alternate
Frame | e -
Default
X 20 Y 19
H# Home
w347 H 79 S
Contacts
b 0° o 3
Contact item . i
1 C ot e (J Clip content
c . [ i N
ontact item | ! |
' ; \
Contacts | Name H | Name Parent component
I : i \ )
Rectangle 1 | | + Contactitem
| ] |
I i [
I r oy
| | Current variant 49
i )’ \ Name
| ,fﬁk | 4 Type Alternate
| |
| O 0 |
- Ny —————— Auto layout +
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
+ Home Local styles +
Contacts
Contact item N i Ag Headline - 18/Auto
+» Contact item
Contact item |{— jl
| | Export +
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4
| |
| |
| |
| I Name
: Name : d
g
| |
| |
.- - - ____J
|By B o [y Wy T 34 @ O <+> ®© & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
H# Home
Frame 0= e
Frame 1
X -622 Y -178
Contact item
w347 H 79 o
Contacts
bo0° o o
Contacts
[ Clip content
Rectangle 1 ’0 Contact item -
© Name <% Contactitem 34
ij\ )
O ] Properties +
347x79
» Name Auto layout +
4
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects o»
Curmard L
|g- W . - % T % & D D B > > e
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
¢ Type2
Frame | e -
Default
X 20 Y 19
H# Home
w347 H 79 S
Contacts
L 0° o 3
Contact item . i
1 C ot e (J Clip content
c . [ i N
ontact item | : |
' ; I
Contacts | Name H | Name Parent component
I : i I )
Rectangle 1 | | + Contactitem
| ] |
I i [
I r oy
| | Current variant 49
i )’ I Name
| ‘gﬁ‘ | 4 Type Type2 M
| |
| O 0 |
- Ny —————— Auto layout +
Constraints
1
= Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
|g- B8 £ O 8- T % & DO ® © W~ ¥ T
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
H# Home
X -642 Y -198 =
Frame 1
w387 H 119 S
Contact item
Lo0° s O
Contact item on ac S
Clip content
Contacts
#» Contact item
m 1
Rectangle 1 +» Contactitem J;?
Name Name
) H Properties +
@ Property 1 Default
0 ]
Name Auto layout +
y
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke o+
B o747FF 100% ® -
Inside =1 171 eee
Selection colors
Il ooo000 100%
B o747FF 100%
D9DIDY  100% 0
EEEEEE 100%
|g o O B T & &M O $ © W J) Bsharel 2 > 96 v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Default
X -642 Y -198 e
H# Home
w387 H 119 S
Frame 1
Contacts e
Contact item
Clip content
Contact item
:' Contact item -
Contacts +» Contact item 49
Rectangle 1 @ Name @ Name N
b b Properties
@ | Property 1
0 ]
. Name Auto layout +
+ 4
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke o+
B o747FF 100% ® -
Inside =1 1Z1 eee
Selection colors
Il ooo000 100%
B o747FF 100%
D9DIDY  100% 0
EEEEEE 100%
|g o O B T & &M O $ © W J) Bsharel 2 > 96 v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
Default
X -642 Y -198 e
H# Home
w387 H 119 S
Frame 1
Contacts e
Contact item
Clip content
Contact item
:0 Contact item -
Contacts +» Contactitem H
Rectangle 1 @ Name @ Name +
b b Properties
¢ Type Default
0 ]
. Name Auto layout +
+ 4
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke o+
B o747FF 100% ® -
Inside =1 1Z1 eee
Selection colors
Il ooo000 100%
B o747FF 100%
D9DIDY  100% 0
EEEEEE 100%
|g B o Oy W T &4 @ [®) ® © b J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = + = ™ # L N
H# Home
Frame 0= e
Frame 1
X -622 Y -178
Contact item
w347 H 79 o
ontacts
Lo0° o O
Contacts
[ Clip content
Rectangle 1 ’0 Contact item -
i’ Name +» Contactitem 49
v v
. - Properties
347x79
Name Au
4 @ Variant
- Boolean
La!
- Instance swap
= Text
La
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects o»
Curmard L


Presentations

appCategory: Photo & Video

appTagline: Video review and collaboration

companyHqRegion: US & Canada

companyStage: Public & Mature

platform: web

pageType: Application

hotspotType: Click

screenElements:
Stacked List
Divider
Thumbnail

pageType: Application Application

allAppCategories:
Collaboration
Photo & Video

screenKeywords:
Jane's Account + Jump to project or file... 6 days left  Upgrade 2 V2 ?
Qs | Tl + 00 EE
v dEmEs e + Media Review Links Presentations C2C Connections Date created v ee*
Demo Project
Name Date created | Created by Lod Active Link
Traveling a8
EPB. all videos Today, 12:18pm Jane D [0] . f.io/2zoLVACI copy E
’ plane.mp4 Today, 11:46am Jane D 0 [ ] f.io/BRKOB9yB  copy H
|Jane's Account + Jump to project or file... 6 days left  Upgrade 2 V2 ?
h 3
Q s 5 Tavelng : 00 () -
v Jane's Team + Media REVEWARS Presentations C2C Connections 3items, 49.66 MB  Custom v = eee
Demo Project
Traveling [ = 1 352 A =)
S ar A o lo Wla —
* . & M T
— e Wt e N e < ey,
i ” [ :“? j e I
1 e E. % - v: 4
1 :02 1 L T ;. 00:1 m
4 R [P R e 99__:3 ]
bridge.mp4 changi.mp4 flying.mp4
Jane D - Today, 11:16am ®2 Jane D - Today, 11:16am Jane D - Today, 11:16am


Author detail

pageType: Marketing

hotspotType: Scroll Vertically

pagePatterns:
Blog Page
Blog Page
Blog Post

pageType: Marketing Marketing Marketing

screenKeywords:
))i- frameio insider
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,C)
Shares
f Contributing Author
< Lisa McNam
ISa IVICINamara
G+
) Lisa McNamara is Frame.io's senior content writer and a frequent
contributor to The Frame.io Insider. She has worked in film and video post-
production approximately since dinosaurs roamed the planet.
More Posts From Lisa °
= 29 v = % -
[ [ ) S U
|))i- frameio insider jo
More Posts From Lisa
B 2 f > & B -
P ' 1 3 g ‘
| & Al [ % a W -
§| { “ ; i
sh = g } l ‘ﬁ Wil o ?bﬁ
ares VR~ a vy | A . J ey |
— i | | 3 v
I et » e
f ey TS s ‘ ' - A ¥ =
P - / " ‘ ¥ A g \ ) >
He " 7 : e, '
v o )4 ,é A
G+ | Behind The Scenes, Interviews 25 MIN | Made In Frame 18 MIN READ | Made In Frame 17 MIN READ
READ
S Made in Frame: Made in Frame:
How Guillerm | . .
ow Guillermo de Artemis 1 Goes to the "Devotion” Takes to
Toro's Anim r
oros ators Moon and Back the Cloud
Brought Pinocchio to
December 12, 2022 November 28, 2022
Life, One Frame at a
Time
December 19, 2022
|))i- frameio insider
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,O
A = DR B S, e
f . SRR 00 ~‘:T-é: é?i\‘.' \ »’( o \;
y | -9 O Kaaw
LR e == PN A A
- 2\ PR
/%&, \ ./.— & = M‘Q w'”v s
|4 el K = == ) ZGer V. A
N .y \ﬁ)gs& : ( ‘ - 5 ;g_ »‘;}Z‘:’Z%"' i ‘\ ;&ﬁ" "
- \ L \- f R b
g S TR T, ] /s ==
| Behind The Scenes, Interviews 13 MIN READ January 13, 2020
How Parasite Uses Brilliant Design and Invisible VFX to Transcend
Lang uage . a‘;
@ Lisa McNamara '**"“*5"


Watching a video

screenElements:
Full-Screen Overlay
Progress Indicator

screenElements:
Animation & Video
Loading Indicator
Full-Screen Overlay
Progress Indicator

screenPatterns:
Loading
Video Player

screenKeywords:
For years, video teams have used a patchwork of tools for
collaboration, dailies delivery, work in‘progress reviews, file
transfers, and approvals. Frame.io brings everything —and

everyone — together in one place.
f ° WaIch the Video _— |
|Il 0:00/2:15 Eh) i H
|X
p \
' |
’ ‘ —-—
| X .
5
Il 0:08/2:15 O o H


Publishing file to Community

actions:
Publishing
Uploading & Downloading

appName: Figma

appCategory: Graphics & Design

appTagline: The collaborative interface design tool

screenPatterns:
Share
Invite Teammates

screenElements: Thumbnail Button Link

screenElements:
Dialog
File Upload

hotspotType: Keyboard Input

screenElements:
Text Field
Toolbar
Link
Button

screenElements: Illustration Button

screenElements:
Text Field
Toolbar
Link
Button
File Upload
Dialog
File Upload
Thumbnail
Button
Link
Link
Text Field
Dialog
Text Field
Button
Stacked List
Avatar
Link
Tab
Illustration
Button
Toolbar

screenPatterns:
Publish
Upload & Download
Publish
Publish
Acknowledgement & Success
Publish
Share
Invite Teammates
Publish
Edit

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

allAppCategories:
Collaboration
Graphics & Design

screenKeywords:
Publish file X
=~ John

Name Contacts App
Description Describe your work

B I & Hi == & O ]
Tags 0 Add up to 12 tags, separated by commas or tabs
Preview as ® File QO Prototype
Support contact jsmith.mobbin@gmail.com
Creator(s) o John

Add up to 10 additional creators
Comments Allow comments from Community members

More options »
. Creative Commons BY 4.0  View license
License
PUbIISh
|Publish file X
Delete thumbnail
Thumbnail size: 1920x960 (1600x960 safe area)
Contacts |
; Name i ‘, Lood John
B rame ® - ™
o Contacts App Qo [70
John
Name * Contacts App
Description Describe your work
B I & Hi == & O ]
Tags 0 Add up to 12 tags, separated by commas or tabs
Preview as ® File QO Prototype
m
|Publish file X
Upload custom thumbnail
Thumbnail size: 1920x960 (1600x960 safe area)
2
o Contacts App Qo [70

John
Name Contacts App
Description Describe your work

B I & Hi == & O ]
Tags 0 Add up to 12 tags, separated by commas or tabs
Preview as ® File QO Prototype
PUbIISh
|o - Community Q Publish Jal J) v
Contacts App
< Getacopy O
0 By John
Contacts
|
| | g
| |
} Q Name 1 Q Name John
| I
1 : Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name } adipiscing bibendum.
i i
-« ____]
0
Contacts app concept Tags
contacts
More like this sh 0
are
Y it D O ) N
|By Iy &Y O & T 8 M O Team project / Contacts App v (Hh @ Share P > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home
#* Background
Frame 1
. FSF5FS 100% ®
Invite iblish mmunit
Contacts
Rectangle 1 Local styles aF
Export +
7 Publi ersion of t le to the Community for the puk
to duplicate and remi:
|Congratulations!
Your file will soon be available for everyone in the Community
to duplicate, remix, and share. Thanks for your contribution.
You rock.
Help people discover your file:
¢ ¥ R
Review our
|Publish file X
=~ John

Name Contacts App
Description Contacts app concept

B I & Hi == & O ]
Tags 0 Add up to 12 tags, separated by commas or tabs
Preview as ® File QO Prototype
Support contact jsmith.mobbin@gmail.com
Creator(s) o John

Add up to 10 additional creators
Comments Allow comments from Community members

More options »
. Creative Commons BY 4.0  View license
License
PUbIISh
|Publish file X
=~ John

Name Contacts App
Description Contacts app concept

B I & Hi = :i= & ¢ ¢]
Tags ‘
Preview as ® File QO Prototype
Support contact jsmith.mobbin@gmail.com
Creator(s) o John

Add up to 10 additional creators
Comments Allow comments from Community members

More options »
. Creative Commons BY 4.0  View license
License
PUbIISh
|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
|Publish file X
=~ John

Name Contacts App
Description Contacts app concept

B I & Hi = :i= & ¢ ¢]
Tags '
Preview as ® File QO Prototype
Support contact jsmith.mobbin@gmail.com
Creator(s) o John

Add up to 10 additional creators
Comments Allow comments from Community members

More options »
. Creative Commons BY 4.0  View license
License
PUbIISh
|Connect or create a public
Community profile to publish

Currently, you don't have a personal Community profile
associated with a different Figma account. If you do, connect
it now and publish to your existing profile without having to
switch accounts.

If you don’t have an existing Community profile, you can
create one now.
|Publish file X
=~ John

Name Contacts App

B I & Hi == & O 2]
Tags 0 Add up to 12 tags, separated by commas or tabs
Preview as ® File QO Prototype
Support contact jsmith.mobbin@gmail.com
Creator(s) o John

Add up to 10 additional creators
Comments Allow comments from Community members

More options »
. Creative Commons BY 4.0  View license
License
PUbIISh


Renaming presentation

screenElements:
Tab
Dialog
Side Navigation
Animation & Video

screenPatterns: Edit Share Share

pageType: Application Application Application

screenKeywords:
Share 3 items < root x
Sharing  Layout  Settings = Watermark _—
Link access : "
L
fio/2zoLVACI @ &  Public v { '
Invite by email = _
Enter name or email address ' ' 4
5 B o) = % B e '/‘_’;’t:;ba:—’lf
T e
] | L =
: s £ Hm T
= = i | ;VL e
b e c iii g
e=memmies) B
:':—ﬁ"l‘, (545:.-1!“4 / a8 =
= == e
=t "” . L
bridge
e wils NNNS\S O Qw7 2 =
SR, e RN RSN 777 [_/4 c< e 7
L e BN e
|Share 3 items < all videos x
all videos 3 items
Sharing  Layout  Settings = Watermark _—
Link access : "
L
f.io/2zoLVACI @ &  Public v 1 .
Invite by email = _
Enter name or email address ' : y
, .y,
Biiuaind ol it nte n N o U [—
¢ PO ﬂ : ﬁ % @it il e _’;f'il;m..*v b
R
] | L =
k s £ Hm e
= - l-* B ‘L e
SEEEERE s
gttt F.| T
'—.—“’;’ﬁ"n—t (5-15'"":“4 //o *P =
= == e
=t "” . ¢
bridge
e wils NNNS\S O Swms 7/ 2 =
pat ?‘?&‘{f,$§§\§:§§$i‘§ﬂmn%?}%%‘%§ﬁ@@
SRR NS 4 AR SN i o eeseate 7
% A BRSNS e
|Share 3 items < root x
root 3 items
Sharing  Layout  Settings = Watermark _—
Link access : .
L
f.io/2z0LVACI @ &  Public v [ '
Invite by email = _
Enter name or email address ' : y
5 B o) = % B e '/‘_’;’t:;ba:—’lf
T e
] | L =
: s £ Hm T
= = i | ;VL e
b e c ii‘ g
e=memmies) B
:':—ﬁ"l‘, (545:.-1!“4 / a8 =
= == e
=t "” . L
bridge
e wils NNNS\S O Qw7 2 =
SRR NS 4 AR RSN 777 [_/4 < 2
L e BN e


Customers

pagePatterns:
Landing Page
Hero Section

screenElements:
Grid List
Photo

screenElements: Photo Carousel

screenElements:
Grid List
Photo
Top Navigation Bar
Button
Logo
Text Field
Photo
Carousel
Photo
Carousel
Photo

pagePatterns:
Testimonials & Customer Stories Page
Landing Page
Hero Section
Testimonials & Customer Stories Page
Content Section
Stats Section
Testimonials & Customer Stories Page
Testimonials & Customer Stories Page
Testimonials & Customer Stories Page
Social Proof (Testimonial) Section
Testimonials & Customer Stories Page
Header Section

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
’ - ‘
=Y W
> B
-
>~ - v
' \
| - 7 \\
] ' ? ’
L >
5]
Frame.io helped V/SPEED show how up close Sandwich uses Frame.io C2C as the special
and personal they got with a tornado. sauce in their end-to-end workflow.
Their Story - Their Story -
2 oV 0 N =Y
A “,* o i
\f‘l N} !" ' 1 > .9 - ‘ “ |
\ L Ry g ® ( 7 7| ‘.
P W - TSR L pl S SA \ \
|))'o Product Integrations v Enterprise Customers Camera to Cloud Pricing SignIn - h‘
.d I I b t.
OI ViAdeo Collaporation.
Frame.io is one central hub that lets you share media, track
feedback, and streamline your workflow so your team can
work closely together from anywhere in the world.
Enter Your Email
{  VSPEED-Trailer-v3.mp4  v3~ -, ® NeedsReview v «ee - s 4 ?
! . Alex uploaded 5d ago
Revised edit - latest feedback has been addressed on
|Better workflow. No matter
hat th Ki
what the workK Is.
Faster post-production. Shorter review cycles. Better collaboration. Content
creators of all stripes use Frame.io to take their work to the next level.
r‘ "‘ﬁ‘{" W#‘ . N
" ..31—: .;.f:' . {f‘ vi
.‘.- - - ’ -
: . R by e
B =N -
‘ _ o News & Media
.o o L e i
\ : VICE made
- reviews 70%
/ | faster.
4 f ... Al transcription tools connected to the
Frame.io API drove massive gains in
productivity at VICE Media.
L‘ - ‘ —
|' B
Branded Content g
YETI brought |
continents & ‘
closer w
together.
|Video results you o/
can see. And measure. O
Frame.io delivers significant
business value including post-
production that’s 26 percent faster )
according to the 2020 IDC return on investment after
Business Value Report. 8years
return on investment after
3 months
|K. e s
.‘ ( ‘-"‘.
U T‘f’ :‘ ﬂ' News & Media
- d VICE made
A reviews 70%
4 ‘e / . faster.
| VN D O ety
| L A A “ produétivity at VICE Media.
- 7 Their Story =
|r;——;-:.z‘ 5
| P e R 2
- R e e R - _—
e A P o =
. ,‘%jé}‘;‘ = b 3 ""’y‘: "f S - M ‘r“’.\"\(-
o"?"..,, B j"“.'-"' e =5 - A - e R - - S
S g e »- 2" e _ s~ . A e 'f = = o a—a = |
Capwe > ¢ = - - 0 g - ‘-..» 2 . - » 5
? B g TR i A "‘0 ""‘ﬁpg
S e o .
- R e fas R
p— P 4 ‘\ .y;'z,: ,_». -~ “:;_'_' ,_\ = "‘QV&W g - e
4 N - g i~ Tk G ST, T . P o SN
L e ) ey v B0 G N X SN > %: iy,
— Y P e S T S S
ETI1 e, — 2 . q,. T e RN B 2 0y, i~ X
TRy e S 1 S
“Thei : \K’" RN e - SR S
v ™~ oy q oy 347 8 SAS T i S TR o A N % = ’
elmpa ' . -"‘;'_"'.,-‘;fﬁ“~ e e =08 o e . <
. - = T S { 2ok D i, T N
N time O Y 'I}._\Io ’3"_,.5?'-3.-;:'!";';3%‘—."‘« oL £l i = o R R e e ‘/ >
. u T ST BN A “c,.b-- ;l..-«.;'k‘.“{"‘ o .«;' ‘\i" n o > "%N | \\ \
oy > USCO Y BB e e AL R R . SN g ™ ‘ -
aun f e R D Seein PSS ) - Y ~ :.
I Ied W = H e ."i*"‘j.i»_,-,v‘:",‘ "?l N ™ -~ R X« R .
ay Y/-Ye [ " Nt CVIC L= ~N ) o = - >
ay we didil gy Y et ICWS IN T . -5
years ago » " S Y slaks ? \Fg e ’:_‘.k 50 PR - ~ ‘
: % ':.;-"Y . S i A p‘é: N: S ‘
- <Ay “ ol b 2. fele - Oy St " (=" 4
A . P : *"\:"‘-%’ S~ \“&nw %;_ o : ;
rlo Rosner — Senior Produc: 7."%\ 2 9 k:\ A 4 {. . N . % N ‘7‘,:;'
er, YETI 5% e ) ¥ T s o~ 5y 3 >k W, R “‘&'ﬁ"—k
- pes S A P g A
4 SR N T A NN P S YO LR SN
oo N A Y P T ol ;
A od 9 ) 3 ?i‘\ . b > .
|THEGREENKNIGHT

“Whether I'm in New York or London or
Ireland, the way we’ve set up Adobe
Premiere to function between us, we're able
to deal with the same footage in real time,
and Frame.io was a big part of that.”
David Lowery — Director, The Green Knight
|),'o Product Integrations v Enterprise Customers Camera to Cloud Pricing Sign In - h‘
P& &SN - . . M ST : iz
55 i \f . 5 = =Y ﬂ,.];g;\ e = e
25 Toemateee N W R S PR R e
T EELC T §‘ S 'i S i B - g ) o
.ﬁ A :-"ifzi'f’r";;gp,_ B - ~ ‘.dw5 . )
R R TR, N \ , .
Y kil s, AR o 8 \i
% N j?‘\ﬁ SR (i) '
LPPE | Ny NN c
o TG —— } -~ -
s P Y ;;;:M’é S
ey —;4.1,,.*‘“‘ - Swas SR
ol 5 NEN P e 2 !‘“
b -
| Q*W
- "7 7“7 COI Iabo rate ‘ ‘ ‘ ‘
3 . ’
i See how brands, agencies, and production teams worldwide
‘ use Frame.io to accelerate their workflow and empower ‘|
F —— collaboration. L L
v ; < ;‘ (_
[ ‘
l )" | ‘\\ [
L‘ e s Nt
‘ 3 o
.~ M LI


Sorting notifications

screenElements:
Select
Popover
Thumbnail
Stacked List
Avatar
Badge
Status Dot

screenPatterns:
Filter & Sort
Notifications
Filter & Sort

screenKeywords:
Jane's Account 6daysleft Upgrade & @ # ?
Notifications All v (@)
©\ Eearidh J Traveling v
All v
their team, Jane's
Media Unread cee
Demo Project T
- N NSNS .
Traveling [} U u W IR Anna replied on
1 z T s ___‘.Eiln-‘s ﬁ = bridge.mp4 e’
I’ P", = » | -"‘V : ¥ Yo E ) - "me too!"
: g A 00:02 = & ‘.'*' A I.&f T00113 ¢ [ : 00:21 Traveling - 23min
— PRI . ot A -
bridge.mp4 changi.mp4 flying.mp4
|Jane's Account 6daysleft Upgrade & ?
y: P9
Notifications All v (@)
©\ Eearidh J  Traveling v
J Jane Doe added you to their team, Jane's
Media Team. s
Demo Project Jane's Team - Just now
Traveling (] ' . W R Anna replied on
i g TEb e fi. ___sgiln-‘s ﬁ o bridge.mp4 i
I’P", - - -"‘ : ¥ YoF e 2 "me too!"
. 00:02 = & \—'*' S I.&f T00:13 ¢ e - 00:21 Traveling - 23min
. {3 Lk 1T J <~ & NN
bridge.mp4 changi.mp4 flying.mp4
|Jane's Account 6daysleft Upgrade = & ?
y P9
Notifications Unread v ©®
Q Search J  Traveling v
December 30th 2022
Media cee
. J Jane Doe added you to their team, Jane's
Demo Project R — Teamy
SNV TX [/ Pl T
. l g Q } N ',:’,/; 73:7}1 [ Jane's Team - Just now
Traveling ] U . oo R
3 A Eh ¢ ‘:_7"' : PR ,-,,
l T o B s W‘
| SRS s
LY [Ty > o v &2
= "% i 00:02 / P gl 00:13 - 00:21
. R ~*’»’M' <t I - -
bridge.mp4 changi.mp4 flying.mp4


Copying invite link

actions:
Copying & Duplicating
Inviting Teammates & Friends

screenKeywords:
Project members fio/3m28zrqm (D)
J johndoe.mobbin@gmail.com
Add a message
> 1 person in this project
|Copied to clipboard!
. https://f.io/3m28zrqm
Project members fio/3m28zrqm (D)
Invite by email or search for name
Add a message
> 1 person in this project


Changing account logo

hotspotType: Hover

screenElements:
Tooltip
File Upload

screenElements:
Loading Indicator
Tooltip
File Upload

screenPatterns:
Loading
Upload & Download

pageType: Application Application Application Application Application

screenKeywords:
. i 2
)l' frameio v jdoe.mobbin@gmail.com :
Back to App Branding
Account name
JDTeam 2
Account Settings
Account logo
Users & Teams
Groups
Branding
Billing Selected team
Jane'sTeam ¢
Email / Password Team name
Profile Jane'sTeam
Notifications Team logo
This will appear in Presentation pages and in your project dashboard.
Apps & Integrations
Connected Apps
Tokens
Branded email notifications
Actions . . . P . ; .
Add your logo and choose colors that will appear in all email notifications regarding your team’s projects.
Apps Accent color
I L Y T
|. i 2
)I' frameio v jdoe.mobbin@gmail.com :
Back to App Branding
Account name
JDTeam 2
Account Settings
Account logo
Users & Teams
Groups
Branding
Billing Selected team
Jane'sTeam ¢
Email / Password Team name
Profile Jane'sTeam
Notifications Team logo
This will appear in Presentation pages and in your project dashboard.
Apps & Integrations
Connected Apps
Tokens
Branded email notifications
Actions . . . P . ; .
Add your logo and choose colors that will appear in all email notifications regarding your team’s projects.
Apps Accent color
I L Y T
|. i . . . ?
)l' frameio v jdoe.mobbin@gmail.com
Back to App Branding
Account name
INTacan [ A
Account Settings Upload an image
Au autioyu
Users & Teams
Groups
Branding
Billing Selected team
Jane'sTeam ¢
Email / Password Team name
Profile Jane'sTeam
Notifications Team logo
This will appear in Presentation pages and in your project dashboard.
Apps & Integrations
Connected Apps
Tokens
Branded email notifications
Actions . . . P . ; .
Add your logo and choose colors that will appear in all email notifications regarding your team’s projects.
Apps Accent color
I L Y T
|I frameio v . : . ?
)l jdoe.mobbin@gmail.com ) Image successfully uploaded
Back to App Branding
Account name
JDTeam 2
Account Settings
Account logo
Users & Teams ]
b .
Groups -~
Branding
Billing Selected team
Jane'sTeam ¢
Email / Password Team name
Profile Jane's Team 2/
Notifications Team logo
This will appear in Presentation pages and in your project dashboard.
Apps & Integrations
Connected Apps
Tokens
Branded email notifications
Actions . . . P . ; .
Add your logo and choose colors that will appear in all email notifications regarding your team’s projects.
Apps Accent color
o | Y T
|. i 2
)l' frameio v jdoe.mobbin@gmail.com :
Back to App Branding
Account name
JDTeam 2
Account Settings
Account logo
Users & Teams
Change
Groups
Branding
Billing Selected team
Jane'sTeam ¢
Email / Password Team name
Profile Jane'sTeam
Notifications Team logo
This will appear in Presentation pages and in your project dashboard.
Apps & Integrations
Connected Apps
Tokens
Branded email notifications
Actions . . . P . ; .
Add your logo and choose colors that will appear in all email notifications regarding your team’s projects.
Apps Accent color
I L Y T


Menu

screenPatterns:
Canvas
Multi-Column Layout

screenElements:
Dropdown Menu
Keyboard Key

screenElements:
Top Navigation Bar
Toolbar
Avatar
Button
Tab
Dropdown Menu
Keyboard Key

pageType: Application Application Application Application

screenKeywords:
g PPy v Oy © T 33 @ O Drafts / Untitled v J Share & > 100% v
Layers Assets Page 1 Design Prototype Inspect
Background
FSFSF5 100% ®
Local styles +
Export +
|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 >
|By > o Oy - T 3 M O Drafts / Untitled v J Share &P > 100% v
Back to files Design Prototype Inspect
Q  Quick actions... 8/ Background
File > FSFSFS 100% ®
Edit >
View N Local styles +
Object >
Text > Export +
Arrange 4
Vector 4
Plugins >
Widgets >
Preferences > ¥ Snap to geometry
Libraries ¥ Snap to objects
v Snap to pixel grid 88’
Get desktop app
Help and account > Keep tool selected after use
v Highlight layers on hover
v Rename duplicated layers
v Show dimensions on objects
v Hide canvas Ul during changes
v Substitute smart quotes
v Show Google Fonts
v Flip objects while resizing
Keyboard zooms into selection
Invert zoom direction
v Use number keys for opacity
Open links in desktop app
Theme 4
Keyboard layout...
Nudge amount...
|B v oY [y W~ T 34 @ D) Drafts / Untitled v J Share &P > 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 > Help page
Keyboard shortcuts ~?
Support forum
Video tutorials
Release notes
Open font settings
Legal summary
Account settings
Log out


Deleting account

screenElements:
Dialog
Text Field

screenElements:
Text Field
Button

screenElements:
Text Field
Button
Text Field
Dialog
Text Field
Text Field
Button

screenPatterns:
My Account & Profile
Confirmation
Delete & Deactivate Account
Delete & Deactivate Account
Delete & Deactivate Account
Confirmation
Acknowledgement & Success
Delete & Deactivate Account

pageType: Application Application Application Application Application Application

screenKeywords:
Account  Community Notifications Plugins X
Local fonts are enabled. You have 1058 fonts available in Figma.
To disable local fonts, follow the uninstall steps in the help article
Library
Enable libraries for all files in your drafts
Personal access tokens
Personal access tokens allow you to access your own data via the API. Do not
give out your personal access tokens to anybody who you don't want to access
your files.
Create a new personal access token:
Add a token description
Connected apps
The following apps have been given permission to access your Figma files on
your behalf. If you see any apps you're not expecting here, remove their
permissions below.
You don't have any connected apps.
Account
Delete account
|Delete account X
Are you sure you want to delete your Figma account? Deleting
your jdoe.mobbin@gmail.com account will delete all your
associated data such as your files, components and images,
including content you have shared with others. You cannot undo
this operation.
To confirm, please type "delete my account” below.

delete my account
|Delete account X
For security purposes, please re-enter your password below.
|Delete account X
For security purposes, please re-enter your password below.
Current password
|Delete account X
Are you sure you want to delete your Figma account? Deleting
your jdoe.mobbin@gmail.com account will delete all your
associated data such as your files, components and images,
including content you have shared with others. You cannot undo
this operation.

To confirm, please type "delete my account” below.
|Jane "
B o e @ M Q @) Explore Community Jal J) v
(® Recents Recently viewed
[N Drafts
New design file + New FigJam file + K7 Import file
Design and prototype Whiteboard and diagram Bring in files from other tools
files fi
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
= e -
A " Daily Team ' = .f
Favorite files Dlagram — sync meeting - - ) r
, . basics in agenda - . = = s sonsoues [ s rees
J -
Hover over any file and click the star to Fi J m = = = '
add it here g C E—— o .
—, o
Teams Diagram basics in FigJam Delete account User persona Empathy map
Account deletion is in progress and may take a few moments. You
will be redirected once deletion is complete.
-+ Create new team All files v Last viewed v e =
o)
\N® A S
Contacts ‘ . -
®- - v d e
® - N I e = e pme — S
g oma O E BE=EanEiEE B
. 309 o N
: ; . ﬁ
fa . - - ]
Contacts App FigJam Basics Figma Basics
Edited 24 minutes ago In Drafts - Edited 4 hours ago In Drafts - Edited 4 hours ago


Muting a video

screenKeywords:
Share 3 items : b & =i - et T — e Rl g /
i, Y 4 Ve g e AL R 4
2 . = - B J I A \ S N ‘: S r R . « £
=27 e i 72 ALY "f;"%‘. : fi P ‘& e 3y R | - —f 7l
Sharing + changi
Link access
% Public v
/ =
Invite by email e >
R = iy
Enter name or email address I — = _
- < /
i 0.6x  4) 00:19/00:21 v 1080p"> %2
flying
|- SN . 7ot TR - Igf_\ﬂ‘.\_// L ZR Sy SN < 2 \
Share 3 items ' ) . P i AR TR - 3
; b - & A \/ k e‘ ‘,‘7 :‘j__ = - L R A X - ‘vk » [
Sharing  Layout  Settings ~ Watermark '~ changi
Link access
f.io/2zoLVACI %4 Public v
Invite by email . . . 4_
nvite by emai //
/ ’
Enter name or email address —= = = -~
Mute [M]
1] 0.6x o) e————g 00:20 1080pH> 52
flying
|Share 3 items . | - % =il AR R Gl . Ew
root P = <4 "', Z “;’2: 3 f ';?M. N TS : y \-':""" = R
27 e A e e A SRS 3, S P i \
Sharing  Layout  Settings ~ Watermark '~ changi
Link access
f.io/2zoLVACI @ &  Public v
e = = /-
= ] // ,'
Enter name or email address — = = s
1] 0.6x N 00:05 1080p> 52
flying


Pricing

pagePatterns:
Pricing Page
Pricing Section

screenElements:
Card
Button
Link
Segmented Control

screenElements: Table Button

pagePatterns:
Pricing Page
FAQ Section

screenElements:
Top Navigation Bar
Logo
Button
Animation & Video
Card
Button
Link
Segmented Control
Segmented Control
Table
Button
Tooltip
Accordion
Banner
Accordion

pagePatterns:
Pricing Page
Pricing Section
Landing Page
Hero Section
Pricing Page
Pricing Section
Pricing Page
Pricing Section
Pricing Page
Social Proof (Logo Cloud) Section
Pricing Page
FAQ Section
Pricing Page
Pricing Section
Pricing Page
Pricing Section
FAQ Section

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Figma for design + prototyping FigJam for whiteboarding
Prici
r .
Starter Figma Professional Figma Organization
Free $12 per editor/month $45 per editor/month
Forever Billed annually or$15 Annual billing only
month-to-month
3 Figma and 3 FigJam files Everything in Professional, plus...
Unlimited personal files Unlimited Figma files Org-wide libraries
Unlimited collaborators Unlimited version history Design system analytics
Plugins, widgets, and Sharing permissions Branching and merging
templates Shared and private projects Centralized file management
Mobile app Team libraries Unified admin and billing
Audio conversations Private plugins and widgets
Single sign-on
|’ Products v Enterprise v Pricing Community v Company v @ English v Login
Nothi ti
@2& alone.
Figma connects everyone in the design process
so teams can deliver better products, faster.
o
? 0 EED =@ "t O % TOD Design (X0
Layers Desigr
. Headline
lay For you Albums C ———— Color.
| ® "
«+ Slider | @ @ W
Radio y I : .
2 AR Y
|Figma for design + prototyping FigJam for whiteboarding
Prici
r .
Starter Figma Professional Figma Organization
Free $12 per editor/month $45 per editor/month
Forever Billed annually or$15 Annual billing only
month-to-month
3 Figma and 3 FigJam files Everything in Professional, plus...
Unlimited personal files Unlimited Figma files Org-wide libraries
Unlimited collaborators Unlimited version history Design system analytics
Plugins, widgets, and Sharing permissions Branching and merging
templates Shared and private projects Centralized file management
Mobile app Team libraries Unified admin and billing
Audio conversations Private plugins and widgets
Single sign-on
Choose Starter Choose Professional Choose Organization
Free for students and educators Contact sales
(S
|Figma for design + prototyping Figdam for whiteboarding
Prici
r .
Starter FigJam Professional FigJam Organization
Free $3 per editor/month $5 per editor/month
Forever Billed annually or$5 month- Annual billing only
to-month
3 Figma and 3 FigJam files Everything in Professional, plus...
Unlimited personal files Unlimited FigJam files Org-wide libraries
Unlimited collaborators Open sessions Centralized content
Plugins and templates Sharing permissions management
Mobile app Team libraries Unified admin and billing
Music player Audio conversations Private plugins and widgets
Ready-made templates Voting Single sign-on
Choose Starter Choose Professional Choose Organization
Free for students and educators Contact sales
.\
|Figma for design + prototyping FigJam for whiteboarding
Compare features
Figma
Starter Figma Professional Organization Enterprise
Free $12 per editor/month $45 per editor/month $75 per editor/month

Design and

prototyping

Version history ©) 30 days \/ \/ \/

Figma Editor @ \/ \/ \/ \/
Advanced drawing

to0ls ® v v v v

Auto layout @ \/ \/ \/ \/

Styles ® v v v v

Plugins and widgets @ \/ \/ \/ \/
Unlimited file storage  (?) Ny 4 N4 N4 N4
|See more FAQs
Empowering innovative brands
sk L 4 zoom g @ O coinbase (@
2= 2 O
|Figma for design + prototyping FigJam for whiteboarding Get started
Compare features
Figma
Starter Figma Professional Organization Enterprise
Free $12 per editor/month $45 per editor/month $75 per editor/month
Select plan Select plan Select plan Select plan
H Figma auto-saves and creates versions
DeSIg of your file every 30 minutes. You can
name a version at any time and link to
prOtOt past versions.
Version history o 30 days \/ \/ \/
Figma Editor @ \/ \/ \/ \/
Advanced drawing
t00ls @ v v v v
Auto layout @ \/ \/ \/ \/
Styles © v v v v
Plugins and widgets @ \/ \/ \/ \/
Unlimited file storage ) N4 \/ \/ \/
|FAQs
> Where can | see a breakdown of my team editors and associated
costs?
> How can | adjust who has admin privileges?
> Canyou send me an invoice?
> What if more people are added to my team every month?
> Who is responsible for team payments?
> How do | cancel my paid plan?
> Do you have a discount for schools or classrooms?
|Figma for design + prototyping FigJam for whiteboarding
Figma
Starter Figma Professional Organization Enterprise
Free $12 per editor/month $45 per editor/month $75 per editor/month

Select plan Select plan Select plan Select plan

Video in prototypes &
e |gn’Ia videos

Community
Overlays @ \/ \/ \/ \/
Transitions @ \/ \/ \/ \/
Advanced animations @ \/ \/ \/ \/
Developer handoff @ \/ \/ \/ \/
PDF, PNG, JPG, SVG
export @ \/ \/ \/ \/
Collaboration
Multiplayer @ \/ \/ \/ \/
Unlimited viewers @ \/ \/ \/ \/
Shareable links @ \/ \/ \/ \/
|Figma for design + prototyping FigJam for whiteboarding Get started
Qingie sign-ori
Choose Starter Choose Professional Choose Organization
Free for students and educators Contact sales
r______________________________________________________________________________________________________________________

Enterprise $75 per Figma editor/month

$5 per Figdam editor/month
For advanced security and more flexible controls, the
Enterprise plan helps you scale design processes Annual billing only
company-wide.
Learn more Contact sales

Compare features
|FAQs

Vv Where can | see a breakdown of my team editors and associated
costs?
You can manage your team editors from the Admin Dashboard (accessible to team admins from the Team
Page). When you start the upgrade process, you'll be able to review your current editors and downgrade
people to viewers, so you only pay for the editors you want.

> How can | adjust who has admin privileges?

> Canyou send me an invoice?

> What if more people are added to my team every month?

> Who is responsible for team payments?

> How do | cancel my paid plan?


Developer

screenElements:
Search Bar
Top Navigation Bar

pagePatterns:
FAQ Section
API Docs & Developers Page

screenElements: Accordion Tab

screenElements:
Tab
Dropdown Menu
Search Bar
Top Navigation Bar
Accordion
Tab
Accordion

pagePatterns:
FAQ Section
API Docs & Developers Page
API Docs & Developers Page
FAQ Section
API Docs & Developers Page
API Docs & Developers Page
Feature Section
API Docs & Developers Page
Feature Section
API Docs & Developers Page
Contact Section
API Docs & Developers Page
Footer Section

screenKeywords:
)))r Frame.io DEVELOPER DEVELOPER TOOLS ¥ DOCS v COMMUNITY  SIGN OUT
LEARN MORE LEARN MORE LEARN MORE
Frequently Asked Questions
GENERAL API CAMERA TO CLOUD
How do | set up a Custom Action?
Who can use the Frame.io API?
How do Frame.io's API rate limits work?
My integration isn't working. What should | do?
FIRST NAME LAST NAME
|Frame.io DEVELOPER DEVELOPER TOOLS v COMMUNITY  SIGN OUT
Guides
API Reference
B R oy Changelogs
B N M?th
uild your own S\
- Wl T Neignal
p Cloud Device Setup Concel [
| ATES a device authorization grant sequence using ‘config'. Payload
| ires a device-unique "client_id", the Frame.io provided "client_secret"
Authorize this external device to a list of requested authorization "scopes”.
‘ integrate with this Frame.io project? I“h“io" elctes sR200) Meenyeinecirne
. | ‘device_code™ unique identifier provided by the server for this
Frame.io customers and partners can use our REST APIs B e S R
R user_code’: A small, unique code provided by the server for this
to create custom workflow solutions and app [ ) O ranand LA aner T S e e
integrations. The new Camera to Cloud devices API incomats "8 (000! (Svase batmean petting cycies.
enables you to embed the power of Frame.io in your o - t;b:?fyg":’::?:ii:;?"ii;s
hardware devices, extending the software tools and
65565504302 h:(}/oauth2/device". ( config['host"], config["port"] )
workflows that keep teams connected and working ond T
) conf?g‘ ent
together. Eratesh. o
L = ,p;sc( url, datas=| )
o R |
START BUILDING (3 —_—
C2C Device Int ti
Our reference implementations provide a fast and easy
way to get started connecting your device to Frame.io.
|Frame.io DEVELOPER DEVELOPER TOOLS v DOCS v COMMUNITY  SIGN OUT
. ]
uild your own
‘ Cloud Device Setup Concel [
‘ ATES a :ev}cerauthurifalt_iuntgr;a“nc‘ieq:er\w using 'co:fdigz:.lf’aytlna(l -
| Authorize this external device to R i e ) s e %
integrate with this Frame.io project? nitiation success (200), server returns:
. | ‘device_code™t unique identifier provided by the server for this

Frame.io customers and partners can use our REST APIs B e S R

R user_code’: A small, unique code provided by the server for this
to create custom workflow solutions and app o) =
integrations. The new Camera to Cloud devices API
enables you to embed the power of Frame.io in your AL » u,mmmon,m;%m:;gt:u e Ut ;a:‘:leze w/bew:egddedd';sgr,cade‘,
hardware devices, extending the software tools and

65565504302 h:(}/oauth2/device". ( config['host"], config['port"] )
workflows that keep teams connected and working ond T
) conf?g“ e ‘
together. etresn.to
= p:st( url, datas=| )
= error = .json()
START BUILDING (3 —_—
C2C Device Int ti
Our reference implementations provide a fast and easy
way to get started connecting your device to Frame.io.
|Frame.io DEVELOPER TOOLS v DOCS v COMMUNITY  SIGN OUT
LEARN MORE LEARN MORE LEARN MORE
Frequently Asked Questions
GENERAL API CAMERA TO CLOUD
I'm interested in becoming a Frame.io Camera to Cloud partner, how do | get %
started?
How does authorizing a hardware device work with Frame.io? <
Where do | see C2C Connections on my Frame.io iOS app? <
| am experiencing a problem that is not covered in the C2C Connections ‘
documentation. What should | do?
Where can | find an implementation guide? N .
|Frame.io DEVELOPER TOOLS v DOCS v COMMUNITY  SIGN OUT
Let the work flow.
Easy to implement, our API helps bridge the gap
between production and post.
Cloud Device API Workflow Automation Manage Projects and Teams

Use our implementation library to connect on-set Create event triggers to connect actions in Ensure every team member gets the right level of
hardware directly to Frame.io. Frame.io to external services, such as a new file access to your media when they need it.

upload or an asset approval.
LEARN MORE LEARN MORE LEARN MORE
|C2C Device Integration
Our reference implementations provide a fast and easy
way to get started connecting your device to Frame.io.
&) Managed Authorization
Client Identifier , Our Authorization APl implements the OAuth2 Device
N Authorization and Refresh Token Grant flows.
Device Code, User Code & Verification URI
Device Code & Client Identifier - Automatic ﬁle management
Device Client Access Token (& Optional Refresh Token) Media from your paired device is created within a Frame.io project
B and organized by date and device type.
Verfioatio &um =
erfication = Reference Implementation
Code samples walk you through each step of integrating your
device to our Cloud Platform.
End User Reviews Auth Request
End User Authorization
At Browser Server A
Upload Controls
The Cloud Devices APl supports pausing and resuming uploads
from the Frame.io Ul.
|Frame.io DEVELOPER TOOLS v DOCS v COMMUNITY  SIGN OUT
LEARN MORE LEARN MORE LEARN MORE
GENERAL API CAMERA TO CLOUD
I'm interested in becoming a Frame.io Camera to Cloud partner, how do | get 9
started?
Frame.io C2C Connections was created to give an easy way for users to authenticate on-set hardware or software devices directly to
Frame.io. Sign up below and we will schedule a call to walk you through our integration process.
How does authorizing a hardware device work with Frame.io? <
Where do | see C2C Connections on my Frame.io iOS app? <
| am experiencing a problem that is not covered in the C2C Connections ‘ .
documentation. What should | do?
|))1-- Frame.io DEVELOPER DEVELOPER TOOLS ¥ DOCS v COMMUNITY  SIGN OUT
What information is stored on a Cloud Device?
FIRST NAME LAST NAME
WORK EMAIL COMPANY NAME
|
Register to become a
A CURRENT INDUSTRY
oo S
developer.
HOW DO YOU PLAN TO USE OUR API?
Submit this form to start building Enter details here
with our Cloud Devices API.
|)))r Frame.io DEVELOPER DEVELOPER TOOLS ¥ DOCS v COMMUNITY  SIGN OUT
I
developer.
HOW DO YOU PLAN TO USE OUR API?
Submit this form to start building Enter details here
with our Cloud Devices API.
START BUILDING
Product Integrations Company Support
Enterprise Watch Folders Careers Support
Developers Final Cut Pro Blog Contact Us
Apps Premiere Pro Press Status Page
Pricing After Effects Swag Store
Customers DaVinci Resolve
Security Slack
Transfer Zapier
HDR
© 2021 Adobe. Allrights reserved. Terms Privacy Fra me.lo
An Adobe Company .


Adding to version history

screenElements:
Dialog
Text Field
Text Field
Button

screenElements:
Text Field
Text Field
Button

screenElements:
Accordion
Top Navigation Bar
Dialog
Text Field
Text Field
Button
Text Field
Text Field
Button

screenPatterns:
Timeline & History
Select
Add & Create
Add & Create

screenKeywords:
8 - Y Fbone Drafts / Contacts App v  View only J Share | > 70% v
Page 1 Version history ® + x
«» Contact item
o Vi1
H Home Minor redesign to Contact item
component
. John
© 7 autosave versions »
End of 30-day version history.
ContaCts Unlimited version history is available to
+» Contact item paid teams.
|
| |
| | Learn more
} Name } Name
| g | 2
| |
- ]
Q Name
v
|8 - Y Fbone Drafts / Contacts App v  View only J Share | > 70% v
Page 1 Version history ® + x
H# Home Press 3 +\_+$ toadd to version
history while editing.
o Current version
© 8 autosave versions v
10:19 AM
. John
9:42 AM
. John
Name
9:09 AM
. John
@ Name 8:34 AM
. John
Dec 20, 4:46 PM
. John
Dec 20, 412 PM
. John
Dec 20, 3:41 PM
. John
o Dec 20, 3:07 PM
. John
End of 30-day version history.
Unlimited version history is available to
paid teams.
Learn more 0
|Add to version history X
Title
Describe what changed
|Add to version history X
AN
Minor redesign to Contact item component


Editing profile picture

screenElements: Dialog Avatar Tab

hotspotType: Slide

screenElements: Dialog Avatar Slider Button

screenPatterns:
Upload & Download
Media Editor

screenElements: Slider Dialog Avatar Slider Button Dialog Avatar Tab

screenPatterns:
Media Editor
Upload & Download
Media Editor
My Account & Profile

screenKeywords:
John "
3 jsmith.mobbin@gmail.com M Q @) Explore Community a @ v
(@ Recents Drafts Deleted
[N Drafts
New design file + New FigJam file + K7 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 X
[ [Faom 8, | | = o= =
: = : | 2 | 'm | [ ==
Favorite files Dlagram — | Sync 3 ’ 3 - ‘:_" - )
. e basics in P : 4 l = |, =
over over any file and clic e star to . A ﬁ
e e Figlam = BEERE: f {; e 3 —— " [ |
S | , ﬁ [ . @409 %
| b § E) |
Teams Diagram basics in FigJam Daily Sy ‘ k : ia User persona Empathy map
> i o) |
A e e ﬁ\i
{ . 1o
Team project § M“‘Ei‘%“ “L,% e
Al files v w1l v Last modified v =
-+  Create new team
*
L
o
& C I - o
0 amS
‘Tt B
E99
© ‘? ‘
- - -
jose-alejandro-cuffia-k1ILNP6dnyAE-unsplash Contacts App FigJam Basics
Edited 2 days ago Edited 2 days ago Edited 2 days ago
. Download desktop app X G
|John "
3 jsmith.mobbin@gmail.com M Q @) Explore Community a @ v
(@ Recents Drafts Deleted
[N Drafts
New design file + New FigJam file + K7 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 X
[ [Faom 8, | | = o= =
A o i e Q N 1 / . -
Favorite files Dlagram — | Sync ’ 3 - ‘:_" - )
. e basics in P : 4 l = |, =
over over any file and clic e star to . N ﬁ
add it here Figlam = DR _ A e N B " [ |
Lo | ﬁ . 444 B
| 3 & - z
Teams Diagram basics in FigJam Daily Sy \ 1 ) ia User persona Empathy map
s O (N
Acme A ":-;""j I::
A # ERT
Team project N ; "E: L% —
Al files v i3l G Last modified v =
-+  Create new team
- | +
*
- 2
o
g oms
‘Tt B
E09
- ‘? ‘
- - -
jose-alejandro-cuffia-k1ILNP6dnyAE-unsplash Contacts App FigJam Basics
Edited 2 days ago Edited 2 days ago Edited 2 days ago
. Download desktop app X G
|Account  Community Notifications Plugins X

Name

(9 John
Change name

- £', } ’

N Email

Edit

' jsmith.mobbin@gmail.com

Change email
Password
Change password
Enable two-factor authentication
Upgrade Figma plan
Upgrade plan for unlimited design files in teams.
Language
English
Change languages
Theme
|Account  Community Notifications Plugins X
Name
John
Change name
Email
Edit

' jsmith.mobbin@gmail.com
Change email
Password
Change password
Enable two-factor authentication
Upgrade Figma plan
Upgrade plan for unlimited design files in teams.
Language
English
Change languages
Theme


Terms

pagePatterns:
Footer Section
Landing Page

screenElements: Link Logo

pagePatterns:
Terms & Privacy Page
Footer Section
Landing Page
Terms & Privacy Page

screenKeywords:
Through the Applications, you may purchase ("In App Purchase") certain

goods designed to enhance the performance of the Services (" Goods").

When you purchase Goods, you are doing so through either Apple iTunes

service or the Google Play service and you are agreeing to their respective

Terms and Conditions. (
http://www.apple.com/legal/internet-services/itunes/us/terms.html ;
http://play.google.com/intl/en_us/about/play-terms.html ). We are not a

party to any In App Purchase.

Payments and Billing

- Paid Services. Certain of our Services may be subject to payments now
or in the future (the "Paid Services"). Please note that any payment
terms presented to you in the process of using or signing up for a Paid
Service are deemed part of this Agreement.

» Taxes and Third-Party Fees. You must pay any applicable taxes and
third-party fees (including, for example, telephone toll charges, mobile
carrier fees, ISP charges, data plan charges, credit card fees, VAT,
foreign exchange fees, and foreign transaction fees). We are not
responsible for these fees. Contact your financial institution with
questions about fees. We may take steps to collect the fees you owe us.
You are responsible for all related collection costs and expenses. If you
are located in a different country from the applicable Frame.io entity
with which you are transacting, your payments will be made to a foreign
entity.

« Billing. We use a third-party payment processor, Stripe, (the " Payment
Processor") to bill you through a payment account linked to vour
|- T R u - N - —,vvv,v - - - E T WS S s R =~ S e
| me.i
collaborate on Frame.io.
o - Enter your email Start Free Trial
))l' framejo Overview Integrations Company Support
Enterprise Premiere Pro & After ~ Careers Support
. Effects
Pricing Blog Status Page
Final Cut Pro
Customers Contact Us
DaVinci Resolve
Camera to Cloud
Avid Media
Transfer
Composer
"‘ © 2022 Adobe Inc. All rights reserved. Terms  Privacy [ > ] 0 o
|))'o Product Integrations v Enterprise Customers Camera to Cloud Pricing Sign In - h‘
F . T f
rame.io 1erms o
S .
Published and Effective as of October 17,2022
THE MANDATORY ARBITRATION PROVISION AND CLASS ACTION
WAIVER (DISPUTE RESOLUTION; ARBITRATION AGREEMENT; CLASS
ACTION WAIVER) BELOW GOVERN THE RESOLUTION OF DISPUTES.
PLEASE READ THEM CAREFULLY. IF YOU DO NOT AGREE WITH THE
DISPUTE RESOLUTION; ARBITRATION AGREEMENT; CLASS ACTION
WAIVER IN THESE TERMS OF SERVICE, PLEASE DO NOT USE THE
SERVICES..
PLEASE READ THESE TERMS OF SERVICE (COLLECTIVELY WITH
FRAME.IO'S PRIVACY POLICY, THE "TERMS OF SERVICE") FULLY AND
CAREFULLY BEFORE USING WWW.FRAME.IO (THE "SITE"), ANY MOBILE
APPLICATIONS PROVIDED BY FRAME.IO (THE "APPLICATIONS") AND
THE MEDIA FILE STORAGE AND COLLABORATION SERVICES,
FEATURES, CONTENT OR APPLICATIONS OFFERED BY FRAME.IO, INC.
("ERAME.IQ," "WE," "US," OR "OUR") (TOGETHER WITH THE SITE AND THE
APPLICATIONS, THE "SERVICES"). THESE TERMS OF SERVICE SET
FORTH THE LEGALLY BINDING TERMS AND CONDITIONS FOR YOUR
USE OF THE SITE, THE APPLICATIONS AND THE SERVICES.
YOUR RIGHT TO USE THE SERVICES IS EXPRESSLY CONDITIONED ON


Notifications

screenElements:
Side Navigation
Tab

screenPatterns:
Notifications
Empty State

screenElements:
Status Dot
Badge

screenElements:
Status Dot
Badge
Side Navigation
Tab
Stacked List
Avatar
Thumbnail
Link
Badge
Status Dot
Loading Indicator

screenPatterns:
Notifications
Empty State
Home
Notifications
Loading

screenKeywords:
John P 2N
8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(@®© Recents Recently viewed .
Notifications
[ Drafts
New design file New FigJam file
@ Design and prototype Whiteboard and diagram
Ready to go beyond this free
plan? Upgrade for premium
features. You don't have any notifications.
Explore FigJam templates
-
= Name
2 == Daily Team '
Favorite files Dlagram — sync meeting -
] i basicsin agenda e
Hover over any file and click the star to Fi J m = | = =TI ' T
add it here g a E——
B o
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
~+  Create new team
L» ' * “\
eader1 “ —_— @ A/
- Bl ’
__ vos =5
T Build your own °<> B oo o .
L = team library & amg )t H L
e design. Team libraries let you share styles -
= = ko9 B W
— — everyone on your team.
= o ¥
worronrext o . - - ]
John's team library FigJam Basics Figma Basics
In Team project - Edited 11 minutes ago In Drafts - Edited 11 minutes ago In Drafts - Edited 11 minutes ago
. Download desktop app X ] === - - - o : G
|John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community L (\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 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 P 0
§3 jsmith.mobbin@gmail.com M Q @ Explore Community Q (i) e
Recents Drafts Deleted
© Notifications Mark all as read
[ Drafts
[J
a Jane replied to a comment in Contacts App
NeYV design file + Neyv FigJam fllé + Looking good .
@ Design and prototype Whiteboard and diagram
Ready to go beyond this free
plan? Upgrade for premium [ ]
features. Jane reacted # to your comment in
Explore FigJam templates Contacts App £ it
- JEE— —
- - ‘ | e
A b= Daily Team '  m .f
Favorite files Dlagram — sync meetlng . = - .
i} _ basics in agenda = = S e T
J = =
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
KL “‘ =) - il -
e oA = .
Contacts . . S— . ~ -
. - . - = - ' . ‘ m . = - |
® - ®- R o - -
gv em @
ko9 B W
. ; ey ﬁ
o . - L] ]
Contacts App 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 Recently viewed .
Notifications
[ Drafts
New design file New FigJam file
@ Design and prototype Whiteboard and diagram
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates
-
= Name
2 == Daily Team '
Favorite files Dlagram — sync meeting -
] i basicsin agenda e
Hover over any file and click the star to Fi J m = | = =TI ' T
add it here g a E——
B o
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
~+  Create new team
L» ' *“\
eader1 “ —_— @ A/
- Bl ’
__ vos =5
T Build your own °<> B oo o .
L = team library & amg )t H L
e design. Team libraries let you share styles -
= = ko9 B W
— — everyone on your team.
= o ¥
worronrext o . - - ]
John's team library FigJam Basics Figma Basics
In Team project - Edited 11 minutes ago In Drafts - Edited 11 minutes ago In Drafts - Edited 11 minutes ago
. Download desktop app X ] === - - - o : G


Adding account

screenElements:
Dropdown Menu
Avatar
Icon

screenElements:
Text Field
Button

screenElements:
Text Field
Button
Dropdown Menu
Avatar
Icon
Text Field

screenPatterns: Login Home Login

screenKeywords:
F Authenticated as jdoe.mobbin@gmail.com
|& Continue with Google
or
jsmith.mobbin@gmail.com
Use single sign-on
Reset password
No account? Create one
|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
|& Continue with Google
or
jdoe.mobbin@gmail.com
Use single sign-on
Reset password
No account? Create one
|Jane . D
gB jdoe.mobbin@gmail.com v Q @ Explore Community Q { f ) v
Recently viewed
@ John
New design file + New FigJam file + [ Import file
Design and prototype Whiteboard and diagram Bring in files from other tools
( 3 ) Jane v
Explore FigJam templates See all X
@ Community >
A S Daily Team ' = .f
Favorite files Dlag_]ram — sync meeting . !
, _ basics in agenda & oot o T e
Hover over any file and click the star to Fi J m A - '
add it here gJa —— ) [ ]
B o
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
—|— Create new team
All files v Last viewed v g =
)
@ A
Contacts Q . o
00 amd O E BsEnEs R E
ko9 B N
e i
o . - i .
Contacts App FigJam Basics Figma Basics
Edited 23 minutes ago In Drafts - Edited 4 hours ago In Drafts - Edited 4 hours ago
|Jane "
3 e e e e M Q @) Explore Community Jal J) v
(® Recents Recently viewed
[ 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 Diagram . sync meeting - : :
, _ basics in agenda ol —— R 2 B
Hover over any file and click the star to Fi J m = = '
add it here g a = R -
B o
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
~+  Create new team
All files v Last viewed v oo |=
Lw w . “\
e oA
Contacts ‘ . o
S $ ams ’ & EEgE o B
ko9 W W
- ‘7 o . ﬁ
fa . i ]
Contacts App FigJam Basics Figma Basics
Edited 23 minutes ago In Drafts - Edited 4 hours ago In Drafts - Edited 4 hours ago
f f


Setting up passphrase protect

screenElements: Button Switch

screenElements:
Text Field
Button
Switch

screenKeywords:
Share 3 items < x
alvideos
3 items
Settings g
flying
Allow downloads ‘ Autoplay 2673
Uploaded on Dec 30,2022 at 11:16am
Passphrase protect [ ] —— -
e p—
ecccccccccoe lo3 // P 3
& =
Link expiration = )
% g e
> >
< . B Q\.{/
1 . ot A) = —
= 'l ] e = o
L]
|Share 3 items < x
alvideos
3 items
Settings g
flying
Allow downloads ‘ Autoplay 2673
Uploaded on Dec 30,2022 at 11:16am
Passphrase protect () —— -
=
z // e
& =
Link expiration = )
.y V > > ~£ e
> >
C R
1 . ot A) = —
= 'l ] e = o
L]
|Share 3 items < x
all videos Download All
3 items
Settings g
flying
Allow downloads ‘ Autoplay 2673
Uploaded on Dec 30,2022 at 11:16am
Passphrase protect () —— -
downloadlink .3 // - ‘/”
& =
Link expiration = )
.y V > > ~£ e
> e L > S
Pt ¥ 4
1 . ot A) o —
= 'l ] e = o
]
|Share 3 items < x

all videos Download All

3 items

Settings g
flying
Allow downloads ‘ Autoplay 2673
Uploaded on Dec 30,2022 at 11:16am
Passphrase protect —~ - _ s
Link expiration / o
e — ‘ g
//V
- ~ ‘/'
Fn : i —— &
]


Onboarding

actions:
Onboarding
Creating Account
Verifying
Inviting Teammates & Friends
Browsing Tutorial

screenElements:
Dialog
Text Field
Button
Link

screenElements: Select Checkbox

screenElements: Toast Card Button

screenElements: Card Thumbnail Link

screenPatterns:
Account Setup
Select

screenElements:
Button
Coach Marks

screenElements:
Progress Indicator
Coach Marks

screenElements:
Top Navigation Bar
Logo
Button
Animation & Video
Text Field
Button
Progress Indicator
Coach Marks
Top Navigation Bar
Search Bar
Icon
Avatar
Side Navigation
Banner
Button
Tree
Grid List
Card
Floating Action Button
Badge
Segmented Control
Dialog
Text Field
Button
Link
Card
Thumbnail
Link
Progress Indicator
Link
Loading Indicator
Skeleton
Select
Dialog
Text Field
Button
Link
Toast
Card
Button
Text Field
Button
Coach Marks
Text Field
Select
Checkbox
Text Field

screenPatterns:
Invite Teammates
Guided Tour & Tutorial
Home
Account Setup
Account Setup
Select
Guided Tour & Tutorial
Verification
Loading
Loading
Account Setup
Signup
Acknowledgement & Success
Subscription & Paywall
Select
Pricing
Invite Teammates
Guided Tour & Tutorial
Signup
Account Setup
Account Setup
Account Setup

pageType: Marketing Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application Application

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v @ English v Login
Nothi ti
@2& alone.
Figma connects everyone in the design process
so teams can deliver better products, faster.
o
? 0 EED =@ "t O % TOD Design (X0
Layers Desigr
. Headline
lay For you Albums C ———— Color.
| ® "
«+ Slider | @ @ W
Radio y I : .
2 AR Y
|Invite your collaborators -
Share team files and create together -
https://www.figma.com/team_invite/r... Copy invite link
Or invite by email, comma separated
<
[

Skip this step
) O ) )
|John P 2N
(e R R i Q @) Explore Community Jal Q@ -
(® Recents Recently viewed
[ Drafts +

New design file S n file New FigJam file Import file
’ ’ + Whi bgd d di + E B'p'f'l fi h I
@ New FigJam file N | prototype iteboard and diagram ring in files from other tools
Ready to go beyond this fref
plan? Upgrade for premiul Import... E
features.
Xplore FigJam templates See all X
View plans
Create files from scratch, import X
designs from Sketch, or start from = V“% - . 2o
= Name S
templates. == Da||y Team ' | m {
Favorite files sync meeting .
. |=———= s e soyssues [l Tonks s oo
Hover over any file and click the 10f 5 agenda =t :_+ '; B ' e S ==
add it here e . -
B [V
s
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
~+  Create new team
Lw w . “\
eader1 “ st @ A/
- Bl i
_ e ny =5
T Build your own °<> B oo o .
- == team library I\ ams 0 e Rl e R B
e " design. Team libraries let you share styles
Bl T S ko9 B N
- - everyone on your team.
= o ¥
J— la . - - | ]
John's team library FigJam Basics Figma Basics
In Team project - Edited 7 minutes ago In Drafts - Edited 7 minutes ago In Drafts - Edited 7 minutes ago
. Download desktop app X ] === - - - o : G
|John P 2N
8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Recently viewed
[ Drafts
New design file New FigJam file Import file
; . ; ooE
@ 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
- = -
A b= Daily Team ' = .f
Favorite files Dlagram — sync meeting - - ] !
i} _ basics in agenda = = oz e T
Hover over any file and click the star to Fi J m = = '
add it here g a E—— -
B 0
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
~+  Create new team
L» ' * “\
eader1 “ —_— @ A/
= —
- Bl ’
__ vos =5
T Build your own °<> B oo o .
L = team library & amg )t H L
e design. Team libraries let you share styles -
= = ko9 B W
— — everyone on your team.
= o ¥
worronrext o . - - ]
John's team library FigJam Basics Figma Basics
In Team project - Edited 7 minutes ago In Drafts - Edited 7 minutes ago In Drafts - Edited 7 minutes ago
. Download desktop app X ] === - - - o : G
|gWeIcome to Figm? I Z4
|What would you like to do first?
We can help you get started faster
VA ' ‘ I
- -
Design with Figma Whiteboard in Figdam
Design, prototype, and Brainstorm and diagram
developer handoff together
Get inspired by browsing resources in Community
I'll get started on my own
) ) ) O
|John P I
§3 jsmith.mobbin@gmail.com M Q @ Explore Community a { f )
© Recents Recently viewed Notifications for your workspace X

live here.
[ Drafts
New design file New FigJam file | S0IS
; . ; v
@ Design and prototype Whiteboard and diagram B
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
- = -
A b= Daily Team ' = .f
Favorite files Diagram . sync meeting - . :
) _ basics in agenda = = Sy Pl e T
Hover over any file and click the star to Fi J m = = '
add it here gJa E— -
i vﬂ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 viewed v oo |=
~+  Create new team
=a o)
eader 1 vt 1 A A
- Bl '
- ny =5
T Build your own °<> B o om s e e .
—— ——y D . 2= E L i n L ] =
team library $ ams ’ | BB R B
e . design. Team libraries let you share styles
Bl T S ko9 B N
- - everyone on your team.
= [ ¥
- {a - w W
John's team library FigJam Basics Figma Basics
In Team project - Edited 7 minutes ago In Drafts - Edited 7 minutes ago In Drafts - Edited 7 minutes ago
. Download desktop app X ] === - - - o : G
|X

Verify your email
To use Figma, click the verification button in
the email we sent to
jsmith.mobbin@gmail.com. This helps keep
your account secure.
No email in your inbox or spam folder?
Wrong address? to sign in with a
different email. If you mistyped your email
when signing up, create a new account.
|Tell us about yourself ’
| agree to join Figma's mailing list
|John p 0
§3 jsmith.mobbin@gmail.com M O\ @ Explore Commumty @ (\i/) M
Recently viewed
New design file + New FigJam file + [ Import file
Design and prototype Whiteboard and diagram Bring in files from other tools
Explore FigJam templates See all X
- g f— =
: —— Daily Team ' BT 1 .& =
Diagram = sync meeting s
basics in ELENGE) = B || g e |
FigJam - L '
B Vg
Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
All files v Last viewed v oo |=
o' )
eader 1 N
ader2 >
- vo, =D
T Build your own o B oo o o
—_ = team library 00 om3 ’ : ec dig: g =g B
ot s design. Team libraries let you share styles -
= | T s e rs9 B B
s — everyone on your team.
Ze O
J— - la . - .
John's team library FigJam Basics Figma Basics
In Team project - Edited 11 minutes ago In Drafts - Edited 11 minutes ago In Drafts - Edited 11 minutes ago
|X
Tell us about yourself
| agree to join Figma's mailing list
|X
(> Continue with Google
or
jsmith.mobbin@gmail.co
Did you mean ?
Create account
Already have an account?
By clicking "Create account", | agree to Figma's and
|X
(> Continue with Google
or
Create account
Already have an account?
By clicking "Create account", | agree to Figma's and
|Choose a plan for your team
O O
Starter Professional
For teams trying Figma For professional teams
e Unlimited files in Drafts e Unlimited files
e 3 design files e Unlimited projects
e 3 Figdam files e Shareable team libraries
® 1 project ® Unlimited version history
e 30-day version history
$12/mo. per Figma editor
$3/mo. per FigJam editor
Start for free Choose Professional
O O
() () O ()
Invite sent.
|Invite your collaborators -
Share team files and create together -
https://www.figma.com/team_invite/r... Copy invite link
jdoe.mobbin@gmail.com
<
[

Skip this step
) O ) )
|John "
8 i e @ M Q @) Explore Community Jal J) v
(® Recents Recently viewed
[ Drafts
New design file New FigJam file Import file
; . ; R
@ 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
- = -
. o Daily Team ' 5 .4
A 3 =
Favorite files Dlagram — sync meeting - - !
) _ basics in agenda = = S [ e T
Hover over any file and click the star to Fi J R == = '
add it here gJam - -
i [V
(3
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
~+  Create new team
= o)
eader1 S \ .
= A
- Bl ' ’
- ny =5
e Build your own °<> B e e i e
—— ——y D . 2= E L i n L ] =
team library S ams ’ el e e B
St o design. Team libraries let you share styles
Bl T S ko9 B N
- - everyone on your team.
o fo 4 =\ W8 o Take a quick tour of the file browser? X
John's team library FigJam Basics See how to create files, learn about Drafts and Teams,
In Team project - Edited 7 minutes ago In Drafts - Edited 7 minutes ago ways to access Community, and more.
. Download desktop app X ] == N - - o :
|X
(> Continue with Google
or
jsmith.mobbin@gmail.com
Create account
Already have an account?
By clicking "Create account", | agree to Figma's and
|John "
(e R R i Q @) Explore Community o @ v
(® Recents Recently viewed
[ Drafts

New design file New FigJam file Import file
; . ; ooE
@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
? i - -
plan? Upgrade for premium P -] N - - '.
features.
John's team library FigJam Basics Figma Basics
In Team project - Edited 7 minutes ago In Drafts - Edited 7 minutes ago In Drafts - Edited 7 minutes ago
Favorite files . s il :
Hover over any file and click the star to = : -
add it here B | B2
Teams .
B Acme Free .
Team project
—|— Create new team
Prototyping in Figma Wireframing in Figma
In Drafts - Edited 7 minutes ago In Drafts - Edited 7 minutes ago
. Download desktop app X 0
|X
Tell us about yourself
What kind of work do you do? * v
| agree to join Figma's mailing list
|X
Tell us about yourself
What kind of work do you do? * v
| agree to join Figma's mailing list
|gWeIcome to Figm? I Z4


Landing page

screenElements:
Dropdown Menu
Thumbnail

screenElements: Banner Button

pagePatterns:
Landing Page
Feature Section

screenElements:
Animation & Video
Link

screenElements: Card Avatar

pagePatterns:
Landing Page
Content Section

screenElements:
Grid List
Thumbnail
Avatar

pagePatterns:
Landing Page
CTA Section

pagePatterns:
Landing Page
Footer Section

screenElements:
Dropdown Menu
Card
Avatar
Top Navigation Bar
Logo
Button
Animation & Video
Hero Image
Button
Banner
Avatar
Banner
Button
Grid List
Thumbnail
Avatar
Dropdown Menu
Animation & Video
Link
Dropdown Menu
Thumbnail

pagePatterns:
Landing Page
Landing Page
Social Proof (Testimonial) Section
Landing Page
Footer Section
Landing Page
Hero Section
Landing Page
Landing Page
Content Section
Landing Page
Content Section
Landing Page
Social Proof (Testimonial) Section
Landing Page
Social Proof (Logo Cloud) Section
Landing Page
Content Section
Landing Page
CTA Section
Landing Page
Landing Page
Feature Section
Landing Page
Landing Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing 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
|g +1
“Figdam adds a whole new level of end-to- @
end collaboration—from brainstorming,
research workshops, to design jams.”
»
Matt Hryhorsky Designer
UX Manager at Shopify Does this flow make sense?
|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
|’ Products v Enterprise v Pricing Community v Company v @ English v Login
Nothi ti
@2& alone.
Figma connects everyone in the design process
so teams can deliver better products, faster.
o
? 0 EED =@ "t O % TOD Design (X0
Layers Desigr
. Headline
lay For you Albums C ———— Color.
| ® "
«+ Slider | @ @ W
Radio y I : .
2 AR Y
|Get started 0
Get started
romm IV EEIEENE -4
Layers sl
lay For you Albums —— Color.
I Q-
|
& Slider : @ 0 !
Radio ; : c
H2 :
| O®:
For you \——————_.B
C
Circle @ # V
Q-
Playlists Make It Together @ @ b
Subtitle
& Slider Auto L
‘ ‘ Y
% Play Ul a
Nav Bar ‘ Resizil
. <
T2 % 2 R ) B
Join other industry-leading organizations pushing _.:._. u x l = | m m
|L J ubtitle »
! s d Get started
Spoti :
potify . 3D lllustration ..
Ways of Working Pack
In Flgma Over 30+ 3D illustrations, FREE! . - 2 } e ) ) - St
‘ N . - o) il
@Spotify Design T ,‘,\ . ;r' . s + ‘:: :
) - (Nyg] %
@ Spotify 4+ 41.2K @ Alzea 4+ 200K @ Material Design 4+ 204K
THIS WEEK
Trending plugins
@ - Design Lint Unsplash Stark
A Design Lint is an open source plugin Insert beautiful images from Unsplash @ A suite of integrated accessibility tools
that finds missing styles within your... straight into your designs. for your product design and...
FIGJAM RESOURCES
Add superpowers to your Figdam sessions
Fig Brainstorm
‘ User Flow Diagram
Template )/
Mind Map v 1
oD d o>
|Trending plugins
Get started
@ - Design Lint Unsplash Stark
. Design Lint is an open source plugin Insert beautiful images from Unsplash @ A suite of integrated accessibility tools
that finds missing styles within your... straight into your designs. for your product design and...
FIGJAM RESOURCES
Add superpowers to your Figdam sessions
: Brainstorm
‘ User Flow Diagram
Template )/
Mind Map “ M
oD d o
@ Annie Su 4+ 6.6K #® Jarek Ceborski 4+ 224K 0 Figma 4+ 10.0K
Browse Figma community
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
a alone.
Figma connects everyone in the design process
so teams can deliver better products, faster.
t start
O
N share | = H O N T DO Design e G
Layers Desigt
. Headline
Iay This website uses cookies, pixel tags, and local storage for performance, personalization and X [ Color
marketing purposes. We use our own cookies and some from third parties. By remaining on I—- === ===
this website, you indicate your consent. Privacy policy | . Y
I @
4 |
Y Yo
H2 ) bl
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Blog
Careers
|
Our story
[ )
Help Center
a alone:
Figma connects everyone in the design process
so teams can deliver better products, faster.
Get started 0
romm B EXRNREe LA
Layers Desigt
. Headline
lay For you Albums C_ ————— Color
@O o
1
% Slider | . L
Radio ( I 0 -
I
2 AR Y
|Get started
Browse Figma community
. N .
- ; E“ ' “\ ] []
14 ﬁ ‘ With Figma, everyone works towards a
? g @™ B A shared goal. This has enabled our product
B teams to ship new products faster and
”z feel more confident in their decisions.
4 Fi7d I ; ; : . .
; - o
{! % ,}f}/ Matt Gottschalk
g | Head of Design Ops at British Telecom
|’ Products v Enterprise v Pricing Community v Company v @ English v Login
Francais
Deutsch
| |
Nothing great is| -
a alone.
Figma connects everyone in the design process
so teams can deliver better products, faster.
:
romm B EXRNREe LA
Layers Desigr
. Headline
lay For you Albums C ———— Color.
| -
«» Slider | @ @ W
Radio ( I : .
2 AR Y
|C
Circle # v
@ Getstarted ¥ W
Playlists Make It Together b
Subtitle @ @
< Slider Auto L
% Play Ul 7 V&
Nav Bar ‘ ° Resizi
. &
. . LoXed
T .7 5 % @ Logo * [
Button o X ‘ ‘ ]
Join other industry-leading organizations pushing als y :: B @
boundaries and solving problems in Figma o“0n <@
Design Build
How do we..
e attract new users to -’.1
the app with the :
signup experience *
|ity [Z] Community 7 Community 5 Community 0 Community ¢/ CGiinun
Join the community
Learn from others, share your work, and extend your tool set with a
diverse group of designers, plugin creators, researchers, illustrators,
content writers, and many more from around the world.
BUZZWORTHY
Excellent files by and for our community
Spotify — = e
W f Worki 3D lllustration .
: ays o orkKing Pack
In Flgma Over 30+ 3D illustrations, FREE! . Rk . — - _
e Spotify Design . . | + bt o
¢ T
@ Spotify 4+ 41.2K @ Alzea 4+ 200K @ Material Design 4+ 204K
THIS WEEK
|Get started
& Continue with Google
or
Use single sign-on
Already have an account? Log in
By clicking "Create account", | agree to Figma's TOS and
Privacy Policy.
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Overview
Customers
||
Notl—- great is
ade alone
||
Figma connects everyone in the design process
so teams can deliver better products, faster.
Get started 0
? 0 B3 =@t O TOD 0 @
Layers Desigr
. Headline

lay For you Albums C ———— Color.
@O o

1
% Slider | . L
Radio ( I 0 -

I

2 AR Y
|N~
How do we..
e attract new users to \-’,1
the app with the B
signup experience *
e make it easy & fun to
Explore ideas together ( ) OO
Writer
Diagram, sticky-note, and workshop in S R
FigJam—an online whiteboard for you v -
esigner
and your team to brainstorm in the
open.
Meet Figdam = N -_E Sign up
Login
|Brainstorm @ Build
Libraries Updates ‘k
Tempo Ul Styles \ O O
o 600 0
o0 Ag Ag Ag
i i i @
Bring those ideas to life 1 I ‘
Figdam and Figma live side-by-side, so
all design work, from ideation to
. . K R
execution, can be found in one place.
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Figma Figdam
An all-in-one design platform An online whiteboard for teams
8 k = N n
o o _ eatis
- [ 1 [ N
PN A 1] D/ =
DNe.
Design Online whiteboarding
Prototyping Design processes
Design systems Team meetings deSIgn process
ducts, faster.
Downloads g
t start
Get started 0
(N Y snare | =t On T D Design e a
Layers Desigt
. Headline
lay For you Albums :, ———— Color.
@O o
I
% Slider | . L
Radio I 0 -
I
2 AR Y


Team detail

screenElements:
Side Navigation
Tab

screenPatterns:
User / Group Profile
Dashboard

screenElements:
Search Bar
Stacked List
Tab

screenElements:
Avatar
Button
Stacked List
Card
Thumbnail
Editable Text
Link
Tab
Side Navigation
Tab
Divider
Search Bar
Stacked List
Tab

screenPatterns:
User / Group Profile
Dashboard
Home
User / Group Profile
Settings & Preferences
User / Group Profile

screenKeywords:
John "
(e R R i Q @) Explore Community o @ v
(® Recents
> o Acme (o) () (=
Starter team
Ready to go beyond this free Projects Members Settings About
plan? Upgrade for premium
features.
Last modified v oo |=
Team project
eader 1
Favorite files } :— Members
Hover over any file and click the star to - _
- = JE— . John (You)
add it here - o Build your own
team library © vare
Teams e design. Team libraries let you share styles
and components scross fles, i
¢ 1file, updated 2 minutes ago :;ﬂ Ev@wor:oryolurve@m "
B Acme Free
Starter team overview
Team project
W 1 of 3 Figma files used
—|— Create new team
Ry 0 of 3 FigJam files used
3 10f 1 project used
Upgrade your team for unlimited files,
projects, and customizable team libraries.
. 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
|John "
(e R R i Q @) Explore Community o @ v
(® Recents
B prfe Acme New project E]
Starter team
Ready to go beyond this free Projects Members Settings
plan? Upgrade for premium
features.
Acme Change team name Acme >
Change your team's name
Change team icon N
Favorite files Add or change your team’s logo or icon that appears on the team page and side navigation
Hover over any file and click the star to
add it here
Set team profile handle N
Add or change your team’s public handle
Teams
B Acme Free Delete team N
Permanently delete this team and all resources within
Team project
—|— Create new team
Team libraries Enable libraries N
Enable and set default team libraries for all team files
Plan and billing Upgrade your plan
Upgrade to the Professional plan or to an Organization and get access to shared team libraries, advanced >
security features and more...
. Download desktop app X 0
|John "
(e R R i Q @) Explore Community o @ v
(® Recents
B prfe Acme New project E]

Starter team
Ready to go beyond this free Projects Members  Settings
plan? Upgrade for premium
features.
Last active: All v Team permissions: All v Q
O Name v Last active Team permissions
Favorite files Jane
° i i i - Can edit v eee
Hover over any file and click the star to jdoe.mobbin@gmail.com
add it here
John (You)
o o i . 2 hours ago Owner cee
jsmith.mobbin@gmail.com
Teams
B Acme Free
Team project

—|— Create new team
. Download desktop app X 0


screenKeywords:
))'o Product Integrations v Enterprise Customers Camera to Cloud Pricing SignIn - h‘
404 Error
I I I. . t tI l
ooking for.
We can’t find that page; but you canalways chat with a friendly expert at
Frame.io if\yourhavea question'orneed support.


Searching Blog

screenElements:
Text Field
Button

screenElements:
Full-Screen Overlay
Text Field

screenElements:
Full-Screen Overlay
Text Field
Text Field
Button

screenPatterns: Search Search Search

pagePatterns:
Blog Page
Blog Page

pageType: Marketing Marketing Marketing Marketing

screenKeywords:
TYPE YOUR SEARCH AND PRESS ENTER...
|))i- frameio insider
Post-Production Workflow Behind the Scenes Production Business Enterprise Frame.io News ,C)
SHOWING RESULTS FOR...
Hollywood
5 m .
BTG i~ j
G P— §
~ A
| Avid, Career 14 MIN READ | Career 28 MIN READ | Cribs 6 MIN READ
Want to Work in Black, Blonde, and Frame.io Cribs: Picrow
Hollywood? Avid is the Bold. Making it in (Hollywood, California)
NLE to Learn. Hollywood When You September 16, 2016 O
August 19, 2019 Don’t Fit the Mold.
|TYPE YOUR SEARCH AND PRESS ENTER...
hollywood
|))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


Creating an interaction

screenElements:
Tab
Segmented Control

screenPatterns:
Canvas
Feature Info

hotspotType: Drag

hotspotType: Double Click

screenElements:
Button
Icon
Tab
Segmented Control
Popover
Badge

screenPatterns:
Action Option
Canvas
Feature Info
Add & Create
Add & Create

pageType: Application Application Application Application Application Application Application Application

screenKeywords:
o+ 2
g o O B T & &M O S ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design  Prototype Inspect
«» Contact item .
Interactions +
Alternate
Default M Overflow scrolling
1 Contact Detail
Lorem ipsum dolor sit amet co...
Show prototype settings
Name
Avater Contacts
Creating a connection X
Top bar # Contact item
T T T T T T T T T T T T T T T T T TT T T T TTTTA L ! ' }-) Select a frame or objectin a
H Home g ® } } Gz frame and use the circular node
} Name } Name '® Name to drag a connection to another
Contact list | | 4 frame.
| - | [} [l L ol U
. | I - orem ipsum dolor sit amet consectetur. Urna
&> Contact item | | Name 390 x 80 non suspendisse aliquam pharetra ligula Running your prototype X
} Name } y adipiscing bibendum.
Contact item I I [>  Use the play button in the
L777777777777777777777777777J toolbar to play your prototype.
Contacts If there are no connections, the
play button can be used to play
Top bar a presentation of your frames.
|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 Devi
evice
Alternate
iPhone 14 0 =
Default Model
odel
View Contact [>
1 Contact Detail Midnight
Lorem ipsum dolor sit amet co... Preview
Name
Avater Contacts
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | '~ Name
Contact list | Q | P Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna Background
Contact item | | Name non suspendisse aliquam pharetra ligula
) } Name } y adipiscing bibendum. . 000000
Contact item | |
| |
Contacts e H
ows
Top bar
P View Contact R 2
Removing a connection X
}X To delete a connection, click
and drag on either end.
Running your prototype X
[>  Use the play button in the
toolbar to play your prototype.
If there are no connections, the
play button can be used to play
a presentation of your frames.
|g o O B T & &M O S ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design  Prototype Inspect
«» Contact item
Interactions <% +
Alternate
Interaction details X Tap — Contact Det.. —
Default
" Flow1 [> © Ontap Overflow scrolling
1 Contact Detail
Lorem ipsum dolor sit amet co... — Navigate to Contact D...
Name
Animation Show prototype settings
Avater Contacts
Top bar + Contact item
5 Removing a connection X
H Home | | i i
| | i - X To delete a connection, click
| Name | ~ Name Y 3 d d ither end.
Contact list | y | H P § and drag on either end.
i | | i i Lorem i
&> Contact item | | Name non Running your prototype X
| Name P ] : v Instant
Contact item I I T T Dissolve [>  Use the play button in the
L777777777777777777777777777J . toolbar to play your prototype.
Contacts Smart animate If there are no connections, the
play button can be used to play
Top bar Move in a presentation of your frames.
Move out
Push
Slide in
Slide out
|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 Devi
evice
Alternate
iPhone 14 0 =
Default Model
odel
Flow1 [
1 Contact Detail Midnight
Lorem ipsum dolor sit amet co... Preview
Name
Avater Contacts
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | '~ Name
Contact list | Q | P Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna Background
Contact item | | @ Name non suspendisse aliquam pharetra ligula
| ! : adipiscing bibendum.
) \ Name | ’ piseing Il 000000
Contact item | |
| |
Contacts e H
ows
Top bar Fiow'i
Removing a connection X
}X To delete a connection, click
and drag on either end.
Running your prototype X
[>  Use the play button in the
toolbar to play your prototype.
If there are no connections, the
play button can be used to play
a presentation of your frames.
|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 Devi
evice
Alternate
iPhone 14 0 =
Default Model
odel
1 Contact Detail Midnight
Lorem ipsum dolor sit amet co... Preview
Name
Avater Contacts
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | '~ Name
Contact list | Q | o Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna Background
Contact item | | @ Name non suspendisse aliquam pharetra ligula
| ! : adipiscing bibendum.
) \ Name | ’ piseing Il 000000
Contact item | |
| |
Contacts e
Creating a connection X
Top bar
P }-) Select a frame or object in a
frame and use the circular node
to drag a connection to another
frame.
Running your prototype X
[>  Use the play button in the
toolbar to play your prototype.
If there are no connections, the
play button can be used to play
a presentation of your frames.
|g o O B T & &M O S ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design  Prototype Inspect
«» Contact item
Interactions <% +
Alternate
Interaction details X Tap — Contact Det.. —
Default
" Flow1 [> © Ontap Overflow scrolling
1 Contact Detail
Lorem ipsum dolor sit amet co... — Navigate to Contact D...
Name
Animation Show prototype settings
Avater Contacts
Top bar + Contact item
5 Removing a connection X
i Home | | : i . .
} Name } Name ; }X To delete a cennectlon, click
Contact list | , | y and drag on either end.
i | | i i Lorem i
&> Contact item } } Name nont Running your prototype X
‘ Name ‘ i 9 i > Instant
Contact item I I forrermrre s e [>  Use the play button in the
L777777777777777777777777777J toolbar to play your prototype.
Contacts State management If there are no connections, the
" play button can be used to play
Top bar [ Preserve scroll position a presentation of your frames.
|g o O B T & &M O S ® © W ) [shae| » > 0%~
Layers Assets Page 1 Design  Prototype Inspect
«» Contact item
Interactions <% +
Alternate
Interaction details X Tap — Contact Det.. —
Default Contact Del
Flow1 [ :
H Contact Detail £ ® © Ontap Overflow scrolling
Lorem ipsum dolor sit amet co... — Navigate to Contact D...
Name
Animation .
Show prototype settings
Avater Contacts
Top bar QEERMEN o b ovi " <
emoving a connection
| |
H Home | | B
I Name I Name O }X To delete a c?nnectlon, click
Contact list | , | y 40 and drag on either end.
| | 3 4
& Gontactit | | i ] Lorem i
ontact item | | : : non Running your prototype X
i Name i A
) I Q Name I I @ : [ slidein « > l 7
Contact item I I A ‘ [>  Use the play button in the
L777777777777777777777777777J O Smart animate matching layers toolbar to play your prototype.
Contacts If there are no connections, the
 Easeout  300ms play button can be used to play
Top bar a presentation of your frames.
|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 Devi
evice
Alternate
iPhone 14 0 =
Default Model
odel
Flow1 [
1 Contact Detail Midnight
Lorem ipsum dolor sit amet co... Preview
Name
Avater Contacts
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | '~ Name
Contact list | Q | P Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna Background
Contact item | | @ Name non suspendisse aliquam pharetra ligula
| ! : adipiscing bibendum.
) I Name | ’ piseing Il 000000
Contact item | |
| |
Contacts e H
ows
Top bar Flow 1
Removing a connection X
}X To delete a connection, click
and drag on either end.
Running your prototype X
[>  Use the play button in the
toolbar to play your prototype.
If there are no connections, the
play button can be used to play
a presentation of your frames.


Liking comments

screenPatterns:
Comments
Like & Upvote

screenKeywords:
< Back bridge.mp4 . © No Status v e v
Jane Doe uploaded 50min ago
A (no description)
‘ Timecode v Q ¢ Hide ®
. e Jane Doe 4min
00:01 I really like this part @
Reply ity
o Anna Just now
me too!
. " .
alae L B N T
SRR - B
SEEL LR . *. N R ST e 0 e e
aee==__gn.
i I
i 3 | | ‘ 4 E —
] == \ & | -3 ] op )f///
——— s 1 ! fr =N : = - 5
e e S g Y, 2 »
B e e L e it - ;
- - y —— —— - ’ £ ! ..-
]| »
N! bl e
|- = e - R
|
o
P2 x @ 00:01/00:02 v 1080p™ €3 I3
o
® 00:01 @ Everyone v % ©® -
|< Back bridge.mp4 - © No Status v o v
Jane Doe uploaded 51min ago
(no description)
/k/ y Timecode v Q ¢ Hide ®
S ‘ o Jane Doe 4min
00:01 I really like this part @
_
L Reply 1o
‘ o Anna Just now
i 3 me too!
L/
e . ATy Reply s 1
e Sk S i i pate E"’* fa’:;";*"".'z::ri'-"f»“'-' & i ‘ . | 1 T o o co—
AT e SR | N e | et e i Rea o e R i o =
‘ | il mEi B ..;4‘;;-;"—4‘;#“‘ -
(. RIS = == | ¢
Qr 1=t . " "HET || Wi s
—— ‘ 3 |
o 1 i — " o
=20 ’rg//
- = 4 ] 5
=t ey | >
.-a—f“:f ‘t" = | L
B - ‘f e
Ay/s/ - . ¢ [ 2 ‘\“E
e : o
|
o
P 2 x @ 00:00/00:02 v 1080p™° €3 I%
©® 00:00 @ @ Everyone v % © -


Creating new FigJam file

actions:
Adding & Creating
Browsing Tutorial

screenElements:
Animation & Video
Button
Coach Marks

screenElements: Toolbar Avatar Button Stepper

screenElements:
Side Navigation
Button
Animation & Video
Button
Coach Marks
Button
Side Navigation
Tab
Toolbar
Avatar
Button
Stepper
Loading Indicator
Dialog
Search Bar
Side Navigation
Grid List
Thumbnail
Avatar
Link

screenPatterns:
Guided Tour & Tutorial
Guided Tour & Tutorial
Add & Create
Home
Canvas
Loading
Guided Tour & Tutorial
Add & Create

pageType: Application Application Application Application Application Application Application Application Application

screenKeywords:
Q_ Search templates (O skip when creating new files X
All templates Diagramming
Quarterly Planning [] ¢ L1
Flow Chart: 4
Workshops OIS p
L A
Fun
. gj Sales Funnel Template Flow Charts @» Userjourney map
Planning by FigJam by Fifi Law and 1 other L4 by Figma and 1 other
Research & design i il P D
o UML - N - N 2 ——
Engineering Diagrami : e : D|ag.|—ar.n s
o . basics in
DLl e il FigJam -
Meetings i ) ) ) i I
[ iagrams nformation Architecture Dia... [ ] iagram basics in FigJam
UML Diagi Information Architecture D Diagram b; FigJ
L4 by Figma by Toni Gemayel L J by Figma for Education
Brainstorms
o e O I I
| swimlane | | Fishbone .
'| Diagram Foos di
: hoioe | | legiain - -
@ Swimlane Diagram gj Fishbone diagram gj Concept map
L by Figma by FigJam and 1 other by FigJam and 1 other
|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 | & . - @
|8 O A& O Drafts / Untitled v o m P O — %~ +
o
[
) .
h Pinch to zoom on a trackpad, hold cmd X
o . s while scrolling, or use +/-.
The user journe .
F fors
|
~ /
-
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
7 4
User acticis
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...
S\/:;portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
L = & C
A 2 - =1
A A A ﬁ A A . . ﬁ T A 8
|Q_ Search templates (O skip when creating new files X
All templates Diagramming
Quarterly Planning [] ¢ L1
Flow Chart: 4
Workshops OIS p
L A
Fun
. gj Sales Funnel Template Flow Charts @» Userjourney map
Planning by FigJam by Fifi Law and 1 other L4 by Figma and 1 other
Research & design i il P D
o UML - N - N 2 ——
Engineering Diagrami : e : D|ag.|—ar.n s
o . basics in
DLl e il FigJam -
Meetings i ) ) ) i I
[ iagrams nformation Architecture Dia... [ ] iagram basics in FigJam
UML Diagi Information Architecture D Diagram b; FigJ
L4 by Figma by Toni Gemayel L J by Figma for Education
Brainstorms
o e O I I
| swimlane | | Fishbone .
'| Diagram Foos di
: hoioe | | lagram L -
@ Swimlane Diagram gj Fishbone diagram gj Concept map
L by Figma by FigJam and 1 other by FigJam and 1 other
|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
|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 @
|Q_ Search templates (O skip when creating new files X
All templates Diagramming
Quarterly Planning [] ¢ L1
Flow Chart: 4
Workshops OIS p
L A
Fun
. gj Sales Funnel Template Flow Charts @» Userjourney map
Planning by FigJam by Fifi Law and 1 other L4 by Figma and 1 other
Research & design i il P D
o UML - N - N 2 ——
Engineering Diagrami : e : D|ag.|—ar.n s
o . basics in
DLl e il FigJam -
Meetings i ) ) ) i I
[ iagrams nformation Architecture Dia... [ ] iagram basics in FigJam
UML Diagi Information Architecture D Diagram b; FigJ
L4 by Figma by Toni Gemayel L J by Figma for Education
Brainstorms
o e O I I
| swimlane | | Fishbone .
'| Diagram Foos di
: hoioe | | lagram L -
@ Swimlane Diagram gj Fishbone diagram gj Concept map
L by Figma by FigJam and 1 other by FigJam and 1 other
|8 O A& O Drafts / Untitled v o 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?
7 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 Use the Hand tool and drag to move X
Trooniiiiiiiiii around. Hold space to activate it
: @ anytime.
0 ] pwwwwe § I= - & O
: -p : 20f3 Next
Vs J2)
‘ ﬁ‘ < . (]
Q A A A . A L] T [] A
O \( & ' - ®
|Q_ Search templates (O skip when creating new files X
Workshops

= "‘—$ [ ]

Quarterly Planning teme / Impact/ amnm
Effort .
Workshops = = é =
Fun | V4 . = . k o
. gj User persona @» Critique FigJam Impact / Effort Matrix
Planning by FigJam L4 by Figma and 1 other by Martin Merschroth
Research & design Fun
Engineering
Diagramming &%
# FigJam
ESE A
Meetings T
(e [ oo o] ==

Brainstorms

@ Magnet Poem Maker Feelings Wheel Connect 4

L4 by Figma and 1 other by Christian Lunde by Annalise Davis

Planning
User Journey Mapping