Adding an annotation

actions:
Adding & Creating
Selecting & Choosing

screenElements: Select Select

pageType: Application Application Application Application Application Application Application Application Application

screenKeywords:
Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
| B®) .
e NS b m Requirement
) <
@ Requirement jsmith.mobbin2@... now
‘ o note that stroke weight has changed, its 2px
now
SAN FRANCISCO, CA
Requirement
‘ MESSAGE @ I T
p, £ P .piﬂ
/ \ |
-
I‘ ‘: - (‘1 %
AY -
- W
| B
| “}
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob... , 1 version 33m  — 100% + I®) & Ef Add comment @ ShowAll v T .0‘
|* < Dashboard Profile > Q. Search workspace ‘ @
-
Share: zpl.io/Am8PpX6 ™
View in Stage Mode 5]
9:27 oll T = o _
File: Figma basics 8
oS Annotations
) =2
e' 7 8
N f 2h
bl
1%
6 No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J One e annotations
SAN FRANCISCO, CA E o ®BK
', £F P p\"v‘
, -~
/ \ 1
-
L ‘ =
| 5 0 » i B
; | ¢ ]
<
C | 9 VB
-
‘ Reusable components 5
- No reusable components yet
R ESSE
-
Assets
jsmith.mob... , 1 version 30m  — 100% <+ B2 Nocompor v I®) 8 E} Add comment & ShowAll v Ny T ..‘
|Q < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e ‘ :A-j :‘ J
.2l
Ll L
8| Nk 3
i c No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e e annotations.
SAN FRANCISCO, CA Ef o #K
Annotation Annotation v ® None v
MESSAGE —
© Behavior
p’ P N @ Requirement
- 2 @® Animation
/ \ |
% \ ® Accessibility
! y { - l‘ i &
. 1 ‘A ® API
v . .
a w E © Tracking
- 8 ¥
o %
= Currently in development,
% i
‘ check back soon. Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 32m ~ — 100% + &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘
|Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e' :A-j :‘ J
Nof 2tk
Ll L
8| Nk 3
i c No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e e annotations.
SAN FRANCISCO, CA Ef o #K
- Annotation v @ Requirement
Requirement
MESSAGE )
note that stroke weight has changed, its 2px now
N P e
B ™ ¥l
/ \ |
M,
| } 4 Y ' P .
. 1 ¢ .| ‘
AT -~
el Cld
- o 4
o %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 33m ~ — 100% + = &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘
|Q < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e ‘ :A-j 3 J
= E%
B TS
Ll L
8| Nk 3
i c No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e e annotations.
SAN FRANCISCO, CA EY o ®BK
Comment v 0o@e00o000
MESSAGE ° For feedback and questions
Visible when clicked
p’ P -~ Annotation
o :! For documentation
| - \ | Always visible on right panel
ey T
| } 4 Y ' P .
. 1 ¢ .| ‘
&
- b
1 V -
~ PR
-
‘ Reusable components N
) No reusable components yet
[P eSS
-
Assets
jsmith.mob..., 1 version 32m ~ — 100% + &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘
|Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
| B®) .
e NS £~ m Requirement
§ ol L
\} % @ Requirement jsmith.mobbin2@... now
‘ c note that stroke weight has changed, its 2px
now
SAN FRANCISCO, CA
Requirement @ Requirement jsmith.mobbin2@gmail.com, now
MESSAGE )
note that stroke weight has changed, its 2px now
e T, ]
/ \ |
ey
| } 4 Y ' P .
. 1 ¢ .| ‘
AT -~
el T
o L3
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 33m ~ — 100% + = &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘
|* < Dashboard Profile > Q. Search workspace ‘ @
-
Share: zpl.io/Am8PpX6 ™
View in Stage Mode 5]
9:27 oll T = o _
File: Figma basics 8
oS Annotations
S\ =
e' 7 8
N f 2h
bl
1%
6 No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J One e annotations
SAN FRANCISCO, CA E o ®BK
Comment v CYX X XXX X
MESSAGE (4]
[P X 28 @&
, -~
/ \ 1
-
L ‘ =
! ‘\ - n‘ i pA
; | ¢ ]
v
1 V ”
~‘l 9 —
-
‘ Reusable components 5
- No reusable components yet
[ St .
-
Assets
jsmith.mob... , 1 version 23m  — 100% <+ B2 Nocompor v I®) 8 E} Add comment & ShowAll v Ny T ..‘
|Q < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e' :A-j e
=¥ £
N .2
Ll L
8| Nk 3
i c No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e e annotations.
SAN FRANCISCO, CA Ef o #K
PR Annotation v @ Select type
nnotation
MESSAGE —
I
N P e
P -
/ \ |
ey
| } . Y B .
. 1 ¢ .| ‘
AT -~
el Cld
- o 4
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 32m ~ — 100% + &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘
|Q < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e' :A-j :‘ J
Nof .2th
Ll L
8| Nk 3
i c No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e e annotations.
SAN FRANCISCO, CA Ef o #K
reau . Annotation v @ Requirement
equiremen
MESSAGE g
P e
p -
/ \ |
M,
| } 4 Y ' P .
. 1 ¢ .| ‘
AT -~
el Cld
- o 4
o %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 32m ~ — 100% + &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘


Switching workspaces

appName: Zeplin

appCategory: Productivity

appTagline: Bring harmony to design delivery

companyHqRegion: US & Canada

companyStage: Early Stage

platform: web

pageType: Application

hotspotType: Click

pageType: Application Application Application

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace ’ [C]
-
Mobbin Home
1 project, 0 styleguides, 2 members
Projects  Styleguides
Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
Introducing Sections for projects @
Bring clarity to your workspace by organizing and adding more context to your projects.

Sample Project Section

3 styleguides a Component library O Code Repo 5> Team wiki Add custom link

These are all the projects related to one product, the same product feature, or something in common

© Development ©® Design © Discovery
Th 3d 7w
Sample Project Design Sample Project Wireframes Sample Project Explorations
-
Ox(]
|* Personal Workspace v Q, Search workspace Q !
Projects  Styleguides
Created v Q Filter by name
Welcome to your workspace! #
This is your personal workspace where you can view your projects and styleguides. You
can browse through the sample project below or create a new project.
€ Gotit!
’ = ~ ~ o < S
927 il = - ~= ~~/ .. Sample Project
Y Sy 2 K
a LB "~/
| oE= . ~ - |
Ranictar ' ..l ;~.. A = WS
WEB 2d i0S 2d
Production Snack Overflow App
L] aOB6606
-
Ox(]
|* ° Mobbin Home's Workspace v Q, Search workspace ’ [C]
-
@ Personal Workspace
Mobbin Home ° Mobbin Home's Works... v
1 project, 0 styleguides, 2 members
Projects  Styleguides
Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
Introducing Sections for projects @
Bring clarity to your workspace by organizing and adding more context to your projects.

Sample Project Section

3 styleguides B Component library O Code Repo 5> Team wiki Add custom link

These are all the projects related to one product, the same product feature, or something in common

© Development ©® Design © Discovery
Th 3d 7w
Sample Project Design Sample Project Wireframes Sample Project Explorations
-
Ox(]


Browsing sample project

hotspotType: Hover

screenElements:
Top Navigation Bar
Tab

screenElements:
Search Bar
Coach Marks

screenElements:
Coach Marks
Link
Banner
Top Navigation Bar
Tab
Search Bar
Coach Marks

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

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

screenKeywords:
* < Dashboard < Market - Search - Result > Q Search workspace Q ]
Version History <Back
Dig into the details &
- Assets =
Today Simply click on the screen to access specs such as fonts, colors, components, component
variants, assets and paddings.
Download all assets
Bran 1:14 PM Learn how you can collaborate with your team by viewing a comment added by others, seeing
the history of this screen by checking older versions, and viewing all downloadable assets. 30 bitmap images 0
Update snack result's name, 1x, 2x, 3x
description, and image from
Simit to Baklava 9 vector images Sy
_ J optimized vectorimages .y,
[ ] 1:14 PM b
Initial marketplace export & Click here to view an older version of < Search result detail
the same design. Download individual assets
The story begins here! Icons
i * 12ptx12pt
Versions” panel lists the
changes on this screen over B (R
time ! s Icons
: 1Y X O
e M 12pt x 12pt
’ Icons
24pt x 24pt
: — System / Modal Card Stack Mask
—
Ba klava @ 390pt x 66pt
ZEE o Masters / Status Bar Parts / A..
$'|2.99 *#50 ©3Im
< Icons
. 24pt x 24pt
Baklava is a layered pastry dessert made e
of filo pastry, filled with chopped nuts, and & [CONS
sweetened with syrup or honey. It was Sl 24pt x 24pt
one of the most popular sweet pastries of
Ottoman cuisine. . cons
25pt x 24pt .0‘
X — 100% <+ g9 Hide Components v EF Add comment m Show All v f=
Ciomed 1 00a o~ It All A fomm
|* Workspace Q Search workspace ’_ !
Projects  Styleguides
This is your workspace where you can access your projects and styleguides. If your team is already using
Zeplin, you can ask for an invitation. If you're looking to publish designs, you can create a project.
Check out a sample project to see Zeplin in action without uploading your own designs.
View a sample project
@ Sample Project
i0S 2m
Snack Overflow App
06000
-
Dn(]
|* < Dashboard < Market - Search - Result > Q Search workspace Q !
<Back
Dig into the details &
= Assets =
Simply click on the screen to access specs such as fonts, colors, components, component
variants, assets and paddings.
Learn how you can collaborate with your team by viewing a comment added by others, seeing
the history of this screen by checking older versions, and viewing all downloadable assets. 5 0 A OO0 o
r8114 all = -1
< Search result detail
Download individual assets
& I_cons
L
\l o X ) I_cons
K e B
— . . | Icons
: — System / Modal Card Stack Mask
—
Baklava © :
« Masters / Status Bar Parts / A...
$'|2 99 +50 ®am
L]
< Icons
Baklava is a layered pastry dessert made e
&, See what has changed in the of filo pastry, filled with chopped nuts, and & [CONS
design since its last version. sweetened with syrup or honey. It was S —
© Gotit one of the mqst popular sweet pastries of
Ottoman cuisine. . cons
L o = —
— 100% + g9 Hide Components v Ef Add comment m Show All v .0‘
| Flomed 2 2om o~ bt asn Al A fomm
|* < Dashboard < Market - Search - Result > Q Search workspace " @
Version History <Back
See the user's journey |
> Assets =
Today Now that you understand the basics of viewing a screen’s details, head over to the Flows tab
to see how this screen fits into the overall user journey.
Download all assets
© Bran 1:14 PM
Go to Flows tab © Gotit! PNG 30 bitmap images v
Update snack result's name, 1x, 2x, 3% =
description, and image from
Simit to Baklava 9 vector images Sy
m gzafir;iqz:lgrvector images <
° 1:14 PM e
Initial marketplace export < Search result detail
Download individual assets
; ' -)‘“;%f = - .‘\\\ \
) s s\ L
The story begins here! i @& i & I1020r:s .
/8 4 jgr Y T x
“Versions” panel lists the »////_ / X R ’ ’
changes on this screen over : . ‘i’ o Wi
time. i 'J K *\ /5 o lcons
4 5., % 12pt x 12pt
> ... : Icons
' s 24pt x 24pt
: . . 4 System / Modal Card Stack Mask
Simit San 390pt x 66pt
ZEE o Masters / Status Bar Parts / A..
$10.99 *50 ©3Im
< Icons
o . 24pt x 24pt
Freshly baked, crunchy simit — a circular
bread coated with sesame seeds — filled & [eons
with white cheese, sliced tomatoes and Sl 24pt x 24pt
basil. It's the perfect companion to your
morning teal! Icons
9 . 25pt x 24pt -
< — 100% <+  BY Hide Components v Earlier version from today ..‘
Ciomed 1 00 o~ It in Al A fomm
|& { Dashboard Dashboard Flows Styleguide Q  Search workspace " ®
Snack Overflow App m
&> zpl.io/dxEnGrn = - T T T T T T T - T T TS ST - sT S SS S S TS S S S S S SS S S S S S S s ssms s
| . .
Groups Slide 1/ Welcome slide show Welcome - Main Login with email / Welcome
|
. Sign Up 814 T - 814 all > - 814 T -
|
B Onboarding |
B Marketplace |
| e
[ Tracking Delivery 4 S L J
| » A To Marketplac
B Payment | ° y VN
SNACK
| j?? w OVERFLOW Welcome back!
; 4
- S Steve_Donuto@gmail.com
| g
| @ HaveYoustTod6yl
| @ Sign In with Facebook
Hand-pickle high
ity snacis s
i} reviously
I P logged in?
@& SignInwith Apple By clicking "Create account’, | agree to SnackOverflow's TOS
| and Privacy Policy
|
.
|
|
|
Login with email / Welcome
|
8:14 ol o -
|
| first time sign up
|
e
| ?
! VN
|
| Welcome back!
| )
S Steve_Donuto@gmail.com -
- 5% + 4 FfT@Bee = (B @ NoOpenComments v ’.
' e oc
. 1
|* < Dashboard < Market - Search - Result > Q Search workspace Q ®
Cell / Modal title X
Dig into the details &
9
Simply click on the screen to access specs such as fonts, colors, components, component Component
variants, assets and paddings.
Cell / Modal title @
Learn how you can collaborate with your team by viewing a comment added by others, seeing From Local Styleguide
the history of this screen by checking older versions, and viewing all downloadable assets.
8:14 ull = Used in 10 screens in this project C—))
 Cell / Modal title &) ]
0
. pinned to left and top, fixed
< Search result detail A width and auto height
Q X: Opt Y: 54pt
i - ¥ i
\l " i‘ Width: 390pt Height: auto (73pt)
' : I I main axis: start
E ) P cross axis: start
Baklava ©
; ! Left: 16pt (spacing-m)
$'|2.99 #50 ©3Im Right: 16pt (spacing-m)
. E Top: 24pt (spacing-xl
i Baklava is a layered pastry dessert made 0 p: 24pt {spacingx)
i of filo pastry, filled with chopped nuts, and | Bottom: 24pt (spacing-xl)
i sweetened with syrup or honey. It was i )
i . i Gap: 16pt (spacing-m)
i one of the most popular sweet pastries of |
i Ottoman cuisine. i
Swift =
i Find itin a bundle i . cellModalTitleView:
Bran, 2 versions 33m — 100% <+ g9 Hide Components v ! EF Add comment m Show All v = :
' Behavior O C o
|* < Dashboard < Market - Search - Result > Q Search workspace Q !
<Back
Dig into the details &
= Assets =
Simply click on the screen to access specs such as fonts, colors, components, component
variants, assets and paddings.
Download all assets
Learn how you can collaborate with your team by viewing a comment added by others, seeing
the history of this screen by checking older versions, and viewing all downloadable assets. 30 bitmap images 0
1X, 2X, 3X =
Sald ul = @8
® 9 vector images oy
O =
| result detail - 9 optimized vector images
Hola @Bran! SVG ~41% smaller b
What should we show here when the image is
loading? In some cases, it could take up to 2s to T
A Download individual assets
load the image of the snack.
{ ) %»_ G Icons
W X 12pt x 12pt
Bran 1y ¥ s = .
. e o lcons
Let's use our default 'icSpinner' loading 12pt x 12pt
animation. Here's a demo: r—
; Icons
@ 24pt x 24pt
< search result detail System / Modal Card Stack Mask
390pt x 66pt
3Im ZEE o Masters / Status Bar Parts / A..
ed pastry dessert made e
| with chopped nuts, and ¢ lcons
e 24pt x 24pt
S yrup or honey. It was
opular sweet pastries of |
o cons
et 24Dt x 24pt
Baklava
. Icons
ndle 25pt x 24pt ™
Bran, 2 versions 33m Reply & G & Add comment @ ShowAll v -
Behavior tmmm
T -
|* < Workspace Dashboard Flows Styleguide Q  Search workspace Q !
#= Sections v Q Filter by name Snack Overflow App
i0S, 1x
Congrats — it looks like you know your way around here! #
Now that you understand the basics from this sample project, let's start collaborating with your team. Invite your teammates to this project
so they too can experience the value of Zeplin, or create a new project if you want to publish your own designs. Description
Invite teammates Create a project Q Got itl PM: Jan
Dev: Zo
Design: Bran
A consumer-facing app that serves
A In Copy Review @ Approved Copy Deployed to staging for QA # In Development Untagged our mission of saving humanity, one
shack at a time.
+ Add tag grou
9.9retp This project contains screens for
the key flows of the application,
ranging from signup to tracking
Flows delivery.
o3 28 Screens >
Integrations
Market ﬁ @ v e ° Connected to Jira
Attach an issue
Search and purchase the snack or snack bundles.
© S0-94
814 i > - _ s% Connected to dev-snack-overflow-...
< Search result detail
Extensions =
Recent users’ bundles
Swift and Attributed Strings
TN T RS
S (S = T %
S - ki i
<y A . .t 8 | Members =
® ML O F -
Japaneses... Simitlovers  Fruitjelly n Invite
*50 ©3m *50 ©22m *43 ©l15m Baklava ."
Top 3 popular bundles €19 QO +cr on g @
|* Workspace Q Search workspace Q !
Projects  Styleguides
This is your workspace where you can access your projects and styleguides. If your team is already using
Zeplin, you can ask for an invitation. If you're looking to publish designs, you can create a project.
Check out a sample project to see Zeplin in action without uploading your own designs.
View a sample project
-~ ~ B L e
N = =/ .. Sample Project
] Ay S~ o
s Ny~
LA ey
i0S 2m
Snack Overflow App
©6000
-
Ox(]
|* < Workspace Dashboard Flows Styleguide Q Search workspace Q [C]
$=  Sections v Q Filter by name
Welcome to Snack Overflow App! &
This is a sample project dashboard where you can find all the screens related to this project. Here, you can use organization features like
tags and sections to provide structure and clarity to designs.
Let’s take a closer look—click on the highlighted screen to see more details about it.
A In Copy Review @ Approved Copy Deployed to staging for QA % In Development Untagged
+ Add tag group
Market ﬁ x) Let's click on this screen @ v o
Search and purchase the snack or snack | to see more details.
8:14 all = @m) r 8:14 ull = @ N
< Search result detail
Recent users’ bundles
o2 Pl TR (8
S = F I |4 y
= © =
Japaneses... Simitlovers  Fruitjelly
#50 ©30m *50 ©32m *43 O5m Baklava
Top 3 popular bundles $12.99 = oo
Baklava is a layered pastry dessert made
of filo pastry, filled with chopped nuts, and
Turkish tea time bundle sweetened with syrup or honey. It was
one of the most popular sweet pastries of -
Ottoman cuisine. ..‘
|* < Dashboard < Market - Search - Result > Q Search workspace Q !
Share: zpl.io/EmQO7pZ8
N Dig into the details & View in Stage Mode &
Simply click on the screen to access specs such as fonts, colors, components, component .
variants, assets and paddings. File: Demo file - SnackOverflow App [0.. £
€ Connected to Jira. Attach an issue
r8:14 all = -1 Annotations
Behavior
-, CllCK onAthe screen to view layer < search result detail ‘
details like fonts, colors, etc. @ Behavior Bran, 1y
When a user clicks the bookmark icon, add the
snack bundle to their Wishlist.
‘ s
L AR
R B
Baklava ©
$'|2 99 +50 ®am
o
Baklava is a layered pastry dessert made e
of filo pastry, filled with chopped nuts, and
sweetened with syrup or honey. It was
one of the most popular sweet pastries of
Ottoman cuisine.
Reusable components N
Using 19 components in this screen
Find itin a bundle o ™0
Bran, 2 versions 33m  — 100% + BB Hide Components v Ef Add comment @ ShowAll v 10 exportable layers -
| . Behavior


Deleting a version

pageType: Application Application Application Application Application

screenKeywords:
* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
o @ jsmithm.. ° e Copy version web link
3 Annotations
changed button colour, Copy version App URI |
design shows horizontal @D Requirement  Animation
pics layout
Delete version 0 @ Requirement jsmith.mobbin2... 55m
note that stroke weight has changed, its 2px
® 225PM JOneO now
Got any notes?
SAN FRANCISCO, CA @ Animation jsmith.mobbin2... 53m
ENTER COMMIT MESSAGE ,
gradient fills up when app opens
The story begins here!
“Versions” panel lists the Requirement
changes on this screen MESSAGE O :
over time.
T e et
o Q G.Animation 8
Reusable components N
— No reusable components yet
Assets ."
X — 89% <+ B3 Nocomponentsyet v Ef Addcomment @@  Show All v o B =
|* < Dashboard Profile > Q Search workspace ’_ @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode 5]
Today 9:27 ol T =.
File: Figma basics 8
o @ jsmithm.. [ oo
% Annotations
changed button colour,
design shows horizontal @) Requirement  Animation
pics layout
c @ Requirement jsmith.mobbin2.. 13m
note that stroke weight has changed, its 2px
® 275PM Jaoneo now
Got any notes?
SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
ENTER COMMIT MESSAGE ,
gradient fills up when app opens
The story begins here!
“Versions” panel lists the Requirement
changes on this screen MESSAGE O
over time
BB % AL
o Q Enimatlcil 8
Reusable components 5
No reusable components yet
N . N Assets ...
X — 89% + B2 Nocomponents yet v Ef Addcomment @@  Show All v e =
|Delete version?
Deleted versions cannot be restored.
CANCEL
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
° @ jsmith.mo.. 3:09 PM
3 Annotations
changed button colour, |
design shows horizontal @D Requirement  Animation
pics layout
0 @ Requirement jsmith.mobbin2.. 13m
note that stroke weight has changed, its 2px
® 225PM JOneO now
Got any notes?
SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
ENTER COMMIT MESSAGE ,
gradient fills up when app opens
The story begins here!
“Versions” panel lists the Requirement
changes on this screen MESSAGE O
over time.
T e et
o Q G.Animation 8
Reusable components N
— No reusable components yet
Assets ."
X — 89% <+ B3 Nocomponentsyet v Ef Addcomment @@  Show All v o B =
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
° @ jsmith.mo.. 225PM -
L\ = Annotations
Got any notes? e‘ NASY | 4
A3 = @) Requirement  Animation
ENTER COMMIT MESSAGE X I B
0 @ Requirement jsmith.mobbin2.. 55m
The story begins here! note that stroke weight has changed, its 2px
“Versions” panel lists the JOnee now
changes on this screen
S il SAN FRANCISCO, CA @ Animation jsmith.mobbin2... 53m
gradient fills up when app opens
Requirement
‘ MESSAGE O | ;
p, £F P .,i]
/ \ |
-
| 1 < » B
- 1 s |
AY
- W
~ y P
3 3
t i~ -
[ - SSSSmmm S S
o Q G.Animation 8
Reusable components N
— No reusable components yet
. . » . Assets ."
X — 89% +  Bd Fetching.. v Ef Addcomment @@  Show All v o B =


Editing project name

hotspotType: Keyboard Input

screenPatterns:
Other Content
Edit

screenKeywords:
Q < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name Untitled
Web, 1x
ﬁ' Add tags to organize and filter screens. view Release + Add tag (]
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - Descrlptlon
b Chats Chats
Got any notes?
) . N James
! Reg | Ste r "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations ®
Jore
SAN FRANCISCO, CA Beth Williams
e " e
.
Rev Shawn -
shoot next week.
. What's in design = in code
Pl ¥, %]
/ o) ‘ Sync your reusable components
,ﬁ with your Storybook instances.
- 1 «"1 :
oo Connect to Storybook
..V e
3 } Learn more Q Gotit!
L e
You can also connect to tools you
@ Q ° o & use everyday; like Jira, Slack,
Microsoft Teams, Trello and
. Storybook.
Profile now  Register now  Chats now  Chats mockup now y
o+ w@H
9:27 wll T - 9:27 wll T - 9:27 wll T - = % L
< James BROWSE ALL B ‘\“\ Extensions =
o Search N Sl
. B L i A CSS and HTML ()
A~ ' \ A £ -«
ly love your most recent photo. I've been A 3 ™, \
trying to capture the same thing for a few 8 \\\&\\ l P \ b 1
- - R A\ 4 doas ™ b
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name Untitled
Web, 1x
ﬁ' Add tags to organize and filter screens. view Release + Add tag (]
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - Descrlptlon
b Chats Chats
Got any notes?
% . N James
Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations ®
Jore
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
ilky Ih: 6D with a 24-1001 "
Rev Shawn ° .-;!_' o m B
Wanted to ask if you're available for a portrait
Extensions =
oy " CSS and HTML
! b >
Members =
Invite
o o @ o s =
Profile 6m  Register 50m  Chats 50m  Chats mockup 50m
9:27 wll T - 9:27 wll T - 9:27 wll T - ‘._.- % L
< James BROWSE ALL . t\‘\a}
ROCT Search e TR \* R
P\ Really love your most recent photo. I've been AW \\. “ Y F iy, -
trying to capture the same thing for a few \\\a . ‘ i Hons "&’». . -
|* < Workspace Dashboard Flows Styleguide Q Search workspace ’_ @
Sections v Q Filter by name MVP
Web, 1x
& Add tags to organize and filter screens. view Release + Add tag o
9:27 wll T . 9:27 wll T . 9:27 wll T . 9:27 wll T . Descrlptlon
“ Chats Chats
Got any notes?
Y . > James
Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations ®
Jane
SAN FRANCISCO, CA Beth Williams Connect to tools you use everyday;
‘ g s b ke Jira, Slack, Microsoft Teams,
ilky I hi 6D with a 24-1001 e
Rev Shawn o+ @A
' Wanted to ask fyou'e available for  portrit
shoot next week.
Extensions =
e : CSS and HTML
Members =
Invite
N X .
Profile 6m  Register 50m  Chats 50m  Chats mockup 50m
. .
9:27 all T - 9:27 all T - 9:27 all T - ™
< James BROWSE ALL m \
A1 7 Search i N -
s - Dn(
@' Realylove your most recent photo. I've been M \\ K h "‘
trying to capture the same thing for a few A\ l H dong L%, o p
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name —MVP
Web, 1x
ﬁ' Add tags to organize and filter screens. view Release + Add tag (]
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - Descrlptlon
b Chats Chats
Got any notes?
% . N James
Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations ®
Jore
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
ilky Ih: 6D with a 24-1001 "
Rev Shawn ° .-;!_' o m B
Wanted to ask if you're available for a portrait
Extensions =
oy " CSS and HTML
e 9 "
Members =
Invite
o o @ o s =
Profile 7m  Register 5Tm  Chats 5Tm  Chats mockup 5Tm
9:27 wll T - 9:27 wll T - 9:27 wll T - ‘._.- % L
< James BROWSE ALL . t\‘\a}
ROCT Search e TR \* R
P\ Really love your most recent photo. I've been AW \\. “ 3 Y F iy, -
trying to capture the same thing for a few k\\a . ‘ i Hons "&’». . -
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name Untitled
Web, 1x
ﬁ' Add tags to organize and filter screens. view Release + Add tag (]
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - Descrlptlon
b Chats Chats
Got any notes?
% . N James
Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations ®
Jore
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
ilky Ih: 6D with a 24-1001 "
Rev Shawn ° .-;!_' o m B
Wanted to ask if you're available for a portrait
Extensions =
oy " CSS and HTML
! b >
Members =
Invite
o o @ o s =
Profile 6m  Register 50m  Chats 50m  Chats mockup 50m
9:27 wll T - 9:27 wll T - 9:27 wll T - ‘._.- % L
< James BROWSE ALL . t\‘\a}
ROCT Search e TR \* R
P\ Really love your most recent photo. I've been AW \\. “ Y F iy, -
trying to capture the same thing for a few \\\a . ‘ i Hons "&’». . -


Editing code settings

screenElements: Dialog Select

screenKeywords:
* < Dashboard Profile > Q Search workspace " @
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
o | | ] #black
. : . #000000 ©
< Extensions CSS Explore extensions
Developed by zeplln o
Generates CSS snippets from colors, text styles and layers.
zeplin.io + github
Jane
Settings
css =
-+ Color format HEX v
v {
Variable name format kebab-case v . N . i
l Dimensions : v Co'?fortaa;
Unitless line-height . o A3
[ Default values . cing: -9. 5
o : (--black);
Display resources from linked and parent styleguides g
HTML =
4 Use“rem” unit
i . NELTE
Show padding, margin estimations (experimental) .
REMOVE DONE
T i
o —
i § Da(]
jsmith.mob... , 1 version 18m — 100% <+ g9 No components yet v D 8 EF Add comment @ Show All v f=
|* < Dashboard Profile > Q Search workspace " ®
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
- 5 5 | #black
. : . #000000 ©
< Extensions CSS Explore extensions
Developed by zeplln o
Generates CSS snippets from colors, text styles and layers.
zeplin.io + github
Jane
Settings
CSS =
-+ Color format Default v
v {
Variable name format kebab-case v . N . i
l Dimensions : v Co'?fortaa;
Unitless line-height . o A3
[ Default values . cing: -9. 5
Display resources from linked and parent styleguides g
HTML =
4 Use“rem” unit
i . NELTE
Show padding, margin estimations (experimental) .
REMOVE DONE
T i
o —
jsmith.mob... , 1 version 15m — 100% <+ g9 No components yet v D 8 EF Add comment @ Show All v f=
|* < Dashboard Profile > Q Search workspace " -
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
5 5 #black
27 ! ! all ¥ @)
° ; ; W - . #000000 S)
p S : Content
X )
W2 Jane
e 0 §A
| x| css =
Jane -
SAN FRANCISCO, CA . : ;
* : Comfortaa;
s : ,
: : ;
| i 4
LS 5 Ifq
: ’ HTML =
[ N ‘ ¥ .‘4
i R | “‘1i : Jane
TA Yy
a4 W
-4 —_—
i )
¥ ‘ Ry =
o —
jsmith.mob... , 1 version 15m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment M Show All v -«
|* < Dashboard Profile > Q Search workspace " @
Size: 36px
Align: Center Vertical Align: Center
S : : B Letter Spacing: -0.54px
< Extensions CSS Explore extensions #black
. #000000 ©
Developed by zeplin
Generates CSS snippets from colors, text styles and layers.
zeplin.io + github Content
Settings Jane
-+ Color format HEX v
css =
Variable name format kebab-case v . ¢
l Dimensions O : v Co'?fortaa;
Unitless line-height O . o A3
[ Default values . cing: -9. 5
o : (--black);
Display resources from linked and parent styleguides g
HTML =
4 Use“rem” unit
i . NELTE
Show padding, margin estimations (experimental) .
REMOVE DONE
T i
o —
jsmith.mob... , 1 version 18m — 100% <+ g9 No components yet v D 8 EF Add comment @ Show All v f=
|* < Dashboard Profile > Q Search workspace " ®
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
5 5 #black
. : . #000000 ©
< Extensions CSS Explore extensions
Developed by zeplln o
Generates CSS snippets from colors, text styles and layers.
zeplin.io + github
Jane
Settings
css =
Color format Default Defautt Vil
HEX ) {
Variable name format kebab-case RGB v . . .
Dimensions HSL : v COTfortaa;
Unitless line-height . o A3
| Default values . cing: -9. 5
Display resources from linked and parent styleguides g
HTML =
4 Use“rem” unit
i . NELTE
} Show padding, margin estimations (experimental) .
REMOVE DONE
o —
I § Da(]
jsmith.mob... , 1 version 18m — 100% <+ g9 No components yet v D 8 EF Add comment m Show All v f=


Searching workspace

screenElements:
Floating Action Button
Chip

screenElements:
Chip
Search Bar

screenElements:
Floating Action Button
Chip
Chip
Search Bar
Keyboard Key

screenPatterns: Home Search

pageType: Application Application Application Application Application Application

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace ’ ]
-
Mobbin Home
5 projects, 1 styleguide, 2 members
Projects  Styleguides
#= Sections v All v Q Filter by name ’ Create Project | v
Welcome to your team's workspace! # Learn more
This is your workspace where you can access the team’s projects and styleguides. You caj Share feedback
projects below or create a new project.
Q Gotit!
Web v -
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 il = -
A
Ranictar
WEB 18m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
<
® O ® ® ® 6!
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters
|* ° Mobbin Home's Workspace v Q 8+K ’ ]
-
Mobbin Home
5 projects, 1 styleguide, 2 members
Projects  Styleguides
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
Web v
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 il -
o
Ranictar
WEB 18m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
-
® O ] ] ] D
|* ° Mobbin Home's Workspace v Q, Search workspace ’ ]
-
Mobbin Home
5 projects, 1 styleguide, 2 members
Projects  Styleguides
= . i on )
°= Sections v All v Q Filter by name Create Project | v
All Projects Sections Comments Components
Welcome to yot Give us feedback
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
Q Gotit!
Web S o
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 il T -
o
Ranictar
WEB 18m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
-
® O ® ® ® 6!
|* ° Mobbin Home's Workspace v Q, Search workspace ’_ !
Mobbin Home
5 projects, 1 styleguide, 2 members
Projects  Styleguides New -
= on (%]
°= Sections v All v Q Filter by name
Screens Projects Sections Comments Components Relevance v
Welcome to yo Onboarding Flow, Web :
you = oy Project
This is your wo join the
projects below ( 1 .ot
€ Gotit!
Web v -
5projects - 1 styleguide - 5> Resources - <8 References - Add link
All web app related material
Show more
9:27 all F .
«
Ranictar
WEB 18m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
-
® 9 L} L} L} "
|* ° Mobbin Home's Workspace v Q, Search workspace ’ ]
-
Mobbin Home
5 projects, 1 styleguide, 2 members
Projects  Styleguides
| +
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
Web S o
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 il -
o
Ranictar
WEB 18m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
<
® O ® ® ® LR


Editing notification settings

screenElements:
Dropdown Menu
Avatar

screenElements: Switch Checkbox

screenElements:
Dialog
Floating Action Button
Chip
Dropdown Menu
Avatar
Combobox
Switch
Checkbox

screenPatterns:
Settings & Preferences
Home

pageType: Application Application Application Application Application Application Application

screenKeywords:
Notification Settings

Send me desktop notifications »
Send me email notifications
Follow projects
You will receive email notifications only from the
projects you choose to follow

6 projects followed v
Email Preferences
You will receive emails of the following types
from the projects you have joined
Screens added
New screens added to projects
Screens updated
Version added to a screen
Coamment renlies
|Notification Settings

Send me desktop notifications ]
Send me email notifications
Follow projects
You will receive email notifications only from the
projects you choose to follow

4 projects followed v

Q Search for a project

Select all projects

Personal Workspace

Production, Web

Mobbin Home

Dashboard filters, Web

MVP, Web

Onboarding Flow, Web
|Notification Settings

Send me desktop notifications »
Send me email notifications
Follow projects
You will receive email notifications only from the
projects you choose to follow

4 projects followed v
Email Preferences
You will receive emails of the following types
from the projects you have joined
Screens added 0O
New screens added to projects
Screens updated
Version added to a screen
Comment renlies
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters
|* ° Mobbin Home's Workspace v Q, Search workspace ’ @
-
s= Sections v Al v Q Filter by name jsmith.mobbin2@gmail.com I
jsmith.mobbin2@gmail.com
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the :
. " Mobbin Home
projects below or create a new project.
Team Workspace
()
Notification Settings
Web
Log out
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 wll T ==
o
Ranictar
WEB 38m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
WEB 2d ."
-
Dashboard filters
|Notification Settings

Send me desktop notifications ]
Send me email notifications
Follow projects
You will receive email notifications only from the
projects you choose to follow

6 projects followed v

Q Search for a project

Unselect all projects

Personal Workspace

Production, Web

Mobbin Home

Dashboard filters, Web

MVP, Web

Onboarding Flow, Web
|Notification Settings

Send me desktop notifications »
Send me email notifications
Follow projects
You will receive email notifications only from the
projects you choose to follow

6 projects followed v
Email Preferences
You will receive emails of the following types
from the projects you have joined
Screens added 0
New screens added to projects
Screens updated
Version added to a screen
Coamment renlies


Adding tags to screen

actions:
Adding & Creating
Searching & Finding

hotspotType: Right Click

screenElements:
Dialog
Context Menu

screenPatterns:
Add & Create
Search
Action Option

screenKeywords:
* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Approved: Empty states
Status: @ In Review @ Blocked @ Released
Enter a tag
+ Add tag group Description
No tags on this screen yet, add one!
Approved Overview of the basic screens
9:27 wll T . 9:27 wll T .
- Empty states
' Register  status I
9 [very hetpfu Integrations ®
© InReview @ Blocked @ Released
Email address Connect to tools you use everyday;
Others  get the funds. like Jira, Slack, Microsoft Teams,
Jone Create password Trello and Storybook.
SAN FRANCISCO, CA * Add tag ° '-;l-. * m B
- round capturing the
FOLLOW JANE
Extensions =
“ fre available for  portait
CSS and HTML
. Members =
’q%n i sl DONE
B & s ;
2 'H e B i) Invite
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h =
Ox(]
9:97 e e 9:97 e e 9:97 e e m b "\.\&;‘L b
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Approved: Empty states
Status: @ In Review @ Blocked @ Released
empty
+ Add tag group Description
No tags on this screen yet, add one!
Approved Overview of the basic screens
9:27 wll T . 9:27 wll T .
- Empty states
' Register  Others N
9 [very el Integrations ®
@ Create new tag "empty”
Email address Connect to tools you use everyday;
 get the funds. like Jira, Slack, Microsoft Teams,
Jone Create password Trello and Storybook.
SAN FRANCISCO, CA ° '-;l-. * m B
- round capturing the
FOLLOW JANE
Extensions =
“ fre available for  portait
CSS and HTML
: & Members =
, ﬂgh : | DONE
X e8 | A
2 'H e e Invite
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h =
Ox(]
9:97 e e 9:97 e e 9:97 e e % b “’L |
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Approved: Empty states
Status: @ In Review @ Blocked @ Released
Enter a tag
+ Add tag group Description
Approved: Empty states @
Approved Overview of the basic screens
9:27 wll T . 9:27 wll T .
.
' Register  status I
9 ey hewnl Integrations ®
© InReview @ Blocked @ Released
Email address Connect to tools you use everyday;
Others  get the funds. like Jira, Slack, Microsoft Teams,
Jone Create password Trello and Storybook.
+ Add tag .
SAN FRANCISCO, CA O it w @B
- | —
FOLLOW JANE
Extensions =
“ fre available for a portrait
CSS and HTML
. Members =
"q b i sl DONE
LR o Invite
Profile Th  Register 2h  Chats 2h  Chats mockup 2h =
Ox(]
9:97 e e 9:97 e e 9:97 e e m b "\.\&;‘L b
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Approved: Empty states
Status: @ In Review @ Blocked @ Released
+ Add tag group Description
Overview of the basic screens
9:27 wll T - 9:27 wll T - 9:27 wll T . 9:27 wll T -
a Cha Copy web link Chats
o) Register . :
@ 9 Copy App UR| u! That was very helpful! Integrations @
¥ Connect to tools you use everyday;
Add tag... ' trying to get the funds. like Jira, Slack, Microsoft Teams,
SAN FRANCISCO, CA Set as screen variants ams O 3t @ H
g for tips around capturing the
FOLLOW JANE
Create Section Extensions =
“ > askif you'e available for a portrat
tweek. CSS and HTML
Add to Flow
. 3 View in Stage Mode Members =
T ——
A ] T Pt . Invite
Move screen to project...
- - Download screen image
o Q D &
° Set as thumbnail
Profile Th  Register 2h  Chats 2h —
Delete screen ..‘
9:97 P 9:97 P 9:97 Py ————r . A,
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Approved: Empty states
Status: ¢ In Review @ Blocked @ Released
+ Add tag group Description
Overview of the basic screens
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T -
a Chats Chats
% . N James
Register i Thtvas very holotull
@ 9 "‘ Thank you! That was very helpful! Integrations @
Will Kenny Connect to tools you use everyday;
ﬂ I know... 'm trying to get the funds. like Jira, Slack, Microsoft Teams,
SAN FRANCISCO, CA Beth Williams ° _-;:_. ﬁ m B
_ milky way. | have a 6D with a 24-100mm...
FOLLOW JANE
Rev Shawn Extensions =
shoot next week. CSS and HTML
& ; Members =
"W T Invite
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h =
On(]
9:27 Sl = . 9:27 Sl = . 9:27 Sl = . ﬂ% “"‘. |


Highlighting version changes

pageType: Application Application Application Application

screenKeywords:
* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 ol T @m)
File: Figma basics 8
3 Annotations
m Requirement  Animation
@ Requirement jsmith.mobbin2@g... 2h
note that stroke weight has changed, its 2px
Jane now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
gradient fills up when app opens
a B 6 P s (e G
- N ¥ vep B 1 oy
s Feeitih - e
Reusable components N
— No reusable components yet
S . L o o0 Wi N Assets ."
jsmith.mobb..., 2 versions 1h | 7\ Highlight changes New - 8% + 58 Hide Components v = Add comment @ Show All v 5 exportable layers -
|* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 ol T @m)
File: Figma basics 8
3 Annotations
m Requirement  Animation
0 @ Requirement jsmith.mobbin2... 56m
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2... 54m
gradient fills up when app opens
Requirement :
‘ MESSAGE O | ;
A W o P iR
»n n Eriai g I =5
L B - SS
o Q G.Animation 8
Reusable components N
— No reusable components yet
o . . o . Assets ."
jsmith.mob... , 1version now — 89% + 88 Nocomponents yet v EY Add comment @ ShowAll v 4 exportable layers -
|* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 il  @m
File: Figma basics 8
3 Annotations
Requirement  Animation
@ Requirement jsmith.mobbin2@g... 2h
note that stroke weight has changed, its 2px
Jane now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
1 3 gradient fills up when app opens
)
- = )
FE ]
is 2 8 :
i e
k
l“l
sl Tl Pl 1Tanl
(@1 12 121 12N
[ o I o - Reusable components
[ 1 — — 1| >
L mn ] No reusable components yet
S . o o o0 Wi N Assets ."
jsmith.mobb..., 2 versions 1h FONECIIEMEGEREES New | —  89% 4+  BI Hide Components v Ef Addcomment @&  ShowAll v SR R -
|* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 ol T @m)
File: Figma basics 8
3 Annotations
m Requirement  Animation
o @ Requirement jsmith.mobbin2@g... 2h
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
gradient fills up when app opens
Requirement
‘ MESSAGE .5*
) ﬁr i A :ﬁ_v4 Rt R
o Q G.Animation 8
Reusable components N
— No reusable components yet
- A G o o0 Wi - Assets ."
jsmith.mobb..., 2 versions 1h | 7 Highlight changes [ — 89% + 58 Hide Components v & Add comment m Show All v 5 exportable layers -


Moving a project

screenKeywords:
Cancel 1 project selected Move to section... Change status to...
Mobile
#= Sections v All v Q Filter by name B
Web v e
5 projects - No linked styleguides - <S> Resources - <5 References - Add link
All web app related material
Show more
g
a
Ranictar
WEB 5Tm WEB m WEB now WEB now
MVP Onboarding Flow Sign up Setting up device
89 L] L] L]
WEB now
Dashboard filters
-
) 0
Mobile v e -
|* ° Mobbin Home's Workspace v Q, Search workspace ’ !
#= Sections v All v Q Filter by name
Web v e
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material
Show more
9:27 wll T .
o
Ranictar
WEB 5Tm WEB m WEB now WEB now
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
WEB now
Dashboard filters
Mobile v e -
Ox(]
Add link
|* ° Mobbin Home's Workspace v Q, Search workspace ’ !
#= Sections v All v Q Filter by name
WEB 5h WEB 5h WEB 5h WEB 22m
Onboarding Flow Sign up Setting up device Dashboard filters
= Mobile v e
1 project - No linked styleguides - Add link
All mobile related material V4
9:27 il = -
“
Ranictar
WEB 5h
MVP
L
-
(]
|* ° Mobbin Home's Workspace v Q, Search workspace ’ !
#= Sections v All v Q Filter by name
Web v e
1 project - No linked styleguides - <5 Resources - <& References - Add link
All web app related material
Show more
9:27 wll T .
«
Ranictar
WEB 49m
MVP
® 9
Mobile v e
Add link
All mobile related material
® No projects yet. Move projects to this section by dragging and dropping.
-
On(]
|Cancel 1 project selected Move to section... Change status to...
#= Sections v All v Q Filter by name
Web v e
5 projects - No linked styleguides - <S> Resources - <5 References - Add link
All web app related material
Show more
g
a
Ranictar
WEB 5Tm WEB m WEB now WEB now
MVP Onboarding Flow Sign up Setting up device
89 L] L] L]
WEB now
Dashboard filters
-
) 0
Mobile v e -


Notifications

screenPatterns:
Notifications
Empty State

screenPatterns:
Notifications
Comments
Multi-Column Layout
Home
Notifications
Empty State

screenKeywords:
* < Mobbin Home’s Workspace Notifications Q Search workspace ’ ®
g2 All .
4 You got 1 new update. Mark as read Profile Go to screen >
Comments
jonsmith.mobbin@gmail.com replied to ® Comment 1- » 9:27 Wil T .
Screens Profile
| think we could reduce the padding between the
[ Styleguide elements Y
O Tags @ MVP - Web 4m
ees Others o
Jane
All Projects and Styleguides SAN FRANCISCO, CA
T ProjECts
v Pinned Projects
MVP, Web '~ '
v Web - p” ' b
MVP, Web L
Only show Projects with up... L . .
@ jsmith.mobbin2@gmail.com 6m
@jonsmithmobbin what do you think?
@ jonsmith.mobbin@gmail.com 4m
| think we could reduce the padding between the elements
On(
Resolve Mark as Read =N
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters
|* < Workspace Notifications Q Search workspace ’_ !
Comments
Screens
[ Styleguide
O Tags
n
PSS
ees Others
There are no notifications.
All Projects and Styleguides
Only show Projects with up...
-
Ox(]
|* < Mobbin Home’s Workspace Notifications Q Search workspace ’_ !
g2 All
“ You got 1 new update. Mark as read
Comments
jonsmith.mobbin@gmail.com joined styleguide Untitled o
Screens
@ Untitled - Web now No preview
[ Styleguide
This notification does not have a preview.
O Tags jonsmith.mobbin@gmail.com replied to ® Comment 1 -
il Mark as Read
«es Others I think we could reduce the padding between the
elements
@ MVP - Web 2d
All Projects and Styleguides
Only show Projects with up...
v Joined Styleguides
Untitled, Web
-
Ox(]


Styleguide

screenElements:
Top Navigation Bar
Grid List

screenPatterns:
Multi-Column Layout
Empty State
Other Content
Empty State

screenKeywords:
* < Mobbin Home’s Workspace Dashboard Flows Styleguide Q, Search workspace " ®
CSS =
¢ Color palette .
Local Styleguide Rl - cfont-face { Sy
Local Styleguide * : Comfortaa;
) * : (Comfortaa-
Untitled Regular),
O url(/path/to/Comfortaa-
Aa Text style catalog 1 I Comfortaa, Regular, 36px @ #black Regular.woff2)
Tlt e—3 6 pX Center, Letter spacing: -0.54px ( IE
i Spacing and layout . url(/path/to/Comfortaa-
Regular.woff)
Text Style Roboto, Black, 13px @ #black ( ),
g0 Components Center, Letter spacing: 0.52px o url(/path/to/Comfortaa-
Regular.ttf)
( ik
N
¢ @font-face {
U : Roboto;
O : (Roboto-Black),
O url(/path/to/Roboto-
Black.woff2)
( )5
O url(/path/to/Roboto-
Black.woff) ( ),
O url(/path/to/Roboto-
Black.ttf)
( ik
N
* {
O : Comfortaa;
Export Design Tokens . ; :
. H (--black);
Linked to Untitled = c J
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " ®
rem
( Color palette .
Local Styleguide [J Use “rem’ unit
Aa Text style catalog
4 Spacing and layout
82 Components Spacing o
Add your spacing documentation here, using markdown. V4 CSss P
* :root { oy
Token Value Ratio Example DIt
+ Add first token
Export Design Tokens
Link to Styleguide @
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name Untitled
Web, 1x
- :
You can now group and reorder tags, assign screens to team members, and track status changes.
1. Tag groups: Sort your tag collections by type to make them easier to filter and navigate. L
2. Assignees & Status: Bulk-assign screens to teammates and update statuses as work progress. Description
Share feedback Q Gotit! Got any notes?
Untagged
+ Add tag group Integrations ®
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - E .. &
-
b Chats Chats
¥ H N James
] Re9|ster '.‘ Thank you! That was very helpfull What's in design = in code
Sync your reusable components
ﬂ Will Kenny with your Storybook instances.
I know... 'm trying to get the funds.
SAN FRANCISCO, CA Beth Williams .
‘ Learn more o Gotit
_ milky way. | have a 6D with a 24-100mm...
FOLLOW JANE
I You can also connect to tools you
' Wanted to ask if you're available for a portrait use everyday; like Jira, Slack,
shoot next week. Microsoft Teams, Trello and
Storybook.
[ SR .
e 2 o+ wmH
- ! «"1
A% Extensions =
‘.‘i -
A CSS and HTML ‘e
¥ i L)
|* < Mobbin Home’s Workspace Dashboard Flows Styleguide Q Search workspace Q !
(5 Color palette Sections v Q Filter by name
Local Styleguide
Untitled .
Local Styleguide
Aa Text style catalog )
1T Component ™
- Spacing and layout
Organize your components
o o @B o -
Local Styleguide Right click to organize your
components by creating sections or
roups.
Tab Bar el
‘ = New section from selection
New group from selection
Manage your component variants
Collect your components under
variant sections for developers to
access them during development.
Learn more.
€ Set as variant section
Export Design Tokens
-
Linked to Untitled = .0‘
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " ®
CSS =
& Color palette .
Local Styleguide - oot Sy
Aa Text style catalog . - . - .
N
- Spacing and layout
#black #reddish-pink
52 Components #000000 100% #ff2c5e  100%
rgb000 rgb 25544 94
Export Design Tokens
Linked to Untitled = @
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " ®
CSS =
& Color palette
* :root { oy
Aa Text style catalog y
- Spacing and layout
No colors yet. @&
F2 Components
You can organize and showcase your project colors here.
+ From a Styleguide (Recommended)
Use colors from a Styleguide by linking your project.
Link to Styleguide
* From Layers
Select a layer and click ($)+ next to the color.
- rgb 253, 89, 165 @
» From Design Tools
Download desktop app to export colors from design tools.
Export Design Tokens
Link to Styleguide @
|* < Mobbin Home’s Workspace Dashboard Flows Styleguide Q Search workspace ’_ !
(5 Color palette
Aa Text style catalog
i Spacing and layout No com ponents yet "vg\
Components are re-usable elements used throughout designs, crucial piece of your
design system. Store, organize and showcase project components here.
+ From a Styleguide (Recommended)
Use components from a Styleguide by linking your project.
Link to Styleguide
» From Design Tools
Download desktop app to export components from design
tools.
Export Design Tokens
-
Link to Styleguide ..‘


Inserting a mention

screenElements:
Status Dot
Badge

screenKeywords:
* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 ol T @m)
File: Figma basics 8
3 Annotations
° m Requirement  Animation
o i jsmith.mobbin2@gmail.com 2h
@ Requirement jsmith.mobbin2@g... 2h
Is this too much white space? | know we want it note that stroke weight has changed, its 2px
J ane e clean but I'm not sure about this now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
3 gradient fills up when app opens
: y
i
S
Requl -
‘ MESSAGE O}equ" - y 3
o Q G.Animation 8
Reusable components N
— No reusable components yet
Assets ."
jsmith.mobb..., 2 versions 1h | 7 Highlight changes [} — 89% + B2 Hide Components v Ef Addcomment @  ShowAll v SR R -
|* < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all T (m)
File: Figma basics 8
J % Annotations
° m Requirement  Animation
c i jsmith.mobbin2@gmail.com 2h
@ Requirement jsmith.mobbin2@g... 2h
Is this too much white space? | know we want it note that stroke weight has changed, its 2px
J ane e clean but I'm not sure about this now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
3 gradient fills up when app opens
: P
e
Requl -
‘ MESSAGE .}equ" - y 3
% : i @jonsmith.mobbin@gmail.com |
‘" l = 5‘,.*.;;_3‘_‘7 |l
A X | .
o Q G.Animation 8
Reusable components N
— No reusable components yet
Assets ."
jsmith.mobb..., 2 versions 1h | 7 Highlight changes [} — 89% + B2 Hide Components v Ef Addcomment @  ShowAll v SR R -
|* < Dashboard Profile > Q Search workspace ’_ @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode 5]
9:27 ol T .
File: Figma basics 8
/ ) Annotations
° @) Requirement  Animation
° ‘ jsmith.mobbin2@gmail.com 2h
@ Requirement jsmith.mobbin2@g... 2h
Is this too much white space? | know we want it note that stroke weight has changed, its 2px
J ane o clean but I'm not sure about this now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2h
3 gradient fills up when app opens
! y
=
Requir -
MESSAGE U -9 y 4
everyone =
Notify all project members
organization
Notify all workspace members
? . jsmith.mobbin2@gmail.co...
o jsmith.mobbin2@gmail.com
Animation
O jonsmith.mobbin@gmail.c...
jonsmith.mobbin@gmail.com Reusable components >
No reusable components yet
Assets ...
jsmith.mobb..., 2 versions 1h | 7\ Highlight changes (Bl — 89% <+ B2 Hide Components v Ef Addcomment @) ShowAll v = S avers -


Transferring project ownership

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace Q !
Sections v All v Q Filter by name Create Project | v
il A At B VI ey Al St v o S S
These are all the projects related to one product, the same product feature, or something in common.
® Development ©® Design © Discovery
1h 3d 7w
Sample Project Design Sample Project Wireframes Sample Project Explorations
Create Section
Individual Projects
Individual projects that are not assigned to a section.
9:27 il F .
N
Raonictar
WEB 38m
MVP
® 9
-
Ox(]
|* O Mobbin Home's Workspace v Q, Search workspace ‘_‘ !
Sections v All v Q Filter by name Create Project | v
e e U,
These are all the projects related to one product, the same product feature, or something in common
® Development ® Design © Discovery
1h 3d 7w
Sample Project Design Sample Project Wireframes Sample Project Explorations
Create Section
Invite...
Individua  Copy project web link
Individual proj action.
Copy project app URI
9:27 il T -
Make a copy...
N
. Transfer ownership... Ranictar

WEB NEB 36m
Copy of M Create a new section VIVP

Archive project
L} prol ® 9

Leave project

-
Delet: ject...
elete projec ...
|Transfer ownership of “Production” to
jsmith.mobbin2@gmail.com?
CANCEL
|* ° Mobbin Home's Workspace v Q, Search workspace ’_ !
Sections v All v Q Filter by name Create Project | v
il A At B VI ey Al St v o S S ey
These are all the projects related to one product, the same product feature, or something in common.
® Development ©® Design © Discovery
1h 3d 7w
Sample Project Design Sample Project Wireframes Sample Project Explorations
Create Section
Individual Projects
Individual projects that are not assigned to a section.
9:  You can only transfer your projectsto 5 T -

invited team members or workspaces.
«

To a member: A
R \Nictar

ﬁ jsmith.mobbin2@gmail.com
WERS = jsmith.mobbin2@gmail.com 38m
Pr L ) ) P

@ we'll notify them via email
L] ® 9

-
Ox(]


Canceling plan

screenPatterns: Cancel Feedback

hotspotType: Scroll Vertically

screenPatterns: Cancel Confirmation

screenPatterns: Cancel Confirmation Cancel Feedback Billing Cancel

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

screenKeywords:
Subscription cancelled successfully
Let us know if there's anything bothering you:
support@zeplin.io
|Cancel Plan

You can continue using your plan until your billing period

ends on August 7, 2023. Once the billing period ends, your

projects and styleguides will be archived automatically.
KEEP PLAN
|* < Workspace Members
Hi! Hope you're great today )
WORKSPACE BILLING DEVELOPER
Plan Details
Your subscription to the monthly Team plan has been cancelled—you can
continue using your plan until your billing period ends on August 7, 2023.
Once the billing period ends, your projects and styleguides will be archived
automatically. You can resubscribe to keep your projects and styleguides
active.
Card Details Payment History
Card ID Date Invoice
Kkkk dkkk kkkk 730() Change 9ADCC606-0001 2023-07-07 8 .
Billing Details
The invoices for this workspace is being billed to
jsmith.mobbin2@gmail.com.
Update billing Details
-
Ox(]
|Change plan
You can upgrade or downgrade to another plan, change your plan’s billing cycle or cancel your plan below.
Annually
Team Organization Enterprise
Best for small teams Best for medium size teams Best for large teams
$10 seatt/mo $20 seat/mo
12 seat minimum Custom Pricing
~ 12 Projects
E hi in T lus: f f A q .
 Flows (up to 6 projects) verything in Team, plus; Everything in Organization, plus;
< Unlimi . -
+ Team Workspace Unlimited Projects v Flows (unlimited)
v Fl to 12 ject
+ User Management oS (s U el o (RIS RS
P . ’ .
2 Uilfifies) Revienes Advanced User Permissions + Single Sign on (SSO)
o . . + Jira Server and Data Center + SCIM
+ Unlimited Version History Integration
+ Invoiced Billing
~ Priority Support
+ Dedicated Success Manager
+ 24hr Support SLA
Current plan  Cancel plan
|{ Plans
Why are you cancelling?
It's sad to see you go. Tell us why you're cancelling, maybe we can help!

Here at Zeplin, we value our community—if you're having financial/budgetary issues due to the
current state of events, please contact us at support@zeplin.io. We'd love to help.
O Subscribed with the wrong account or email address

e.g. "l used my personal email address.”, “I subscribed with my own account, instead of our designers.”
O Subscribed annually, instead of monthly
O Moved to a team plan
O Switched to another tool
O Ran into an issue

e.g. "I couldn't export my designs.”, “I failed to install the Photoshop plugin.”
O Too expensive

e.g. It's difficult to pay in USD
O Project ended, won't need Zeplin for a while
O Other
|Cancel Plan

You can continue using your plan until your billing period

ends on August 7, 2023. Oncle billing period ends, your

projects and styleguides will b€ archived automatically.
KEEP PLAN
|* < Workspace Members
Hi! Hope you're great today :)
WORKSPACE BILLING DEVELOPER
Plan Details
Monthly Team Plan
You're currently subscribed for 1 seat. Your plan will renew on August 7,
2023, for $10.00 ($10.00/seat per month)
Change your plan to upgrade, downgrade, cancel or switch billing frequency:
Change plan
Card Details Payment History
Card ID Date Invoice
Jokkok Kkkk okkok Change 9ADCC606-0001 2023-07-07 8 .4
Billing Details
The invoices for this workspace is being billed to
jsmith.mobbin2@gmail.com.
Update billing Details
-
On(]
|Here at Zeplin, we value our community—if you're having financial/budgetary issues due to the
current state of events, please contact us at support@zeplin.io. We'd love to help.
O Subscribed with the wrong account or email address

e.g. "l used my personal email address.”, “I subscribed with my own account, instead of our designers.”
O Subscribed annually, instead of monthly
O Moved to a team plan
O Switched to another tool
O Ran into an issue

e.g. "I couldn't export my designs.”, “I failed to install the Photoshop plugin.”
O Too expensive

e.g. It's difficult to pay in USD
O Project ended, won't need Zeplin for a while

Other

Mind sharing why? This'll help us improve Zeplin.
Notes on why you're cancelling
|{ Plans
Why are you cancelling?
It's sad to see you go. Tell us why you're cancelling, maybe we can help!
Here at Zeplin, we value our community—if you're having financial/budgetary issues due to the
current state of events, please contact us at support@zeplin.io. We'd love to help.
O Subscribed with the wrong account or email address
e.g. "l used my personal email address.”, “I subscribed with my own account, instead of our designers.”
O Subscribed annually, instead of monthly
O Moved to a team plan
O Switched to another tool
O Ran into an issue
e.g. "I couldn't export my designs.”, “I failed to install the Photoshop plugin.”
O Too expensive
e.g. It's difficult to pay in USD
O Project ended, won't need Zeplin for a while
@ Other
Mind sharing why? This'll help us improve Zeplin. @
Notes on why you're cancelling
|Here at Zeplin, we value our community—if you're having financial/budgetary issues due to the
current state of events, please contact us at support@zeplin.io. We'd love to help.
O Subscribed with the wrong account or email address

e.g. "l used my personal email address.”, “I subscribed with my own account, instead of our designers.”
O Subscribed annually, instead of monthly
O Moved to a team plan
O Switched to another tool
O Ran into an issue

e.g. "I couldn't export my designs.”, “I failed to install the Photoshop plugin.”
O Too expensive

e.g. It's difficult to pay in USD
O Project ended, won't need Zeplin for a while

Other

Mind sharing why? This'll help us improve Zeplin.
Just checking things ouf


Switching to dark mode

pageType: Marketing

pageType: Marketing Marketing Marketing Marketing

screenKeywords:
© omlet Explore our new product — component analytics for developers
€< Light mode _ -
O e i m
Increase header size Behavior
e Bring harmony to
_________________________________________________I onten hange:
% he trusted platform for unifying product development teams. 1 (=
| . . . .
I Communicate in context. Align teams. Build faster. :
‘ v1.3
Change header font Request a Demo >
[ ] < Back Dashboard Styleguide Q Search workspace ". .:‘ ')
Boards D New
v Main -
« zpl.io/noM5VNn
B Checkout
B Market Market - Ho. Default | Ma. Results/Ma Default / Se.
e P . P o e m
g'g..n - .
. IQ | é’ﬁ |
w : Find tina bundie
|© omlet Explore our new product — component analytics for developers
S Lightmode (JDERKIMGEE] -
‘ v2.0
Increase header size o
Bring harmony to
design deliver
The trusted platform for unifying product development teams.
Communicate in context. Align teams. Build faster.
o v13
Change header font Request a Demo >
[ ] < Main Flow < SearchResult > Q Search workspace ". .:‘ ')
< EE v/ Notification Share: zpl.io/g8KREB1
View in Stage Mode (%]
= File: Demo file - SnackOverflow App @
© SOF-10 IN PROGRESS
L3
< Search result detail Annotations
N i @D Requirement AP
Eii Requirement Berk, 1h
4 - ’:‘ —; ’ Image should be scaled to fit this height,
‘ F ‘av. 3 with respect to its aspect ratio.
7 ,'5 ) X ""\ 3 ® APl Berk, 1h
.-I‘“ " g Fetch delivery duration from this endpoint:
GET /item/{id}/delivery
={e]
I o Mithontiratinn roaci irord
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
. park mode ()
o H — @
ring harmony to
desi deli
API e e e e e e C - CC G C S s e
. H = Content Changed
v The trusted platform for unifying product development teams. :
| . . . .
! Communicate in context. Align teams. Build faster. ;
Get started Request a Demo -
@® ® @ < SearchResult Dashboard Flows Q Search workspace " Q e
Swift =
() Color Palette
. i <
L3 size: abo)t '
i Spacing and Layout 3}
- Poppins, Bold, 34pt 0 5 "
89 Components Large Title Line height: 42pt . SRl L )
size: 0)!
. . 3
v Button Title 1 Poppins, Bold, 28pt .
i Line height: 34pt . itle2: {
Primary : it ‘E%name: a
Secondary - Poppins, SemiBold, 22pt size: e
Search field Title 2 Line height: 28pt l !’
1 . title3: {
cons -+ Poppins, SemiBold, 20pt . u 1t (name: .
caronsel Title 3 Line height: 25pt g, size: 0)!
Card Headline Poppins, SemiBold, 17pt . headline: <
Bundle Line height: 22pt . u (name: ,
size: 17.0)!
Onboarding illustration Body Poppins, Regular, 17pt !
Stepper Line height: 22pt . body : {
Toast message * Lo \)fname: .
oas . ize: 17.0)!
L Callout Poppins, Regular, 16pt s 3
|© omlet Explore our new product — component analytics for developers
€< Light mode _
. Swift =3
v2.0 o
o . . hlview: UIView = {
Increase header size 5 view: UIView()
Change font weight . ) :
e view.widthAnchor.constraint(equalTo
Constant: 570.0) = true
(4 (4 ® view.heightAnchor.constraint(equalT
d eS I g n d e | I Ve ry oConstant: 146.0) = true
_____________________-__-__________________________I Content Changed
% he trusted platform for unifying product development teams. :
| . . . .
I Communicate in context. Align teams. Build faster. ]
‘ v13
Change header font Request a Demo >
[} < Back Dashboard Styleguide Q Search workspace " .:‘ ')
. New
Boards D
Main
« zpl.io/noM5VNn
sh Results / Market - Search default / Search Result
Dashboard < Qsweet
< Search result detail
. Checkout Search result
I Market i
L
|
Suggested i ‘
=2 $12.99
v L3
v
v 7 Find itin a bundle


Blog (in-app)

screenElements: Accordion Popover

screenElements:
Accordion
Popover
Table of Contents
Floating Action Button
Chip

screenPatterns:
Help & Support
Home

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team'’s projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
Web v -
5 projects - 1 styleguide - <5 Resources &> References - Add link
All web app related material
Show more
9:27 wll T .
o
Ranictar
WEB 1h WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting L Handy articles:
g g g g « Transferring projects between workspaces
« Publishing designs
+ Organizing projects with sections
+ Assigning roles to workspace members
+ Accessing workspace settings
Got another question? €
WEB 2d
Dashboard filters U
|a ) o - r
* ° Mobbin Home's 'ﬁ}
< Transferring a project Ne X
#= Sections v All v Q Filter by name
(XX} The Ice Cream Factory’s Workspace v (O W Wl |
Welcome to your team's workspace! # The Ice Cream Factory
o | 18 projects, 2 styleguides, 15 members
This is your workspace where you can access the team’s p
projects below or create a new project. , _
Projects  Styleguides
Sections v All v Q Search for a project
Dairy [,
V\/ b 2projects - 1styleguide - Add link You can only transfer your projects to
e Add a markdown flavored description and tell the story of  InVited team members or organizations.
. . . To your organization:
5 projects - 1 styleguide - <5 Resources &> References - Add link
941 ol T - @ ks Regina's Shoe Factory
All web app related material a
e #ls  Foundation for Missing Water Bot...
Places
Show more .
ios mth ios Zeplin
Ice Cream Ice C|
#  Dinosaur Corporation
9:27 il T - B B ® !
@ We'll notify them via email!
o
Ranictar
Individual Projects
WEB 1h WEB el Related articles:
MVP Onboarding Flow « Transferring_a personal plan
* Assigning_roles to workspace members
g g » Assigning roles to project members on Free, Starter and Growing Business
plans
Did this answer your question?
WEB 2d
Dashboard filters
|* o Mobbin Home'= : - - N
< ¥ X
s= Sections v All v Q Filter by name . .
Transferring a project
Learn how to transfer a project's ownershi
Welcome to your team's workspace! # proj P
This is your workspace where you can access the team'’s p M Written by Didem
projects below or create a new project. / Updated over a week ago
Table of contents v
Depending on your role and available project slots, you can transfer projects to
other users or different workspaces.
Web P
Sprojects - 1 styleguide - <> Resources - s> References - Add link Transferring a project in your Personal workspace to another user
All web lated material . . . . _
\Web app refated materia Project owners can transfer the ownership of their projects to other users within
Show more the project.
From the "Projects” dashboard, hover over the project, click the settings icon, and
9:27 all T -
select “Transfer Ownership”. The user that you select will become the new owner of
“ the project and you will become a member with the admin role of the project.
Ranictar
PP Personal Workspace v Ok £ QO 0
WEB 1h WEB 2d
MVP Onboarding Flow Projects ~ Styleguides
) ) Created v Q
- Invite... -
| Copy Project Web Link
Copy Project App URI
PI Transfer Ownership...
WEE  Archive Project 6m
Trz Delete Project...
o0
WEB 2d
Dashboard filters o o i L o . L
|& Q Mobbin Home's - - N
< ¥ X
Mobbin Home Transferring a project
5 projects, 1 styleguide, 1 member Learn how to transfer a project's ownership
& Written by Didem
Projects Styleguides Updated over a week ago
s= Sections v All v Q Filter by name Table of contents ~
Transferring a project in your Personal workspace to another user
Welcome to your team's workspace! # Transferring a project from your Personal workspace to a Team,
L Organization, or Enterprise workspace
This is your workspace where you can access the team’s p
projects below or create a new project. Transferring a project from a Team workspace to a Personal workspace
Transferring a project from a team workspace to another team workspace
Depending on your role and available project slots, you can transfer projects to
other users or different workspaces.
Web
5projects - 1 styleguide - < Resources - <& References - Add link Transferring a project in your Personal workspace to another user
All web app related material Project owners can transfer the ownership of their projects to other users within
the project.
Show more
From the "Projects” dashboard, hover over the project, click the settings icon, and
9:27 el select “Transfer Ownership”. The user that you select will become the new owner of
N the project and you will become a member with the admin role of the project.
Ranictar . -
XX ) Personal Workspace O &5 0
WEB 1h WEB 2d
MVP Onboarding Flow Projects  Styleguides
- ® Created v a
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters


Logging in

screenPatterns: Error Login

screenPatterns: Error Login Home Login

screenKeywords:
Great to have you herel
Q You can login to access your workspace.
=
G Login with Google
: jsmith.mobbin2@gmail.com
o "_——__' ceessensensassnans Show
@@i(@ 6) = .(\\‘
ﬁ ©) o | 0= Login
@ @ o ¢]
@ @ 0= A
_ ;‘\ \ Login with SSO
N =2V '
I
| T 2
/ ‘\J Forgot password?
No account yet? Sign up.
|Great to have you herel
Q You can login to access your workspace.
L
G Login with Google
jsmith.mobbin2@gmail.com
e~ T T evevenes Show X Your email or password is not correct.
@@)@(/@;j 2 ( \ Forgot password?
ﬁ ©) o | 0= Login
@9 oD = 9
© @J D; A
== E \ Login with SSO
N A ‘
i
R I
/ '\—. Forgot password?
No account yet? Sign up.
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters
|Great to have you herel
Q You can login to access your workspace.
L
G Login with Google
: Work email
——————————
= Password
@@ (@ @ —— { ‘\‘
ﬁ ©) o | 0= Login
@ ©) oR — g
@ @J = 2
= g \ Login with SSO
N A ‘
i
R I
A s Forgot password?
No account yet? Sign up.


Expanding version history tab

hotspotType: Drag

screenKeywords:
* < Dashboard Profile > Q. Search workspace ‘ @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode 5]
Today 9:27 ol T wm) o _
File: Figma basics 8
o @ jsmith.mobbin2.. 2:25PM
S Annotations
Got any notes? - e
' A |
ENTER COMMIT MESSAGE 3! =i
8| s
. No annotations yet
The story begins here!
“Versions” panel lists the Add the first annotation by Command +
chanaes o iﬁh s scr‘gew over Click-ing on the design. Learn more about
“”?erq I r r Jone annotations
SAN FRANCISCO, CA Ef o ¥R
E
p, £ P (\
.
¢ \ |
-
y X . \ 3 ) o
I’ \; € 1
AT ’
- W
~ b P
Y i
-
‘ Reusable components 5
B No reusable components yet
EER i
-
Assets
X — 100% + B2 Nocomponentsyet v Q I®) Ef Addcomment @@  Show All v DT ..‘
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 all T @)
File: Figma basics 8
o @ jsmith.mobbin2@gmail.com 2:25PM
VoS Annotations
Got any notes? i - ) =2
:::ﬂ | &
ENTER COMMIT MESSAGE ¥ Nl 1
18 Nk 3
i ! No annotations yet
The story begins here!
“Versions” panel lists the changes on this screen over time. A.dd ;he first TSR by Command +
Click-ing on the design. Learn more about
J O n e annotations.
SAN FRANCISCO, CA Ef o #K
/ \ i
4 I .| ]
| 3 q ‘: | R
s \ .|
4. v - >
- W
| B
‘ - Reusable components N
) No reusable components yet
[} SessmsmEE .
—_— -
Assets
X — 100% <+ ) M ¢ Show All v No assets yet ..‘
|Q < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 all T @)
File: Figma basics 8
° @ jsmith.mobbin2.. 2:25PM
iy Annotations
/ =7
Got any notes? e ‘ = | ===
A
S kS
ENTER COMMIT MESSAGE S a
1) 2
|
The story bedins herel ) No annotations yet
e story begins here!
Ve e [Eehe Add the first annotation by Command +
R Click-ing on the design. Learn more about
changes on this screen over J annotations
time. O ne :
SAN FRANCISCO, CA Ef o #K
¥ s } ]
/ \ |
M,
} ﬁ . \
| N W ‘:‘ { P
> 1 'I
AT o
- W
~ P R
o %
- _ .
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
X — 100% <+ B2 Nocomponents yet v Q [®) E+ Add comment @ ShowAll v o B .0‘


User profile

screenElements:
Stacked List
Floating Action Button
Chip
Dropdown Menu
Avatar

screenPatterns:
Edit
Home
My Account & Profile

screenKeywords:
* < Projects
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER
Official Apps
Official apps created by Zeplin
CLI
i . . . . Connect
Connect components in Zeplin to components in code using
Zeplin CLI.
—~ zem
"q . . . . . Connect
Create, test and publish Zeplin extensions with no build
configuration.
Zeplin Apps
No Zeplin apps yet. All the connected Zeplin applications will be listed here.
Learn more
-
On(]
|* < Projects )
Hi! Hope you're great today :)
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER
Current password
New password
Update Now
|* < Projects
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER

Owned Zeplin apps

Build your own Zeplin apps, and they will be listed here.

Personal access tokens

Created personal access tokens will be listed here.

Webhooks

Webhooks enable you to build powerful intergrations which you can subscribe to

certain events in Zeplin.

Discover webhooks in our APl documentation.

Create new webhook

-
Dn(]
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
#= Sections v All v Q Filter by name Create Project | v
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the
projects below or create a new project.
€ Gotit!
= Web v
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material V4
Show more
927 © Discovery ”
o
Ranictar
WEB 55m WEB 5m WEB 4m WEB 4m
MVP Onboarding Flow Sign up Setting up device
® 9 L] L] L]
-
WEB 4m DX
Dashboard filters
|* ° Mobbin Home's Workspace v Q, Search workspace ’ @
-
s= Sections v Al v Q Filter by name jsmith.mobbin2@gmail.com I
jsmith.mobbin2@gmail.com
Welcome to your team's workspace! #
This is your workspace where you can access the team's projects and styleguides. You can either join the :
. " Mobbin Home
projects below or create a new project.
Team Workspace
()
Notification Settings
Web
Log out
5 projects 1 styleguide - <> Resources &> References - Add link
All web app related material
Show more
9:27 wll T ==
o
Ranictar
WEB 38m WEB 2d WEB 2d WEB 2d
MVP Onboarding Flow Sign up Setting up device
WEB 2d ."
-
Dashboard filters
|* < Projects
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER
Full name jsmith.mobbin2@gmail.com
g Username jsmithmobbin2
Email jsmith.mobbin2@gmail.com
What | do Your role at your team, and some
fun facts about yourself
Want to remove your account completely?
Workspaces
You're currently in 1 workspace:
Mobbin Home
Manage members
Owner, Can access all projects
Multi-factor Authentication
Require a security code in addition to your password while logging into your Zeplin .0‘
account. You will need to setup an authenticator app. -
|* < Projects .
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER

Plan Details

You're an Admin of 1 workspace. Select the workspace below to update its

subscription.

Mobbin Home (Team Plan)

To create a new workspace, upgrade your plan:

Card Details

Card

E No card information yet.
-
Ox(]


Creating a project

screenPatterns:
Help & Support
Chat Bot

screenElements:
Top Navigation Bar
Dialog
Skeleton
Tab

screenPatterns:
Home
Select
Help & Support
Chat Bot
Loading

screenKeywords:
* Workspace Q Search workspace ‘_ !
Projects  Styleguides
Created v Q Filter by name
Welcome to your workspace! #
This is your personal workspace where you can view your projects and styleguides. You
can browse through the sample project below or create a new project.
Q Gotit!
— - [
~ ~ ~~/ .. Sample Project
IS — =
o= e ‘
L B . \ B S .
TE v
i0S 4h
Snack Overflow App
L (2]
-
On(]
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name Untitled
Web, 1x
- :
You can now group and reorder tags, assign screens to team members, and track status changes.
1. Tag groups: Sort your tag collections by type to make them easier to filter and navigate. L
2. Assignees & Status: Bulk-assign screens to teammates and update statuses as work progress. Description
Share feedback Q Gotit! Got any notes?
Untagged
+ Add tag group Integrations ®
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - E .. &
-
b Chats Chats
¥ H N James
] Re9|ster '.‘ Thank you! That was very helpfull What's in design = in code
Sync your reusable components
ﬂ Will Kenny with your Storybook instances.
I know... 'm trying to get the funds.
SAN FRANCISCO, CA Beth Williams .
‘ Learn more o Gotit
_ milky way. | have a 6D with a 24-100mm...
FOLLOW JANE
I You can also connect to tools you
' Wanted to ask if you're available for a portrait use everyday; like Jira, Slack,
shoot next week. Microsoft Teams, Trello and
Storybook.
[ SR .
e 2 o+ wmH
- ! «"1
A% Extensions =
‘.‘i -
A CSS and HTML ‘e
¥ i L)
|Choose your project type
@ Web O i0S O Android
L N]
>
g ED
‘\‘ D
Dimensions in px, Dimensions in pt, Dimensions in dp/sp,
CSS and HTML export. Objective-C/Swift export. XML export.
O macOS Dimensions in pt, Objective-C/Swift export.
CANCEL CREATE
|* < Workspace Dashboard Flows Styleguide Q  Search workspace Q !
Untitled
Web, unknown
) . .
Let's start by exporting designs.
Figma - Sketch - AdobeXD + Adobe Photoshop Description
Got any notes?
Q < *
) Integrations ®
a To be able to export designs, you need to download the desktop app first.
Once you have installed and opened up the desktop app,the Sketch plugin
will be installed automatically. - *
[ J
-
e Select an artboard/layer in your Sketch file. Component in code Component in design
What's in design = in code
e Press ~ 8E or use the menu up top “Plugins > Zeplin > Export Selected..” to
start export process. Sync your reusable components
with your Storybook instances.
_ Amange [ Plugins | Overfiow View Window Hep Connect to Storybook
Emoji Autocomplete > 1 3 = fo.? 18} View more X
Fin from Zeplin - 3m ago
Run Script... ~4 K| Export Colors... .
Run ‘Export Selected...” Again ~{R Export Text Styles... Hey there, Fhanks for checking out our
Manage Plugins... Export All > support articles!
Utilities > m Do you need any more help here?
o+ w[@H
If you don't see the plugin in the Sketch menu, install here. No, thanks! Just looking.
Extensions =
]
CSS and H Yes! Need more help.
—
|* < Workspace Dashboard Flows Styleguide Q  Search workspace Q !
Sections v Q Filter by name Untitled
Web, 1x
o You can now group and reorder tags, assign screens to team members, and track status changes.
1. Tag groups: Sort your tag collections by type to make them easier to filter and navigate. e
2. Assignees & Status: Bulk-assign screens to teammates and update statuses as work progress. Description
Share feedback Q Gotit! Got any notes?
Untagged
+ Add tag group Integrations ®
- AP
®
-
Component in code Component in design
What's in design = in code
Sync your reusable components
with your Storybook instances.
Connect to Storybook
Learn more  Gotit!
You can also connect to tools you
use everyday; like Jira, Slack,
Microsoft Teams, Trello and
Storybook.
o+ w@H
Extensions =
CSS and HTML ol
Ox(]
|* < Workspace Dashboard Flows Styleguide Q Search workspace Q ®
Untitled
Web, unknown
Let's start by exporting designs.
Figma - Sketch - AdobeXD + Adobe Photoshop Description
Got any notes?
$ -
) Integrations ®
0 To get started, open the Figma file you want to export...
e Open the Resources menu (4 1), click Plugins, and search for Zeplin. Then O
click Run to launch the Zeplin plugin. ®
-
| G 5 4 Component in code Component in design
What's in design = in code
O+
o @ O Sync your reusable components
with your Storybook instances.
Components Plugins Widgets @
Connect to Storybook
Q. zeplin X Learn more  Gotit!
Recents You can also connect to tools you use
everyday; like Jira, Slack, Microsoft
@ Zepln Run Teams, Trello and Storybook.
o+ w@H
o Select the frames and components you want to export to Zeplin, and once Extensions -
you're ready, click on the export button: -
CSS and HTML
4 Zeplin X ."
epl 2,
. Mamhare o
|* < Workspace Dashboard Flows Styleguide Q  Search workspace Q !
Got any notes?
) . .
Let's start by exporting designs. Integrations ®
Figma - Sketch + AdobeXD - Adobe Photoshop
[ ]
B . *
-
9 ‘_ * Component in code Component in design
What's in design = in code
Sync your reusable components
with your Storybook instances.
a To be able to export designs, you need to download the desktop app first.
Connect to Storybook
Once you have installed and opened up the desktop app,the Sketch plugin
will be installed automatically. Learn more Q Gotit!
e Select an artboard/layer in your Sketch file. You can also connect to tools you use
everyday; like Jira, Slack, Microsoft
. . Teams, Trello and Storybook.
e Press ~ 8E or use the menu up top “Plugins > Zeplin > Export Selected..” to
start export process. O % [ H
_ amange ([PliginS) Overfiow _ View Window Welb Extensions -
Emoji Autocomplete pa ™ - -] ol Q
> ¢3S and HTML
Run Script... ~4 K| Export Colors...
Run ‘Export Selected..! Again ~ ~ 'R Export Text Styles... Members =
Manage Plugins... Export All >
Utilities > Invite
If you don't see the plugin in the Sketch menu, install here. !
-
Ox(]


Adding a placeholder screen

hotspotType: Pinch

pageType: Application Application Application Application Application Application Application Application

screenKeywords:
* < Dashboard Dashboard Flows Styleguide Q Search workspace Q [C]
& zpl.io/YYQDxYJ
0 O < Basic > eee
Chats Chats mockup Individual chat °

o - o7 - - - S

Chats| Chats, < James | :
——————— v wm  ciick 1] [
1

- [
bokoh. 1 been using primes s they end o |

geta it sharper mages. |
‘ l‘mwnlum‘ I

Vi ocking o s rund captrg e i ]

s I |

. R — ol _— e

! 1

f |

{ 1

! 1

f 1

{ 1

! )

o a o a1 .

— ' .

! 1

|

°
<
o @ = ()
- 38% + 4 T BOee B @ NoOpenComments v -
(G
|* < Dashboard Dashboard Flows Styleguide Q Search workspace Q [C]
& zpl.io/YYQDxYJ
0 O < Error > eee
Chats Chats mockup Individual chat
o - o7 - - - I
Chats| Chats, < James | :
——————— v wm  ciick 1] 1
- 1
bokoh. 1 been using primes s they end o |
geta it sharper mages. |
- i
s ' ]
. R — i _— |
! 1
! |
: 1
[
! |
: 1
[
o a o a1 .
— ' .
: 1
<
o @ = ()
- 38% + 4 T BOee B @ NoOpenComments v -
(G
|* < Dashboard Dashboard Flows Styleguide Q  Search workspace Q ®
MvP [New --- |
& zpl.io/YYQDxYJ

Chats Chats mockup Individual chat
oz - oz - o2 - D
Chats Chats < James ] :
v James Click I
- 1
@ =oeem s, ® |
e |
e s Tasas I
‘ Both Williams |
imlocking fo tes srund capuring e i 1
oo | !
. R — ‘ e |
I
1
I
1
|
1
I
1
I
1
|
1
‘ 1
e a o s | |
I
_— |
I
1
e m e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e = == -
-
o @ = ()
- 3% + 4 T HOee Ef & NoOpenComments v -
(G
|* < Dashboard Dashboard Flows Styleguide Q  Search workspace Q ]
& zpl.io/YYQDxYJ
Chats Chats mockup Individual chat
e o7 wom o2 S
Chats| Chats, < James.
T mes. Click
e
s v e o e
‘ Both Williams
. Rev Shawn
e a o s
<
38% ¢ - = No Open C "
=  + 4 T Be e = B o Open Comments v -
(G
|* { Dashboard Dashboard Flows Styleguide Q Search workspace ’ @
-
> zpl.io/YYQDxYJ
Chat
Chats Chats mockup Individual chat
9:27 ol T - 9:27 all T . 9:27 all T -
Chats Chats < James
,W James Click
P
“ Thank you! That was very helpful! @' Really love your most recent photo. I've been
trying to capture the same thing for a few
months and would love some tips!
Will Kenny
I know... I'm trying to get the funds. @
A fast 50mm like f1.8 would help with the
bokeh. I've been using primes as they tend to
get a bit sharper images.
Beth Williams
I'm looking for tips around capturing the
milky way. | have a 6D with a 24-100mm... X
4 Thank you! That was very helpful!
Rev Shawn
Wanted to ask if you're available for a portrait
shoot next week.
—
- 64% + &, T He@e & = No Open C t .:‘
b o - = B 0 Open Comments v
. 1}
|* < Dashboard Dashboard Flows Styleguide Q Search workspace Q [C]
& zpl.io/YYQDxYJ
0 O < Loading > ees
Chats Chats mockup Individual chat
o2 e a2 wom o2 S It
Chats| Chats, < James | :
o mes Click

R e e |
— |

bokoh. 1 been using primes s they end o |
geta it sharper mages. |

ot tans .
‘ ke bt s e i |
e I Chats ,
! 1
! 1
: 1
[
! 1
: 1
[
o a o a1 .
— ' .
: 1

m s On(
- 3% + 4, FTEROee & Ef & NoOpenComments v -
(G
|* < Dashboard Dashboard Flows Styleguide Q  Search workspace Q ®
e [New --- |
& zpl.io/YYQDxYJ

Chats Chats mockup Individual chat
oz - oz - o2 - D
Chats Chats < James ] :
- mes. Click
- 1
@ =oeem e, ® |
e |
S e s Tasas I
oo | !
@ = w Add a scrben name |
I
!
|
1
\
1
\
1
I
1
|
1
‘ 1
e a o s ] |
I
_— |
\
1
T
-
o @ = ()
- 3% + 4 T HOee E & NoOpenComments v -
(G
|* < Dashboard Dashboard Flows Styleguide Q  Search workspace Q ®
e [New --- |
& zpl.io/YYQDxYJ

Chats Chats mockup Individual chat
e o7 - o2 S
Chats| Chats, < James.
v mes. Click
e
e
‘ Both Williams
. Rev Shawn
e a o s
<
38% ¢ - = No Open C ’.!
=  + 4 T Be e = B o Open Comments v -
(G


Editing style name

screenElements:
Editable Text
Button

screenKeywords:
* < Dashboard Profile > Q Search workspace " ®
Jane X
9:27 all T . D< pinned to left and top, auto
: : _ width and height
! | YAy P 4 X: 142px Y: 236px
e . s‘ Width: auto (92px)  Height: auto (40px)
92px Typeface
Jane o
SAN FRANCISCO, CA
| | Comfortaa-Regular
I I . Size: 36px
FOLLOW JANE; s
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
{ MESSAGE |
; ; . #000000 O+
B }"‘J '
[ S A & | Content
B,
| N\ 9 (‘1 Jane
el
‘ol L
1 i
, % CSS =
3 =
| [ vane
—'5 . C. ',
jsmith.mob... , 1 version 14m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment m Show All v B : ! Contorten: @
|* < Dashboard Profile > Q Search workspace " ®
Jane X
9:27 ol T (- D< pinned to left and top, auto
: : - width and height
! | YAy P 4 X: 142px Y: 236px
e . s‘ Width: auto (92px)  Height: auto (40px)
92px Typeface
Jane o 360
| Title_36p: e
SAN FRANCISCO, CA
5 i Comfortaa-Regular
I ] Size: 36px
FOLLOW JANE;
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
| MESSAGE |
; ; . #000000
B }"‘J '
[ S A & | Content
B,
| N\ 9 (‘1 Jane
e
‘ol L
. 1 0 _J
, % CSS =
3 =
| [ vane
o — . .. ”
jsmith.mob... , 1 version 14m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment m Show All v B . . Comfortaa; @
|* < Dashboard Profile > Q Search workspace " ®
Jane X
9:27 all T . D< pinned to left and top, auto
: : _ width and height
! | YAy P 4 X: 142px Y: 236px
e . s‘ Width: auto (92px)  Height: auto (40px)
92px Typeface
Jane o .
| Title_36px @
SAN FRANCISCO, CA
| | Comfortaa-Regular
I I . Size: 36px
FOLLOW JANE; s
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
{ MESSAGE |
; ; . #000000 O+
p" P Irﬂ ’
[ S A & | Content
% B,
| N\ 9 (‘1 Jane
el
‘ol L
1 i
, % CSS =
3 =
| [ vane
—'5 . C. ',
jsmith.mob... , 1 version 14m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment m Show All v B : ! Contorten: @
|* < Dashboard Profile > Q Search workspace " ®
Jane X
9:27 all T . D< pinned to left and top, auto
: : _ width and height
! | YAy P 4 X: 142px Y: 236px
e . s‘ Width: auto (92px)  Height: auto (40px)
92px Typeface
Jane o
| Text Style @
SAN FRANCISCO, CA
| | Comfortaa-Regular
I I . Size: 36px
FOLLOW JANE; s
Align: Center Vertical Align: Center
Letter Spacing: -0.54px
{ MESSAGE |
; ; . #000000 O+
B }"‘J '
[ S A & | Content
B,
| N\ 9 (‘1 Jane
el
‘ol L
1 i
, % CSS =
3 =
| [ vane
—'5 . C. ',
jsmith.mob... , 1 version 14m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment m Show All v B : ! Contorten: @


Adding a commit message

screenKeywords:
* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
° @ jsmith.mo.. 3:09 PM
3 Annotations
changed button colour, |
design shows horizontal @D Requirement  Animation
pics layout|
0 @ Requirement jsmith.mobbin2.. 13m
966 m note that stroke weight has changed, its 2px
Jaoneo now
[ J 2:25PM
Got any notes? SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
radient fills up when app opens
A _ g p o
FOLLOW JANE
The story begins here! Requirement
“Versions” panel lists the MESSAGE e
changes on this screen
over time.
G (e e
o Q G.Animation 8
Reusable components N
— No reusable components yet
. = N Assets ."
X — 89% <+ B2 Nocomponentsyet v EF Add comment @ ShowAll v o B -
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 all T ) i ) )
File: Figma basics 8
° @ jsmith.mo.. 3:09 PM
3 Annotations
What has changed? ;
m Requirement  Animation
1025 m 0 @ Requirement jsmith.mobbin2.. 13m
® 225PM J note that stroke weight has changed, its 2px
ane now
Got any notes? e
ENTER COMMIT MESSAGE SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
gradient fills up when app opens
The Story begins here!
“Versions” panel lists the
changes on this screen Requirement
over time. MESSAGE U
T e et
o Q G.Ammatlon 8
Reusable components N
— No reusable components yet
. . . Assets ."
X — 89% <+ B3 Nocomponentsyet v Ef Addcomment @@  Show All v o B =
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
o d : .,. ©,..mobbi.4. oo
3 Annotations
What has changed? ;
m Requirement  Animation
ENTER COMMIT MESSAGE
0 @ Requirement jsmith.mobbin2.. 13m
® 225PM J note that stroke weight has changed, its 2px
ane now
Got any notes? e
ENTER COMMIT MESSAGE SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
gradient fills up when app opens
The Story begins here!
“Versions” panel lists the :
changes on this screen . Requirement
over time. MESSAGE U
T e et
o Q G.Animation 8
Reusable components N
— No reusable components yet
. . . Assets ."
X — 89% <+ B3 Nocomponentsyet v Ef Addcomment @@  Show All v o B =
|* < Dashboard Profile > Q Search workspace " @
Version History Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
Today 9:27 ol T .
File: Figma basics 8
° @ jsmith.mo.. 3:09 PM
3 Annotations
changed button colour, |
design shows horizontal @D Requirement  Animation
pics layout
0 @ Requirement jsmith.mobbin2.. 13m
note that stroke weight has changed, its 2px
® 225PM JOneO now
Got any notes?
SAN FRANCISCO, CA @ Animation jsmith.mobbin2.. 11m
ENTER COMMIT MESSAGE ,
gradient fills up when app opens
The story begins here!
“Versions” panel lists the Requirement
changes on this screen MESSAGE O
over time.
T e et
o Q G.Animation 8
Reusable components N
— No reusable components yet
Assets ."
X — 89% <+ B3 Nocomponentsyet v Ef Addcomment @@  Show All v o B =