Enabling scene sharing

screenElements: Popover Divider

screenKeywords:
* < Workspace Dashboard Flows Styleguide Q Search workspace ’_ @
Sections v Q Filter by name MVP vee
Web, 1x Ve
& 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 eveny;
‘ g s b ke Jira, Slack, Microsoft Tear
ilky I hi 6D with a 24-1001 e
Rev Shawn o+ @A
Wanted to ask if you're available for a portrait
Extensions =
e : CSS and HTML
Members =
Invite
N X .
Profile 8m  Register 52m  Chats 52m  Chats mockup 52m
. .
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 " @
Share link Invited members onl
Sections v Q Filter by name Y MvP
Web: zpl.io/wqZGegK
P asbea B Web, 1x
& Add tags to organize and filter screens. view  Release + Add tag App: zpl://project?pid=64... Oz
Scene Everyone with the link D it
9:27 wll T . 9:27 wll T . 9:27 all =0 escription
Showcase designs and Stylegy™~'- ces .
o Chats :
Copy link Got any notes?
% . e James
| Reg | Ste r ' ‘ Thank you! That was very hel|
Unshare
Jone —— ﬂ I know... I'm trying to get the funds. Integrations @
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
‘ m looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm.. Trello and Storybook.
‘ Rev Shawn ° .-;!_' o m B
Wanted to ask fyou'e available for  portrait
shoot next week.
Extensions =
B
i |
: !‘5‘1 = P € |
Members =
Invite
N X .
Profile now  Register Th  Chats Th  Chats mockup Th
-, G
9:27 il - 9:27 il - 9:27 il - o]
< James BROWSE ALL m \\
N Search e N -
"" Really love your most recent photo. I've been \:. ; \' oy ..‘
1rying o capture the same thing fora few \ f“‘i\\.\\- [ o . e
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Share link Invited members onl
Sections v Q Filter by name Y MvP
Web: zpl.io/wqZGegK
P asbea B Web, 1x
& Add tags to organize and filter screens. view  Release + Add tag App: zpl://project?pid=64... Oz
Scene Everyone with the link D it
9:27 wll T . 9:27 wll T . 9:27 all =0 escription
. Chats Showcase designs and Styleguide Open eoe
Got any notes?
% . e James
! Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations
Jone g ©
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
‘ m looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm.. Trello and Storybook.
‘ Rev Shawn ° .-;!_' o m B
Wanted to ask fyou'e available for  portrait
shoot next week.
Extensions =
B
xié |
: rﬁ:i = P € |
Members =
Invite
o o @ o .
Profile now  Register Th  Chats Th  Chats mockup Th
-, =
9:27 il - 9:27 il - 9:27 il - o]
< James BROWSE ALL m \\
N Search e N -
"" Really love your most recent photo. I've been \:. ; \' oy ..‘
1rying o capture the same thing fora few \ f“‘i\\\.\\- [ o . e
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Share link Invited members onl
Sections v Q Filter by name Y MvP
Web: zpl.io/wqZGegK
P asbea B Web, 1x
& Add tags to organize and filter screens. view  Release + Add tag App: zpl://project?pid=64... Oz
Scene Everyone with the link D it
9:27 wll T . 9:27 wll T . 9:27 all =0 escription
Showcase designs and Styleguide Enable
EN Chats
Got any notes?
% . e James
! Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds. .
Integrations
Jone g ©
SANFRANCISCS, CA Beth Williams Connect to tools you use everyday;
‘ m looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm.. Trello and Storybook.
‘ Rev Shawn ° .-;!_' o m B
Wanted to ask fyou'e available for  portrait
shoot next week.
Extensions =
B
Xe0 |0
: !‘5‘1 = P € |
Members =
Invite
o o @ o .
Profile now  Register Th  Chats Th  Chats mockup Th
-, =
9:27 il - 9:27 il - 9:27 il - o]
< James BROWSE ALL m \\
N Search e N -
"" Really love your most recent photo. I've been \:. ; \' oy ..‘
1rying o capture the same thing fora few \ f“‘i\\\.\\- [ o . e


Adding to styleguide

appName: Zeplin

appCategory: Productivity

appTagline: Bring harmony to design delivery

companyHqRegion: US & Canada

companyStage: Early Stage

platform: web

pageType: Application

hotspotType: Hover

hotspotType: Click

screenElements: Tooltip Button

pageType: Application Application Application Application

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
Comfortaa-Regular Aa+
SA;] FRANCISCO ECA . Add text style to Styleguide
' ' Size: 36px
; ; Align: Center Vertical Align: Center
FOLLOW JANE : _
® Letter Spacing: -0.54px
§ § . #000000 O+
{ MESSAGE |
pt &= > grq : Content
[4 N \ ¥ :
}“ Jane
¥ I
. L A
i-4 P> css =
-~ V'l o
1 i e
’ % o {
“ - 2 o o ;
o — o ; : Comfortaa; '
jsmith.mob... , 1 version 14m — 100% + g9 No components yet v I®) 2 Ef Add comment m Show All v [ : H @
|* < Dashboard Profile > Q Search workspace ’_ @
Jane X
9:27 il T - D( pinned to left and top, auto
: ' - width and height
/ N
ﬂ X: 142px Y: 236px
Width: auto (92px)  Height: auto (40px)
io92px | Typeface
Jane
Comfortaa-Regular Aa+
SAEI FRANCISCO,ECA Size: 36px
; ; Align: Center Vertical Align: Center
FOLLOW JANE _
Letter Spacing: -0.54px
. o v
= P ,q : Content
[ - \ ¥ ‘I
}; Jane
{ A
e IR
é4 P> css =
~ V" o
b % . {
“ ~ + o . .
o o— C ; : Comfortaa; '
jsmith.mob... , 1 version 14m — 100% <+ B2 No components yet v O 8 E' Add comment M Show All v | : H ®
|* < Dashboard Profile > Q Search workspace ‘_ @
Jane X
9:27 ol T () D( pinned to left and top, auto
: ! : _ width and height
29.1%
\ X: 142px Y: 236px
Width: auto (92px)  Height: auto (40px)
100% | Typeface
Fenenennes g o eneneened S
e Jane o
Comfortaa-Regular
SAEI FRANCISCO,ECA Size: 36px
; ; Align: Center Vertical Align: Center
FOLLOW JANE
Letter Spacing: -0.54px
. o
R P ;rq : Content
(2 v \ ¥ :
}“ Jane
o I
| ‘ ‘\ ‘E“ 1
A% g =
1\’1 css 0 =
5. % . {
t ‘. ' : : 92p;
o — C : Comfortaa;
jsmith.mob... , 1 version 13m — 100% + 82 No components yet v @) 2 Ef Add comment M Show All v : A ®
|* < 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: @


Integrate with tools

pageType: Application Application

screenKeywords:
* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP ooe
Web, 1x Ve
ﬁ' 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
Overview of the basic screens
¥ R . t N James
egls er "‘ Thank you! That was very helpful!
1 know... 'm trying to get the funds. € Connect to Jira
Int E
Jone | >
S0
SANFRANCISCO, CA Beth Williams Co % Add to Slack i
‘ ek i ot g K¢ g Add to Microsoft Teams
rev Shawn -3 [@ Connect to Trello
shoot next week. H Connect to Storybook
Extensions =
ﬁ - CSS and HTML
Members =
Invite
o o @B o -
Profile Tm  Register Th  Chats Th  Chats mockup Th
' ' ' — : =
9:27 wll T - 9:27 wll T - 9:27 wll T - =
< James BROWSE ALL . -\‘h
i Search At . \‘“ ™
‘s’ Really love your most recent photo. I've been \ ' AL _ 3 g ", -«
trying to capture the same thing for a few i \\\A\ . { i . L. e -
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP ooe
Web, 1x Ve
ﬁ' 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
Overview of the basic screens
% . N James
Reg | Ste r "‘ Thank you! That was very helpful!
W"“(‘""Y
I know... I'm 1 t the funds. .
Jone ﬂ now... I'm trying to get the funds. Integratlons @
SAN FRANCISCO, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm...
Rev Shawn ot w @ H
Wanted to ask if you're available for a portrait 5
shoot next week.
Extensions =
‘ ﬂ CSS and HTML
! b >
iR |
Members =
Invite
o o @ o s =
Profile now  Register Th  Chats Th  Chats mockup Th
9:27 wll T - 9:27 wll T - 9:27 wll T - ~ = % L
< James BROWSE ALL . t\‘\a}
o Search e T \* =
"‘ Really love your most recent photo. I've been i s ) L i, -«
trying to capture the same thing for a few R \';\\k ¥ ‘ 4 'g& ‘.1‘ L
S S T A doas LN b


Inviting a member to a project

hotspotType: Right Click

screenPatterns:
Acknowledgement & Success
Invite Teammates

pageType: Application Application Application Application Application

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace ’ !
-
Sections v All v Q Filter by name Create Project | v
gy Bl Y iy NP Uy A 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.
% ® = No Status
N
Ranictar
WEB 34m
MVP
-
Ox(]
|* ° Mobbin Home's Workspace v Q, Search workspace ’ !
-
Sections v All v Q Filter by name Create Project | v
et e e e el
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 proji action.
Copy project app URI
9:27

Make a copy...
«
Ranict, Transfer ownership...
WEB
MVP Create a new section
! Archive project

Leave project

-
Delete project...
proj L)
|* ° Mobbin Home's Workspace v Q, Search workspace ’_ !
Sections v All v Q Filter by name Create Project | v
gy Tl s sy NP Uy A 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.
o1 Type email here
«
Members
D¢
jonsmith.mobbin@gmail.com
W g Pending Invitation °
MV
® 9
-
Ox(]
|* ° Mobbin Home's Workspace v Q, Search workspace ’_ !
Sections v All v Q Filter by name Create Project | v
Cuiivgeiaee e wvipeis iy g v g e e vasssn e
These are all the projects related to one product, the same product feature, or something in common.
® Development ® Design © Discovery
1h 3d w
Sample Project Design Sample Project Wireframes Sample Project Explorations
Create Section
Individual Projects
Individual projects that are not assigned to a section.
o1 Type email here
«
Members
R
] jonsmith.mobbin@gmail.com
WE @ Pending Invitation o
M
-
On(]
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
Sections v All v Q Filter by name Create Project | v
et e e e el
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 34m
MVP
-
Ox(]


Setting up authentication

hotspotType: Keyboard Input

screenElements: Illustration Link

screenPatterns:
QR Code
Acknowledgement & Success
Verification

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

screenKeywords:
Setup Multi-factor Authentication
An authenticator app lets you generate access codes without
needing to receive text messages or emails.
If you don't already use one, you can choose
that we support.
To configure your authenticator app, scan the QR code
below, or
TR T
E g o .::._. ! E.
E =Ll
(35 € ula Sl
e
o =k S I
R
GO BACK
|Nn N
)A%
Congratulations!
You have successfully setup multi-factor authentication.
|Setup Multi-factor Authentication
To make sure that it was setup correctly, enter the code
generated by your authenticator app.
123456
GO BACK
|Setup Multi-factor Authentication
To make sure that it was setup correctly, enter the code
generated by your authenticator app.
123456
GO BACK
|Setup Multi-factor Authentication
Going forward, use the codes generated by your authenticator app.
In case you lose access to the app, you can use one of these
backup codes to gain access to your account:
1. e@6b 438c 6. 03f2 aBf8
2. b3ed ecdb 7. 4465 8fal
3. 3@ab 70dd 8. 86dd 9c9d
4. 295d 47a2 9. 8249 oflc
5. a4d6 d3bc 10.1029 8901
|Nn N
[ l?‘
N—
J‘yg
Enable Multi-factor Authentication
When enabled, you will need to enter a security code from an
authenticator app during login and on a new device.
CANCEL
|* < Projects
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER
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
account. You will need to setup an authenticator app.
Privacy preferences
Share usage data and errors with Zeplin
This data helps us improve features and solve issues you run into. ."
-
|Setup Multi-factor Authentication
To make sure that it was setup correctly, enter the code
generated by your authenticator app.
6-digit code
GO BACK
|Setup Multi-factor Authentication
To make sure that it was setup correctly, enter the code
generated by your authenticator app.
566737
GO BACK
|* < Projects
Hi! Hope you're great today )
ACCOUNT PASSWORD BILLING CONNECTED APPS DEVELOPER
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
Your account jsmith.mobbin2@gmail.com has been set up to require a security code in
addition to your password.
Remove multi-factor authentication
Reset your authenticator app
Privacy preferences
Share usage data and errors with Zeplin
This data helps us improve features and solve issues you run into. ."
-


Editing a member's role

screenElements: Banner Toast

screenPatterns:
Edit
Acknowledgement & Success

pageType: Application Application Application

screenKeywords:
* ¢ Workspace Workspace Members
Mobbin Workspace
ﬁ P ExportCSV  Settings
1 of 1 seat
All roles v Q, Search for a member No seats left, add more. Invite Members
. Review 1 new seat
Review new members added and members with updated roles. You can either confirm or revert the changes,
or remove the members from the workspace completely.
= 1 member selected Transfer ownership Assign role Update access Remove
jsmith.mobbin2@gmail.com .
‘! jsmith.mobbin2@gmail.com Owner All projects Now
jonsmith.mobbin@gmail.... : : .
@ Pending Invitation + Resend SEIETE Y SUpIRIECS
-
Dn(]
|* ¢ Workspace Workspace Members
Mobbin Workspace
ﬁ h P Export CSV Settings
1 of 1 seat, 1 reviewer
Allroles v Q Search for a member No seats left, add more. Invite Members
= 1 member selected Transfer ownership Assign role Update access Remove
jsmith.mobbin2@gmail.com .
‘! jsmith.mobbin2@gmail.com Owner All projects Now
jonsmith.mobbin@gmail.com : : .
@ Pending Invitation + Resend G AUpIRjEcs

P2y Admin
Can invite and remove members, update
billing information and settings

= Editor/Developer
Can create and manage projects,
screens and styleguide resources

(@) Reviewer (Free of charge)
Can access all projects, view screens
and add notes

Learn about roles Hide

-
On(]
|* { Workspace Workspace Members
Invited jonsmith.mobbin@gmail.com!
Mobbin Workspace
ﬁ 1 0f 1 seat, 1 revieF\)Ner Export GSV Settings
All roles v Q, Search for a member No seats left, add more.
[J Name Role v Access Last Seen
jsmith.mobbin2@gmail.com .
‘! jsmith.mobbin2@gmail.com Owner All projects Now
jonsmith.mobbin@gmail.com ; . i
g Pending Invitation « Resend Reviewer v Al
-
On(]


Switching to stage mode

screenKeywords:
9:27 all T Em)
L 2%)3
Al ;
Jane
SAN FRANCISCO, CA
Bans W %]
/ 2 e,
| el e
|’ 3: . \‘:i -
AV
| b 7 R
\i > ew
_ﬁ
|Profile > Share < 2 comments
9:27 all T ==
, \ :—:7
e‘ = 4 2
18| Nk 3
Jane
SAN FRANCISCO, CA
A, P\
' > -
A% B,
_ -~ =
| ™ 9 &M R
| ‘]
g b P
s‘ em
R
|Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
e‘ = ; 4 @D Requirement  Animation
s | =
\} % @ Requirement jsmith.mobbin2@... Tm
‘ o note that stroke weight has changed, its 2px
now
@ Animation jsmith.mobbin2@... now
SAN FRANCISCO, CA gradient fills up when app opens
‘ MESSAGE .Reqmremem
e T, ]
/ \ |
ey
: eyl A
| A b ‘: | 4
> 1 'I
AT -~
el T
| L3
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
Animation Q Assets ."
jsmith.mob..., 1 version 35m ~ — 100% + &8 No components yet v O E} Add comment @ ShowAll v No assets yet -
|Profile > Share < 2 comments
i, _You're now in Stage Mode —a si_mpliﬁed 9:27 s -
interface that focuses on reviewing and
presenting designs. To leave, simply
press the Stage Mode button again.
Got it! N
ey o
s
SAN FRANCISCO, CA
/ \ i
; %ﬁn o
4 I .| ]
| . Y AT %
. 1 « ]
4. v - -
-\
| ~.| ‘}“/_
[~ eSS


Splitting into a section

hotspotType: Scroll Vertically

screenKeywords:
* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
9:27 wll T .
Web, 1x
@
Description
Jane
Overview of the basic screens
SAN FRANCISCO, CA
Connect to tools you use everyday;
= like Jira, Slack, Microsoft Teams,
ﬂﬁ " Trello and Storybook.
kid | o#w @A
CSS and HTML
Profile 1h Members =
Invite
Untitled section B8 v e
9:27 wll T . 9:27 wll T . 9:27 wll T . 9:27 wll T .
« Chats Chats < James
-
. v ames DX
Re9|Ster 'A‘ Thank you! That was very helpful! "" Really love your most recent photo. I've been
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace ’ @
-
Sections v Q Filter by name MVP
Web v
9:27 wil T . 9:27 wll T . 9:27 wll T . 9:27 wll T .
Web, 1x
a Chats Chats
\ . ¥ James Share
@ Reg l Ste r "‘ Thank you! That was very helpful!
Wi Kenny Description
J ﬂ I know... I'm trying to get the funds.
ane R
Create password Overview of the basic screens
SAN FRANCISCO, CA Beth Williams
‘ P looking for tis around capturing the
milky way. | have a 6D with a 24-100mm...
= Rev Shawn
Wanted to ask if you're available for a portrait :
shoot Rext week. Integratlons @
Connect to tools you use everyday;
- like Jira, Slack, Microsoft Teams,
lqu » : | Trello and Storybook.
A ere | S phe
iy | o+ w@H
- - e -
- CSS and HTML
o o @ o e
. Members =
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
— . Invite
9:27 il T - 9:27 il T - 9:27 il T - i, - ™
B >
Mo
< James BROWSE ALL | N . - ‘ 0
R Search ; t\ :
"‘ Really love your most recent photo. I've been A if 3 h - ks » e
trying to Capture the same thing for a few A f ‘ %,
months and would love some tips! W \ |t -,
\ "
i\ L) SULTS k: L
A fast 50mm like f1.8 would help with the @ 4 3 &*ﬁ \ / ALL RESULT: o, ."
bokeh. I've been using primes as they tend to \ “\‘\\- \ W | «'_, e N -
SN 82 wemwmErE 00
G NN P bl .
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace ’ @
-
Sections v Q Filter by name MVP
Web v
9:27 wil T . 9:27 wll T . 9:27 wll T . 9:27 wll T .
Web, 1x
a Chats Chats
\ . ¥ James Share
@ Reg l Ste r "‘ Thank you! That was very helpful!
Wi Kenny Description
J ﬂ I know... I'm trying to get the funds.
ane R
Create password Overview of the basic screens
SAN FRANCISCO, CA Beth Williams
‘ P looking for tis around capturing the
milky way. | have a 6D with a 24-100mm...
< 1 Split to Section Rev Shawn
Wanted to ask if you're available for a portrait :
shoot Rext week. Integratlons @
Connect to tools you use everyday;
- like Jira, Slack, Microsoft Teams,
;qu » : | Trello and Storybook.
R B - i e 1 o] LT
iy | o+ w@H
- - e -
- CSS and HTML
o o @ o e
. Members =
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
— . Invite
9:27 il T - 9:27 il T - 9:27 il T - i, - ™
B >
Mo
< James BROWSE ALL | N . - ‘ 0
N Search D &
"‘ Really love your most recent photo. I've been A if 3 h - ks » e
trying to Capture the same thing for a few A f ‘ %,
months and would love some tips! W \ |t -,
\ "
i\ L) SULTS k: L
A fast 50mm like f1.8 would help with the @ 4 3 &*ﬁ \ / ALL RESULT: o, ."
bokeh. I've been using primes as they tend to \ “\‘\\- \ W | «'_, e N -
SN 82 wemwmErE 00
G NN P bl .
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace ’ ]
-
Sections v Q Filter by name MVP
Web v
9:27 wll T .. 9:27 wil T - 9:27 wil T - 9:27 ol T -
Web, 1x
A Chats Chats
\ " Y James Share
@ Register "Q
Wi enny Description
J Q | know... I'm trying to get the funds.
ane e pace
Create password Overview of the basic screens
SAN FRANCISCO, CA Beth Williams
‘ Vim looking for tps around capturing the
milky way. | have a 6D with a 24-100mm...
Rev Shawn
Wanted to ask if you're available for a portrait N
[Shaot Rext week. Integratlons @
Connect to tools you use everyday;
E like Jira, Slack, Microsoft Teams,
,ﬂ Trello and Storybook.
i | o % @HE
- - e -
. CSS and HTML
o o @ o e
. Members =
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
. I Invite
T N .
9:27 il T - 9:27 il T - 9:27 il T .. e, s %]
e o o -
BROWSE ALL X " o
< sames . ~ s 9
e pemmmm— Search Ny
PR 4 Tk Y N :
Y Really love your most recent photo. I've been it it & s ¥ “l\, 3
trying to capture the same thing for a few TN W ON (1 .f!'" —
months and would love some tips! \ .""“. 5 - i " -,
\ W b Y
' R8T \ | — o 1
§ )I A » \ —— v i
) ‘ e & I*. A ALL RESULTS - o -
A fast 50mm like 1.8 would help with the . W) ) ol . ‘
bokeh. I've been using primes as they tend to o ‘-‘\\\ . = - f o N b, o, W, -
get a bit sharper images. b ‘\ NN \ T \ ' 0 .L'
L\ ERNANRY 9 ] -y kg R,
|* < 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 = . ﬂ% “"‘. |


Webinar detail

pageType: Marketing

pagePatterns:
Events & Webinar Page
Events & Webinar Page

pageType: Marketing Marketing Marketing

screenKeywords:
* Principles Solutions v Pricing Resouies o Login Sign up for free
Recordings

Webinars Show more
B .. - »

AR AT : A Googler's Perspective Design System Adoption:
The State of Design Delivery on Building DesignOps L | . Strategies for Success
@ mﬂﬂ ' mou“da May 18, 2023 @ 10:00am PT . May 3, 2023 @ 9:30am PT ‘ :/::"Pm, T
June 27 2023 @ 9:30AM PT | . ‘ = 88 Az JEse

UX Tools x Zeplin: The A Googler's Perspective on  Design System Adoption:
State of Design Delivery Building DesignOps Strategies for Success with
UX Tools, the research group behind At the scale of a company like Dan Mall

the annual Design Tools Survey, Google, the need for DesignOps goes Tune in for a chat with Dan Mall
recently published its first study on... without saying... founder of Design System University

on building an integrated design...
Watch now - Watch now -
Watch now -

Zeplin Talks Show more
= ®

a E

@ Automate Front End Tasks De.sign Tokens in Flgma + Zep lin

with Design Tokens in Zeplin @ Zeplin for Developers vs
|* Principles Solutions v Pricing Resources v Login Sign up for free
UX Tools x Zeplin: The State of
Design Delivery
@ 60mins
UX Tools, the research group behind the annual Design
Tools Survey, recently published the first study on how
product teams build from design to code. Taylor Palmer,
co-creator of UX Tools sits down with Berk Cebi, co-
founder of Zeplin, to discuss findings and the future of
design delivery.
What we'll cover: Speakers
© Why product teams are investing in design delivery Taylor Palmer Berk Gebi
. Co-creator Co-founder and CPO
© The root causes of shipped products that don’t @UX Tools @Zeplin
match the design
© The surprising truth about real-time collaboration in
product teams
Explore more webinars -
» o CD . &> rme = R% 5 E
|* Principles Solutions v Pricing Resources v Login Sign up for free
© The surprising truth about real-time collaboration in
product teams
Explore more webinars -
- - @D oo
A Googler's Perspective Design System Adoption: Streamline Your Design
on Building DesignOps | . Strategies for Success to Development Workflow
May 18, 2023 @ 10:00am PT May 3, 2023 @ 9:30am PT April 13,2023 @ 10:00am - 10:45am PT
= ) s
Adam Fry-Pierce, 3 e e & N
UxLeadersy ) @ Pyt ‘
o S B . ‘ “ Design System Universty " o pa T o O e ———
. Design System Adoption: . .
A Googler's Perspective on 9 . y P . Streamline Your Design to
. . Strategies for Success with
Building DesignOps Development Workflow
Dan Mall
At the scale of a company like . . With all the bells and whistles
Tune in for a chat with Dan .
Google, the need for . of the latest design tools,
. . Mall, founder of Design System .
DesignOps goes without... . . - developers can often find...
University on building an...
Watch now - Watch now - Watch now -


Sorting members

screenElements:
Toast
Stacked List

screenPatterns:
Acknowledgement & Success
Filter & Sort

screenKeywords:
* { Workspace Workspace Members
Invited jonsmith.mobbin@gmail.com!
Mobbin Workspace
ﬁ 1 0f 1 seat, 1 revieF\)Ner Export GSV Settings
All roles v Q, Search for a member No seats left, add more.
[J Name Role v Access Last Seen
jsmith.mobbin2@gmail.com .
‘! jsmith.mobbin2@gmail.com Owner All projects Now
jonsmith.mobbin@gmail.com ; . i
g Pending Invitation « Resend Reviewer v Al
-
On(]
|* { Workspace Workspace Members
Mobbin Workspace
ﬁ P Export CSV Settings
1 of 1 seat, 1 reviewer
All roles v Q, Search for a member No seats left, add more. Invite Members
|:| Name Role A Access Last Seen
jonsmith.mobbin@gmail.com . . i
Q Pending Invitation « Resend Reviewer v Al
jsmith.mobbin2@gmail.com !
‘g jsmith.mobbin2@gmail.com Owner All projects Now
-
Ox(]


Home

screenElements:
Top Navigation Bar
Tab

screenPatterns:
Home
Home
Empty State

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(]
|* Personal Workspace v Q, Search workspace ’_ !
Projects  Styleguides
Q Search for a styleguide Create Styleguide
BASE now
Styleguide
-
Ox(]
|* 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 Q Search workspace Q !
Projects  Styleguides
Curate your design system
Create styleguides to organize components, colors, text styles, and spacing tokens. Link one styleguide to
multiple projects to reference the same resources.
Let's start by creating your first styleguide:
Watch a quick video to learn more about styleguides.
op
@P\a UD){
Styleguides
-
Ox(]


Deleting an annotation

screenKeywords:
Delete your annotation?
Deleted annotations cannot be restored.
CANCEL
|* < 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@g... 2d
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2d
gradient fills up when app opens
Requirement
‘ MESSAGE O | ;
) | X TRE T S gyt N o
D i e
A , Animat
o Q mmatlon. @ Animation @ elete
gradient fills up when app opens Reusable components 5
——— No reusable components yet
S . L R " Assets ."
jsmith.mobb..., 2 versions 2d | 7\ Highlight changes New — 8% + g8 Hide Components v = Add comment m Show All v 5 exportable layers -
|* < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 il  @m
File: Figma basics 8
3 Annotations
m Requirement  Animation
0 @ Requirement jsmith.mobbin2@g... 2d
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2d
gradient fills up when app opens
Requirement
MESSAGE O
u T e i
o Q wnimallﬂ 8
Reusable components N
— No reusable components yet
Assets ."
jsmith.mobb..., 2 versions 2d | 7\ Highlight changes New — 8% + g8 Hide Components v & Add comment m 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
0 @ Requirement jsmith.mobbin2@g... 2d
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA
Requirement
‘ MESSAGE O | ;
- N ¥ vep B 1 oy
s Feeitih - e
e Q o8
Reusable components N
— No reusable components yet
- ] G o o0 Wi - Assets ."
jsmith.mobb..., 2 versions 2d | 7\ Highlight changes New — 8% + g8 Hide Components v = Add comment m Show All v 5 exportable layers -
|* < 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
0 @ Requirement jsmith.mobbin2@g... 2d
note that stroke weight has changed, its 2px
Jone® now
SAN FRANCISCO, CA @ Animation jsmith.mobbin2@g... 2d
gradient fills up when app opens
Requirement
‘ MESSAGE O l ;
u B - =S
A , Animati th.mobbin2@ il. , 2d
o Q mmatlon. @ Animation jsmith.mobbin2@gmail.com,
gradient fills up when app opens Reusable components 5
——— No reusable components yet
Assets ."
jsmith.mobb..., 2 versions 2d | 7\ Highlight changes New — 8% + g8 Hide Components v & Add comment m Show All v 5 exportable layers -


Adding an image

actions:
Adding & Creating
Uploading & Downloading

screenKeywords:
Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
Nof 2tk
<18 el 3 Comment v c@ecoooe
i c No annotations yet
Is this too much white space? | know we want it _
clean but is this _too_ clean Add Ihe first annotation by Command +
Click-ing on the design. Learn more about
J i+1081e] annotations
O ne (https://cdn.zeplin.io/users/64a79df98ef4380f0c ’
35fece/contents/0cf31411-1017-462a-aa85-
SAN FRANCISCO, CA 61f1c7cd3ed6.png) EY o #®BK
gy . } ]
/ \ |
M,
} ﬁ . \
I' *: -~ ‘:‘1 &
AT -~
el Cld
- o 4
o %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 25m ~ — 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
Nl 2t
i vl Comment v c@eoco000
i c No annotations yet
Is this too much white space? | know we want it _
clean but is this _too_ clean Add Ihe first annotation by Command +
Click-ing on the design. Learn more about
J O ne annotations.
947
SAN FRANCISCO, CA Ef o #K
e T, ]
/ \ |
ey
| } . Y B .
. 1 ¢ .| ‘
AT -~
el Cld
- o 4
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 24m ~ — 100% + &8 Nocomponents yet v I®) & Ef Add comment @ ShowAll v No assets yet ..‘


Archiving a project

screenKeywords:
Archive “"MVP"?
CANCEL
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP ooe
Unfollow project updates
ﬁ' Add tags to organize and filter screens. ew Release + Add tag ]
Manage notification settings
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T - Make a copy...
b Chats Chats
\ i Vo James Archive project
Re9|Ster "‘ Thank you! That was very helpful!
Delete project...
Email address ﬂ Will Kenny
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
shoot next week.
Extensions =
ﬁ - CSS and HTML
1 3 .
S W4 P
Members =
Invite
o o @ o s .
Profile 7m  Register 5Tm  Chats 5Tm  Chats mockup 5Tm
9:27 e 9:27 e 9:27 e \3‘,\ : . L
< James BROWSE ALL \‘h
i Search At . \‘“ ™
‘s’ Really love your most recent photo. I've been i ; ., g ", -«
trying to capture the same thing for a few k \X\ ' l f \ \ 1
S S T i\ doas Ly b
|* ° Mobbin Home's Workspace v Q, Search workspace ’ ®
-
Mobbin Home
5 projects, 0 styleguides, 2 members
Projects  Styleguides
#= Sections v All v Q Filter by name
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 e
4 projects No linked styleguides <& Resources &> References - Add link
All web app related material
Show more
WEB 2d WEB 2d WEB 2d WEB 2d
Onboarding Flow Sign up Setting up device Dashboard filters
-
® ® ® ® D
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP ooe
Web, 1x Ve
ﬁ' 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
Overview of the basic screens
% . N James
Reg | Ste r "‘ Thank you! That was very helpful!
W"“(‘""Y
I know... I'm 1 t the funds. .
Jone ﬂ now... I'm trying to get the funds. Integratlons @
SAN FRANCISCO, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm...
Rev Shawn ot w @ H
Wanted to ask if you're available for a portrait 5
shoot next week.
Extensions =
‘ ﬂ CSS and HTML
! b >
iR |
Members =
Invite
o o @ o s =
Profile now  Register Th  Chats Th  Chats mockup Th
9:27 wll T - 9:27 wll T - 9:27 wll T - ~ = % L
< James BROWSE ALL . t\‘\a}
o Search e T \* =
"‘ Really love your most recent photo. I've been i s ) L i, -«
trying to capture the same thing for a few R \';\\k ¥ ‘ 4 'g& ‘.1‘ L
S S T A doas LN b
|* ° Mobbin Home's Workspace v Q, Search workspace ’ !
Project archived
Mobbin Home
5 projects, 0 styleguides, 2 members
Projects  Styleguides
#= Sections v All v Q Filter by name
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 e
4 projects - No linked styleguides & Resources - <& References - Add link
All web app related material
Show more
WEB 2d WEB 2d WEB 2d WEB 2d
Onboarding Flow Sign up Setting up device Dashboard filters
-
L] L] L] L] '


Filtering projects by status

screenElements:
Floating Action Button
Chip

screenPatterns:
Favorite & Pin
Home
Filter & Sort

screenKeywords:
* ° Mobbin Home's Workspace v Q, Search workspace ’ !
-
Sections v © Discovery 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 -
1 project - No linked styleguides - <5 Resources &> References
All web app related material
Show more
927 © Discovery ”
o
Ranictar
WEB 55m
MVP
® 9
-
Ox(]
|* o Mobbin Home's Workspace v Q, Search workspace ‘ ]
-
Mobbin Home
5 projects, 0 styleguides, 2 members
Projects  Styleguides
Project unpinned.
Scroll to project
€ Gotit!
$= 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.
Q Gotit!
Web v o
5 projects No linked styleguides & Resources &> References - Add link
All web app related material
|* ° 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 Q !
#= Sections v All v Q Filter by name Create Project | v
All
@ Discovery 1 Welcome to your team's workspace! #
© Design 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.
©® Development
©® Testing O cotit!
No Status 4
Customize
\rv’cla— v eee
5 projects - No linked styleguides & Resources - <& References - Add link
All web app related material
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


Adding a tag

screenKeywords:
* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace ’ @
-
Sections v Q Filter by name MVP
Web v
ﬁ' Add tags to organize and filter screens. view Release Tag [x] Web 1x
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T -
* Chats Chats Description
% . N James
@ Reglster "‘ Thank you! That was very helpful! Overview Of the basic screens
ﬂ I know... I'm trying to get the funds.
Jone
SAN FRANCISCO, CA Beth Williams Integrations @
milky way. | have a 6D with a 24-100mm... .
like Jira, Slack, Microsoft Teams,
‘ Rev Shawn Trello and Storybook.
Wanted to ask fyou'e available for  portrait
shoot next week. o .
o+ w@H
ﬂﬁ = Extensions =
e 9 "
LB ’,'I",z?': f"’i-‘- CSS and HTML
) Invite
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h ‘ @
9:27 wll T - 9:27 wll T - 9:27 wll T - ~ = % L
< James BROWSE ALL . t\‘\a}
ROCT Search e TR \* -
R il A 0
4 Really love your most recent photo. I've been \ 4 , \ -«
trying to capture the same thing for a few R \';\\k ¥ ‘ 4 'g& k. N L
S S T A doas LN b
|* < Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP ooe
Web, 1x Ve
ﬁ' 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
Overview of the basic screens
% . N James
Reg | Ste r "‘ Thank you! That was very helpful!
W"“(‘""Y
I know... I'm 1 t the funds. .
Jone ﬂ now... I'm trying to get the funds. Integratlons @
SAN FRANCISCO, CA Beth Williams Connect to tools you use everyday;
’ Im looking for tips around capturing the like Jira, Slack, Microsoft Teams,
milky way. | have a 6D with a 24-100mm...
Rev Shawn ot w @ H
Wanted to ask if you're available for a portrait 5
shoot next week.
Extensions =
‘ ﬂ CSS and HTML
! b >
iR |
Members =
Invite
o o @ o s =
Profile now  Register Th  Chats Th  Chats mockup Th
9:27 wll T - 9:27 wll T - 9:27 wll T - ~ = % L
< James BROWSE ALL . t\‘\a}
o Search e T \* =
"‘ Really love your most recent photo. I've been i s ) L i, -«
trying to capture the same thing for a few R \';\\k ¥ ‘ 4 'g& ‘.1‘ L
S S T A doas LN b
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace ’ @
-
Sections v Q Filter by name MVP
Web v
ﬁ' Add tags to organize and filter screens. view Release Overview [} Web, 1x
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T -
* Chats Chats Description
% . N James
@ Reglster "‘ Thank you! That was very helpful! Overview Of the basic screens
W"“(‘""Y
ﬂ I know... I'm trying to get the funds.
SAN FRANCISCO, CA Beth Williams Integrations @
’ im looking for tips around capturing the
milky way. | have a 6D with a 24-100mm... .
like Jira, Slack, Microsoft Teams,
‘ Rev Shawn Trello and Storybook.
Wanted t ask it you'e avallablefo aportrat
shoot next week. o .
o+ w@H
ﬂﬁ " Extensions =
e 9 "
IR ere |00
Ak | €SS and HTML
) Invite
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h ‘ @
9:27 wll T - 9:27 wll T - 9:27 wll T - ~ = % L
< James BROWSE ALL . t\‘\a}
o Search e T \* =
"‘ Really love your most recent photo. I've been i s ) L i, -«
trying to capture the same thing for a few R \';\\k ¥ ‘ 4 'g& ‘.1‘ L
S S T A doas LN b
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Overview Untagged
Web, 1x
ﬁ' Organize the screens more with tag groups.  Status: To-do | [x)
+ Add tag group
Description
9:27 all T - 9:27 all T - 9:27 all T - 9:27 all T - . i
Overview of the basic screens
a Chats Chats
¥ H N James
@ Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds.
Jone Connect to tools you use everyday;
Create password . . .
: o like Jira, Slack, Microsoft Teams,
SAN FRANCISCO, CA Beth Williams Trello and Storybook.
milky w Ve witl 100mm... =0 I3
Rev Shawn
Wanted to ask if you're available for a portrait .
CSS and HTML
b o %
Members =
] = e g b
$ir= i
- - h
o 2 @D o
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
9:27 il T - 9:27 il T - 9:27 il T - o= N ..‘
< James BROWSE ALL \ i :‘\


Landing page

pagePatterns:
Landing Page
Footer Section

screenElements:
Icon
Switch
Animation & Video
Switch
Banner
Top Navigation Bar
Logo
Button

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

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
Handoff is dead — product teams
need design delivery
Zeplin is built on 7 principles that create harmony throughout the product
development lifecycle.
D o0 8 g O @ O
Explore the principles =
Clarify
Communicate intent
Give clarity on what to build.
Centralize documentation for easy reference.
|© 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 Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
&
‘@
Bring harmony to
desi deli
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 Q .
—_—— —_—
< Has Icon, Pressed &> Pressed .
& CIEEIED Buttons [ Primary / True [ Default x
Aa Text Style Catalog I . Bl 2n
w Primary button with icon Primary button with icon
I Spacing and Layout Properties
<& Has Icon, Disabled <& Disabled
v Button Secondary hd o Has Icon: True v
Primary State: Default v
Secondary
) L3
Iseamh (o W Primary button with icon Primary button with icon Description
icons
Carousel <& Has Icon, Default < Default Got any notes?
Card
Bundle
;"bwding ST W Primary button with icon Primary button with icon Share
epper
Toast message < Has Icon, Pressed & Pressed Web: zpl.io/dxE6QD7
P
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
Publish >
tx)x < Superformula. m HSBC .
CLOUD=RA (@ arcToucH
Zeplin Features Design apps Learn
* About us User flows Sketch integration Support articles
Agency membership  Design version control Figma integration Design Delivery
Careers Design ops Adobe XD integration Product Development Glossary
Voyagers Zeplin for Jira Photoshop integration ~ Blog
Terms Global Styleguides Events
Partners Manage design variants Discord
Privacy Connected components Twitter
Open platform
Design tokens Collaboration apps Handy links
Extensions Slack integration Download the Mac app
Zeplin API Trello integration Download the Windows app
Jira integration Go to the web app
MS Teams integration
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
® ® @® < Back GRXL Styleguide Q Search workspace ‘ Q Q
i= Sections v Jiraissue v Q i0S
i MXN ‘,‘ . ‘ :‘ o eoerionee ’
—_— —_— i0s, 1x
Market - Home 1h Market - Search 1h Search Result 1h “
Description
Checkout v oo
Got any notes?
Purchase your snacks or snack bundles
© SOF-9 DONE
Integrations @
Connected to zeplin's Jira
Payment @ v A4 Attach an issue
© SOF-39 IN PROGRESS
8147 e - H Connected to Storybook
Account Extensions =
Steve Donuto Swift, Attributed Strings
514 128 1
Franc A
Members =
2 324 Tok llecte
50000
w Recent purchases O G r\
. L
&Pay Cancal Processing order... ©Oh no, your payment failed 2% u dg
Used by enterprises that build great product experiences
Xpussc i) amazon box . /2 AUTODESK
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
E] Electrolux Zeplin saved a month off of each project, eliminating
unnecessary back & forth exchanges and change requests, it
just happened overnight.
Lanna Solci
Senior UX Designer Read the full story
Align
Collaborate asynchronously
Unite workflows across functions, lifecycles, and
geographies —in a way your design tool can not.
Login Screens v e
LD €
@ Assign
o Brandon
Tag specific team members to communicate the next steps
and track the status of your designs. o Zo Brittany
Jan Bruce
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
Separate ready-to-build designs Manage change
Publish completed designs to Zeplin's platform while Track changes for each screen automatically -
you iterate on designs in your design tool. like Git for designs.
12px
ﬁ Size: | 20px
o Enlarge the description area
-A Add new button
Shg - k_____
| A; 1
4 . 2nd iteration I I
| |
L V- Update the copies
Organize in a standard way Document in context
Make designs easy to find and understand for your Display product requirements, user flows, and
entire product development team. design behaviors on each screen.
€ Mobile .ANIMATION
(P !
LN ] l
|
In Copy Review Deployed for QA Blocked l API .
|
Item Details | .
*er BEHAVIOR
] [ ]
|
|
!
|
|© omlet Explore our new product Omlet — component analytics for developers
& Principles Solutions v Pricing Resources v Login Sign up for free
S
QD @ Meectoix
P Little Caesars Pizza
Ready to build? d'TikTok ~2AUTODESK  WESTJET %#
Publish your designs now for free bp
amazon # STARZ
. N
Publish >
tx)x < Superformula. QHSBC .
CLOUD=RA (@ arcToucH


Removing an extension

screenElements: Checkbox Dialog

screenKeywords:
Remove “CSS” from project?

Extension will be removed for all members of this

project. You can add it back from .
KEEP
|* < Dashboard Profile > Q Search workspace " @
. . X: 142px Y: 236px
T I I S Width: auto (92px)  Height: auto (40px)
Extensions Explore extensions
Typeface
Extensions are built by community to generate code snippets from designs. Pick the )
ones that fit your workflow, or create your own and contribute. Title_36px e
p Comfortaa-Regular
! :; Size: 36px
Button : ; Align: Center Vertical Align: Center
: (--light-orange);
o ol (255, 55, ) ); Letter Spacing: -0.54px
}
#black
. #000000 ©
HTML by zeplin o
Generates HTML image elements from layers with assets. ke
Content
[ Jane
HTML =
i * NELTE
DONE
\‘ - .
o —
jsmith.mob... , 1 version 19m — 100% <+ g9 No components yet v [®) 2 E}Y Add comment @ 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 ’_ @
i : X: 142px Y: 236px
T I I o Width: auto (92px)  Height: auto (40px)
Extensions Explore extensions
Typeface
Extensions are built by community to generate code snippets from designs. Pick the )
ones that fit your workflow, or create your own and contribute. Title_36px e
. Comfortaa-Regular
g : : Size: 36px
Button : ; Align: Center Vertical Align: Center
: (--light-orange);
5 ol (255, 255, ) y: Letter Spacing: -0.54px
} )
#black
. #000000 @
CSS by zeplin
Generates CSS snippets from colors, text styles and layers =
zeplin.io « github contont
HTML by zeplin o
Generates HTML image elements from layers with assets. e Jane
HTML 0 =
i : NELTE
| DONE
[+ -
jsmith.mob... , 1 version 19m — 100% <+ g3 No g9 Hide Components v Q [®) &} Add comment m Show All v <


Workspace settings

screenElements: Button Tab

screenPatterns:
Settings & Preferences
Settings & Preferences
Billing

screenKeywords:
* < Workspace Members
Hi! Hope you're great today )
WORKSPACE BILLING DEVELOPER
ﬁ Mobbin Workspace
Workspace settings
Manage who can add a member with a paid role or change a member's role
from free to paid—learn more
@ Owner, Admins, Editors and Developers
O Owner and Admins
‘- Members can only invite other members at a role level less than or equal
to their own role. All members can add Reviewers to your workspace
projects. You can learn more about roles here.
-
Ox(]
|* { Workspace Workspace Members
Mobbin Workspace
ﬁ P Export CSV Settings
1 of 1 seat
All roles v Q, Search for a member No seats left, add more.
|:| Name Role v Access Last Seen
jsmith.mobbin2@gmail.com !
‘! jsmith.mobbin2@gmail.com Owner All projects Now
-
Ox(]
|* < 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(]
|* < Workspace Members
Hi! Hope you're great today )
WORKSPACE BILLING DEVELOPER

Webhooks

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

certain events in Zeplin.

Discover webhooks in our APl documentation.
-
Dn(]


Watching a video (animated)

screenElements:
Animation & Video
Animation & Video

screenKeywords:
. o
Solutions v

Zeplin brings your designs to life easier

@ :
%asﬂe;o & psps' e Microsoft
@he Washington Post 2 pepsico amazon

N—-/

Workspace for the entire team Publish finalized designs
|© Si for f
Solutions v 'gn up foriree
Zeplin brings your designs to life easier
9 How Do Product Teams Use Zeplin for Design Delivery? -~
Share
' 8
h‘ ~ ‘ - .
—_—— .; - - -
Davy Fung ‘
MORE VIDEOS || N 4
P o) 006/048 B " Youlube ({3
Workspace for the entire team Publish finalized designs
We built Zeplin so everyone on your team can easily Establish clarity and accountability on exactly what to
understand the design. Sections, statuses, and the Jira build by providing a locked design that is formally
integration translate the “wall of screens” inside design published for the entire team.
|& Principles Solutﬁns o Pricing Resources v Login Sign up for free
Zeplin brings your designs to life easier

Workspace for the entire team Publish finalized designs

We built Zeplin so everyone on your team can easily Establish clarity and accountability on exactly what to
understand the design. Sections, statuses, and the Jira build by providing a locked design that is formally
integration translate the “wall of screens” inside design published for the entire team.


Resetting password

screenPatterns:
Acknowledgement & Success
Forgot Password
Forgot Password
Login

pageType: Application Application Application Application Application Application Application

screenKeywords:
Password updated
@ We successfully changed your password.
- If you don’t have the Mac app, download.
|, Forgot your password?
ﬁ No worries, we'll send you an email with instructions to
Q reset your password.
Q:
Work email
|Change password
//')) Enter your new password.
New password
=)
|. I-\ .
St
We just sent you an email.
Please follow the instructions in the email to access
your account.
|Change password
@ Enter your new password.
|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.
|, Forgot your password?
@ No worries, we'll send you an email with instructions to
Q reset your password.
?
jsmith.mobbin2@gmail.com


Editing label size

hotspotType: Drag

screenKeywords:
* < Dashboard Dashboard Flows Styleguide Q Search workspace ’ [C]
-
New ee-
MVP
s> zpl.io/YYQDxYJ
Chats Chats mockup Individual chat
9:27 il T - 9:27 il T - 9:27 il T -
Chats Chats < James
"" James .
“ Thank you! That was very helpfult A 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
Tknow... I'm trying to get the funds. e
Click the entire A fast 50mm like f1.8 would help with the
. bokeh. I've been using primes as they tend to
item get a bit sharper images.
Beth Williams
I'm looking for tips around capturing the
milky way. | have a 6D with a 24-100mm. XY
4’ Thank you! That was very helpful!
Rev Shawn
‘Wanted to ask if you're available for a portrait
shoot next week.
: o @ o
— 5% + J, " mee =t No Open C t .:‘
oy i+ = B 0 Open Comments v
.}
|* < Dashboard Dashboard Flows Styleguide Q Search workspace ’ [C]
-
New ee-
MVP
s> zpl.io/YYQDxYJ
Chats Chats mockup Individual chat
9:27 il T - 9:27 il T - 9:27 il T -
Chats Chats < James
"" James .
“ Thank you! That was very helpfult A 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
Tknow... I'm trying to get the funds. e
Click the entire A fast 50mm like f1.8 would help with the
. bokeh. I've been using primes as they tend to
item get a bit sharper images.
Beth Williams
I'm looking for tips around capturing the
milky way. | have a 6D with a 24-100mm. XY
4’ Thank you! That was very helpful!
Rev Shawn
‘Wanted to ask if you're available for a portrait
shoot next week.
: o @ o
— 5% + J, " mee =t No Open C t .:‘
oy i+ = B 0 Open Comments v
.}
|* < Dashboard Dashboard Flows Styleguide Q Search workspace ’ [C]
-
MVP S
s> zpl.io/YYQDxYJ
Chats Chats mockup Individual chat
9:27 il T - 9:27 il T - 9:27 il T -
Chats Chats < James
"" James .
“ Thank you! That was very helpfult A 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
Iknow... 'm trying to get the funds. e
) e 50mm like 1.8 would help with the
Click the entire item I've been using primes as they tend to
it sharper images.
Beth Williams
I'm looking for tips around capturing the
milky way. | have a 6D with a 24-100mm. XY
4’ Thank you! That was very helpful!
Rev Shawn
‘Wanted to ask if you're available for a portrait
shoot next week.
: o @ o
; m ¥ On(
- 5% + 4 T Bee B @ NoOpenComments v -
. ___}


Choosing screen density

screenElements:
Dialog
Radio Button

screenElements:
Grid List
Dialog
Radio Button

screenKeywords:
* < Workspace Dashboard Flows Styleguide Q Search workspace ’_ @
Sections v Q Filter by name MVP vee
Web, 1x Ve
& 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 eveny;
‘ g s b ke Jira, Slack, Microsoft Tear
ilky I hi 6D with a 24-1001 e
Rev Shawn o+ @A
Wanted to ask if you're available for a portrait
Extensions =
e : CSS and HTML
Members =
Invite
N X .
Profile 8m  Register 52m  Chats 52m  Chats mockup 52m
. .
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 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
|Choose your screens’ densities
Changing the density might affect your assets since Zeplin generates them
based on this setting.
Please re-export your designs after changing the density.
1x 320px, 768px, 1024px, 1440px width
QO 2x 2560px, 2880px width
What | need to choose? CANCEL


Adding a comment

screenElements:
Keyboard Key
Text Field
Popover

screenPatterns:
Add & Create
Comments

screenKeywords:
Q < Dashboard Profile > Q Search workspace " @
Share: zpl.io/Am8PpX6 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
oy Annotations
e' SAY "
N .2
) <
! No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O ne annotations.
SAN FRANCISCO, CA Ef o #K
p, £ P .piﬂ
/ \ |
-
I‘ ‘: - (‘1 %
AY -~
",
| B
| “}
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mobbi..., T version 1Tm ~ — 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 th
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Annotations
.2l
i vl Comment v @ee00000
i o No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O n e Post annotations.
SAN FRANCISCO, CA Ef o #K
e T, ]
/ \ |
ey
’ sl e
| A b ‘: | 4
> 1 'I
AT -~
el T
- o 4
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 22m ~ — 100% + &8 No components 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
Nof 2tk
<18 el 3 Comment v c@ecoooe
i c No annotations yet
Is this too much white space? | know we want it _
clean but is this _too_ clean Add Ihe first annotation by Command +
Click-ing on the design. Learn more about
J i+1081e] annotations
O ne (https://cdn.zeplin.io/users/64a79df98ef4380f0c ’
35fece/contents/0cf31411-1017-462a-aa85-
SAN FRANCISCO, CA 61f1c7cd3ed6.png) EY o #®BK
gy . } ]
/ \ |
M,
} ﬁ . \
I' *: -~ ‘:‘1 &
AT -~
el Cld
- o 4
o %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 25m ~ — 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 )
9:27 all ¥ @)
File: Figma basics 8
L Annotations
! ' WA
NS £
TS
for ‘J % ®
o ‘ jsmith.mobbin2@gmail.com 2m e e
Is this too much white space? | know we want it Add the first annotation by Command +
clean but I'm not sure about this Click-ing on the de3|gn_. Learn more about
O ne annotations.
SAN FRANCISCO, CA 5 Ef o #K
& %
FOLLOW JANE
X
N P W
P - Post @ i@
/ \ |
-
¥ 0
|’ ‘.: < ‘n 1
A3 .
- W
~‘| \ B
b\ %
-
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 28m ~ — 100% + &8 No components 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
Nl 2t
i vl Comment v @ee00000
i o No annotations yet
Is this too much white space? | know we want it _
clean but is this _too_ cIean| Add ﬁhe first annotation by Command +
Click-ing on the design. Learn more about
J O ne annotations.
947
SAN FRANCISCO, CA Ef o #K
e T, ]
/ \ |
ey
’ sl e
| A b ‘: | 4
> 1 'I
AT -~
el Cld
- o 4
3 %
- _
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob..., 1 version 24m ~ — 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' SAY "
N .2
) <
i o No annotations yet
Add the first annotation by Command +
Click-ing on the design. Learn more about
J O ne annotations.
SAN FRANCISCO, CA Ef o #K
p, £ P .piﬂ
/ \ |
-
I‘ ‘: - (‘1 %
AY -~
",
| B
| “}
‘ Reusable components N
) No reusable components yet
[} SessmsmEE .
-
Assets
jsmith.mob... , 1 version 29m  — 100% + I®) & Ef Add comment @ ShowAll v T .0‘


Filtering screens by tag

screenPatterns:
Empty State
Filter & Sort

screenPatterns:
Filter & Sort
Empty State
Filter & Sort

screenKeywords:
* < Mobbin Home’s Workspace Dashboard Flows Styleguide Q Search workspace ’_ !
Sections v Q Filter by name MVP
Web v
Untagged
Web, 1x
Status: @ In Review @ Blocked @ Released
+ Add tag group Description
Overview of the basic screens
9:27 wll T .
Chats
Integrations ®
Connect to tools you use everyday;
like Jira, Slack, Microsoft Teams,
Trello and Storybook.
o+ w@H
Extensions =
CSS and HTML
Members =
Invite
® 9
Chats 2h s
On(]
|* < 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 = . ﬂ% “"‘. |
|* < Mobbin Home'’s Workspace Dashboard Flows Styleguide Q  Search workspace ‘.‘ !
Sections v Q Filter by name MVP
Web v
Untagged Web, 1x
Status: @ In Review @ Blocked © Released
+ Add tag group Description
Overview of the basic screens
There are no screens with the selected tags.
Integrations
Reset tags 9 ®
Connect to tools you use everyday;
like Jira, Slack, Microsoft Teams,
In order to add a screen to this tag, reset tag and right click to a screen. Trello and Storybook.
¢+ w[@H
Extensions =
CSS and HTML
Add tag...
Members =
Invite
—— L
-
On(]


Adding images (Unsplash)

actions:
Adding & Creating
Selecting & Choosing

appName: Qatalog

appCategory: Business

appTagline: Best AI assistant for work

companyHqRegion: Europe

screenElements: Tile Gallery

screenElements:
Search Bar
File Upload
Tile
Gallery

screenPatterns:
Search
Upload & Download
Select

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

allAppCategories:
Collaboration
Artificial Intelligence
Business

screenKeywords:
o Collaborators ~  []
Kickoff meeting
Meeting details
The kickoff meeting for the new design of Starmobbin's landing page was held to discuss the
goals, strategy, design principles, and timeline. The primary goal is to create a landing page that
is both attractive and user-friendly. The team discussed our objectives and outlined the key
features we wanted to ensure the design was successful. We also discussed the various design
principles we wanted to adhere to, such as usability, simplicity, consistency, and accessibility.
N Finally, our team set a timeline and planned deadlines for the various stages involved in the design
process.
We have to align our goals and strategy for the best outcome in this project
1. Perform research on the target audience to understand their needs, wants, and motivations.
2. Develop strong calls to action that compel users to take the next step.
3. Create an easy-to-navigate interface that guides users to relevant content.
4. Keep the overall objective in mind and ensure the page serves its purpose.
Create some wireframes for the landing page @ 1%
=E = E 9 < BH @ B © 3
|Upload  Unsplash
Q search
Search Unsplash images
\ M y 9
e SRS = Q <.;5>_§) )
b . S %
= |4 s o A = 4
= T rowe SNy e | ; 2
- | Ty,
=
%
Cancel Save
|Upload Unsplash
Please drag & drop a file from your computer or click to browse.
Drag & drop a file or click to browse
Cancel Save
|) principles we wanted to adhere to, such as usability, simplicity, consistency, and accessibility.
@ John Smith o Finally, our team set a timeline and planned deadlines for the various stages involved in the design
process.

1. Perform research on the target audience to understand their needs, wants, and motivations.
2. Develop strong calls to action that compel users to take the next step.

3. Create an easy-to-navigate interface that guides users to relevant content.

4. Keep the overall objective in mind and ensure the page serves its purpose.

Create some wireframes for the landing page Jul i
> -
[ e—
|Upload  Unsplash
Q laptop
Search Unsplash images
= WA e Slh |
P )
2 »F‘ -:!"“ =N . A
: =N N\ ? ( Fi
= = N J ‘ ' o
Ay : 2
-y &;-j-,j_ \ \o\
-0 i
% _ . ' ~ 7.“7 [ l'v‘
%
|process.
= John Smith (1m]

1. Perform research on the target audience to understand their needs, wants, and motivations.
2. Develop strong calls to action that compel users to take the next step.
3. Create an easy-to-navigate interface that guides users to relevant content.
4. Keep the overall objective in mind and ensure the page serves its purpose.

Create some wireframes for the landing page Jul i

O B + @ oo
>
[ e—
The final design should be simplistic yet captivating to users
|Upload  Unsplash
Q search
Search Unsplash images
[ 6 s 39
<] 150 S o)
s - NA ~
= - 1AL
e f (A e |
= = . z Sy AT ' 3
A SINEYE S = iﬂi.
= S g & , :
. [ = e P s N
- | =1 =
gy b St (e
%
Cancel Save
|IV MNULIT GQllilduluayvoe diivd boel 11hivld |u|y. e tLdlil UivvUodvud VUIT VG LLLIVEYD diTv Vulilivu Uiv I\Cy
S John Smith o features we wanted to ensure the design was successful. We also discussed the various design
principles we wanted to adhere to, such as usability, simplicity, consistency, and accessibility.
Finally, our team set a timeline and planned deadlines for the various stages involved in the design
process.
1. Perform research on the target audience to understand their needs, wants, and motivations.
2. Develop strong calls to action that compel users to take the next step.
3. Create an easy-to-navigate interface that guides users to relevant content.
4. Keep the overall objective in mind and ensure the page serves its purpose.
Create some wireframes for the landing page Jul i
Wil WY L
_,,=§:‘-h:‘ A XY P )
o\
> A ‘ >N
| — @,@ ) ;
\
/] , \
Fil e
% ! e
A |
The final design should be simplistic yet captivating to users
|ﬂ °
! Collaborators ~  []
Kickoff meeting
Meeting details
The kickoff meeting for the new design of Starmobbin's landing page was held to discuss the
goals, strategy, design principles, and timeline. The primary goal is to create a landing page that
[ ) B i ey
Hi Heading 1 ‘= Bullet list Slack channel (Connect) design
H2 Heading 2 = Numbered list 2 Me oility.
N he design
Hs; Heading 3 ‘= Checklist 1 Embed
= Paragraph ' Image " Divider
B Bold = Table # Figma
iivations.
7 ltalic v Import tasks from... r Loom
U Underline = Create a Page x Vimeo
99 Quote ® Hint ) Youtube
{} Code snippet @ Mention
_ o @8 &
/
=E = E 9 < BH @ B © 3
|Upload  Unsplash
Q laptop
Search Unsplash images
] N ~
- _nh* 2 g !\ N 3
—— : Z '
n’ -— ' 1 r E -_
- N __] | ;
LE M) e
T 4 ; et o : EP
YN A A - \. y A ‘ —
=1 d W
ﬁ4 ,. —— . —‘-" o o .
4 7 > -- ~a 2% ‘—a
o ol
%
Cancel Save
|) principles we wanted to adhere to, such as usability, simplicity, consistency, and accessibility.
@ John Smith o Finally, our team set a timeline and planned deadlines for the various stages involved in the design
process.
1. Perform research on the target audience to understand their needs, wants, and motivations.
2. Develop strong calls to action that compel users to take the next step.
3. Create an easy-to-navigate interface that guides users to relevant content.
4. Keep the overall objective in mind and ensure the page serves its purpose.
Create some wireframes for the landing page Jul i
O B + @ oo
> -
[ e—
|> John Smith (Im] . . P 000 X

Meeting details
The kickoff meeting for the new design of Starmobbin's landing page was held to discuss the
goals, strategy, design principles, and timeline. The primary goal is to create a landing page that
is both attractive and user-friendly. The team discussed our objectives and outlined the key
features we wanted to ensure the design was successful. We also discussed the various design
principles we wanted to adhere to, such as usability, simplicity, consistency, and accessibility.
Finally, our team set a timeline and planned deadlines for the various stages involved in the design
process.

We have to align our goals and strategy for the best outcome in this project

1. Perform research on the target audience to understand their needs, wants, and motivations.

2. Develop strong calls to action that compel users to take the next step.

3. Create an easy-to-navigate interface that guides users to relevant content.

4. Keep the overall objective in mind and ensure the page serves its purpose.

> Create some wireframes for the landing page @ &2
~
Click to upload an image
=E = E 9 < BH @ B © 3
|Upload  Unsplash
Q laptop
Search Unsplash images
] N ~
) " —
. - e "*-\"i . !\ N
ﬁ—-i : 4,
w b= 1 F y
- N _J i
Ly ] s
T 4 ; et o - 7 .
L gﬁ - A . \' e ‘/‘
=1 d W
“ v - * ‘q - R ‘
%
Cancel
|Upload  Unsplash
Q laptop
Search Unsplash images
= n e Sl |
panss] [
R =N . A
: =N N\ ? ( Fi
Ay : 2
- Ny 1 ygé 3
— i@
] __ . . . =
! & !
%
Cancel Save
|Upload Unsplash
Please drag & drop a file from your computer or click to browse.
O
Drag & drop a file or click to browse
Cancel Save


Creating a research

screenKeywords:
@ 4 UX DESIGNERS Overview Tasks Threads Resources Workflows Research Usability Projects Manage
Search { ;; Recent All Q Find £ Connect
S
UX Design... ‘
o o Landing page research B N ® Jane Doe
Research When researching landing pages for a productivity web app, it is...
174
88 .
John Smith
= John is a UX designer with one year of ex-
[P perience in the field. He has excellent
problem-solving and analytical skills, and
oo
CI] is passionate about creating user-friendly
Browse
digital experiences for customers. He has
a knack for keeping up with the latest
technology trends and is committed to
creating products that are both visually
appealing and intuitive to use.
® @ JaneD. + Teams
Pages +
v 1Tag +
Integrations +
Q
&
@
|b Research connectedto @ John Smith v X
Landing page research

When researching landing pages for a productivity web app, it is important to
focus on the qualities that separate it from the competition. It should be clear why
the app stands out, such as unique features, ease of use, and affordability. It
should also communicate the app’s key benefits, while making the user’s
experience seamlessly simple. Additional factors to consider include using visuals
|@ & UX DESIGNERS Overview Tasks Threads Resources Workflows Research Usability Projects Manage v
Q
Search Recent All Q Find £ Connect
S
UX Design... ‘ y
a
7 Connect to Research
xR J Ohn Sm|th Connect UX Designers to Research for easy
Rty discovery and context. Start building connections
between UX Designers and Research
= John is a UX designer with one year of ex-
[FIEEEE perience in the field. He has excellent ER o s or < Connect
problem-solving and analytical skills, and
oo
CI] is passionate about creating user-friendly
Browse
digital experiences for customers. He has
a knack for keeping up with the latest
technology trends and is committed to
creating products that are both visually
appealing and intuitive to use.
® @ JaneD. + Teams
Pages +
v 1Tag +
Integrations +
Q
@
®
|O Research connectedto @ John Smith v X
Research name
Enter a brief description
“
Private v Create
|@ & UX DESIGNERS Overview Tasks Threads Resources Workflows Research Usability Projects Manage v
Search Recent All Q Find < Connect
2 ‘
UX Design... ' { - ‘i
o o Landing page re;earch - N ® lane Doe
Research When researching landing pages for a productivity web app, it is...
o When researching landing pages
R . for a productivity web app, it is
Usabilty J Oh n S m |th important to focus on the qualities
that separate it from the
. . . competition. It should be clear why
= John is a UX designer with one year of ex- the app stands out, such as unique
R perience in the field. He has excellent features, ease of use, and
problem-solving and analytical skills, and affordabilty. It should ?Iso
oo . . : ; communicate the app’s key
og is passionate about creating user-friendly benefits, while making the user’s
Browse L 5
digital experiences for customers. He has experience seamlessly simple.
a knack for keeping up with the latest Add'tlonal.facu."s o consider
. . include using visuals to make the
technology trends and is committed to page attractive, using actionable
creating products that are both visually language, including customer
appealing and intuitive to use. t?s“mon'al.s » and offering simple
signup options. It can also be
beneficial to research how
® @ JaneD. + Teams competitors are using their landing
pages so you understand what
works and what doesn’t. This will
Pages + also give you an idea of what the
industry standards are in terms of
age design and content.
v 1Tag + i =
Integrations +
Q
@
®


Zeplin API

pagePatterns:
API Docs & Developers Page
Landing Page
Footer Section

pageType: Marketing Marketing

screenKeywords:
4  support  Join Discord! -0-
Guides ¥  Welcome Q Search 2®K
INTRODUCTION [ Suggest Edits
Welcome
Welcome
ZEPLIN API
Getting Started with Zeplin API Hey there, we're glad that you're interested in building a Zeplin app—welcome aboard! & = TABLE OF CONTENTS
API Reference 2 . Zeplin API
Zeplin API
Webhooks
WEBHOOKS Zeplin API provides a wide range of capabilities for you to access the data in Zeplin. It lets you read all the resources
Getting Started with Webhooks including projects, screens, components, layers, assets, notes and so on. Some of these resources are currently
read-only and some can also be created/edited via the API.
Setting up Webhooks
Managing Webhooks WebhOOkS
> Receiving Webhook Events
i Using the Webhooks, you can receive notifications about changes happening in Zeplin. It brings real-time updates to
Responding to Events .
your Zeplin apps.
Webhook Events Reference 2
Zeplin APl and the Webhooks enable building a wide set of solutions all the way from internal scripts/applets to full-
blown apps.
We'd love to hear about what you're planning to build and your feedback on the APIs. Or, if you have any questions
you can find us in the Zeplin Discord Server. You can also ping us at dx@zeplin.io for any questions or suggestions.
Cheers! @&
Updated 11 months ago
WHAT'S NEXT
Getting Started with Zeplin API
Getting Started with Webhooks
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
Publish >
tx)x < Superformula. m HSBC .
CLOUD=RA (@ arcToucH
Zeplin Features Design apps Learn
* About us User flows Sketch integration Support articles
Agency membership  Design version control Figma integration Design Delivery
Careers Design ops Adobe XD integration Product Development Glossary
Voyagers Zeplin for Jira Photoshop integration ~ Blog
Terms Global Styleguides Events
Partners Manage design variants Discord
Privacy Connected components Twitter
Open platform
Design tokens Collaboration apps Handy links
Extensions Slack integration Download the Mac app
Zeplin API Trello integration Download the Windows app
Jira integration Go to the web app
MS Teams integration


Workspace details

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(]
|* { Workspace Workspace Members
Mobbin Workspace
ﬁ P Export CSV Settings
1 of 1 seat, 1 reviewer
All roles v Q, Search for a member No seats left, add more. Invite Members
|:| Name Role A Access Last Seen
jonsmith.mobbin@gmail.com . . i
Q Pending Invitation « Resend Reviewer v Al
jsmith.mobbin2@gmail.com !
‘g jsmith.mobbin2@gmail.com Owner All projects Now
-
Ox(]
|* ° Mobbin Home's Workspace v Q, Search workspace Q !
Sections v All v Q Filter by name Create Project | v
et e e e el
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 34m
MVP
-
Ox(]


Filtering comments

screenPatterns:
Other Content
Filter & Sort

screenKeywords:
* < Dashboard Profile > Q Search workspace " )]
Share: zpl.io/Am8PpX6 ™
View in Stage Mode )
9:27 all ¥ @)
File: Figma basics 8
S Comments
e' .:A:J/ e
N £
TS
b ‘* % @ jsmith.mobbin2@gmail.com 4m  #1
|
c Is this too much white space? | know we
want it clean but I'm not sure about this
SAN FRANCISCO, CA .‘
'
X
~Pre
@ jsmith.mobbin2@gmail.com now  #3
p’ S 'f'\! can you double check that this is the right
- font pls
¢ \ |
-
. F ~
|’ ": 2 1 E
A3 .
- W
~ P
5\ %
.
‘ Reusable components N
) No reusable components yet
[~ eSS
-
Assets
jsmith.mob..., 1 version 30m ~ — 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 ol T . ) . .
File: Figma basics 8
S Comments
Ay g
e ' N £~
bl
1%
No resolved comments yet
Looks like things are going pretty hectic
J these days ©
O n e You can resolve comments from the first
comment or by right clicking on a
SAN FRANCISCO, CA comment
FOLLOW JANE
Requirement
‘ MESSAGE O l T
', £F P p\"v‘
, -~
/ \ lg‘
| ’ " N AN . .
l ¥
; | ¢ ]
v
1 V ”
~‘I 9 —
-
‘ Reusable components 5
- No reusable components yet
R ESSE
-
Animation Assets
jsmith.mob... , 1 version 36m  — 100% =+ {2 No compor v @ ) 8 Ef Addcomment @  Filtered v Ny T ..‘
|* < Dashboard Profile > Q. Search workspace ‘ @
Share: zpl.io/Am8PpX6 th
View in Stage Mode 5]
9:27 ol T (wm)
File: Figma basics 8
S Comments
) =2
! | Ay b
N =tk
sl % @ jsmith.mobbin2@gmail.com 4m #1
0 Is this too much white space? | know we
want it clean but I'm not sure about this
SAN FRANCISCO, CA A‘
h >
2
7
Requirement Open v
MESSAGE O T
Mentioned
. ] Resolved @ jsmith.mobbin2@gmail.com now  #3
p‘ 3 ‘f'm can you double check that this is the right
- ~ None font pls
/ \ |
f""‘, ce0cocee
. p ~
|’ ‘z 7 1 e
v
AW All v
“' N—
. N ¥ Mentioned
.
‘ Type > Reusable components 5
B No reusable components yet
T None
-
A ti Assets
jsmith.mob... , 1 version 36m ~ — 100% <+ 53 No components yet v @mma D 8 Ef Addcomment @@  Show All v e ..‘


Exporting design tokens

screenKeywords:
Export Design Tokens
Design Tokens are JSON representations of colors, text styles and spacing tokens in your styleguide.
Using these tokens, you can propagate changes in your design system to your development
environment.
You can export Design Tokens in two ways:
Include linked styleguides

1. Fetch Design Tokens using the Zeplin API

GET /v1/projects/64a7ab5bb278dd50ec3db2a0/design_tokens?include_linked_style
2. Download Design Tokens as a .zip package
|* < 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‘
|Export Design Tokens
Check out the to learn more about fetching design tokens using the Zeplin API.
GET /v1/projects/64a7ab5bb278dd50ec3db2a0/design_tokens?include_linked_styleguides=trt
{
"colors": {
"black": {
"value": "rgb(e, 0, 0)",
"metadata": {
"source": {
"styleguide": {
"id": "64ab9faa4b18c7212c2c600d",
"name": "Untitled"
"platform": "web"
}
b
"resource": {
"id": "64a7b369a9c8b90ef7ff2e7f"
"type": "Color"
}
}
B
"reddish-pink": {
"value": "rgb(255, 44, 94)",
"metadata": {
"source": {
"styleguide": {
"id": "64ab9faa4b18c7212c2c600d",
"name": "Untitled"
"platform": "web"
}
b
"resource": {
"id": "64aba@a45898592135f526d3"
"type": "Color"
BACK
|Export Design Tokens
Design Tokens are JSON representations of colors, text styles and spacing tokens in your styleguide.
Using these tokens, you can propagate changes in your design system to your development
environment.
You can export Design Tokens in two ways:
Include linked styleguides

1. Fetch Design Tokens using the Zeplin API

GET /v1/projects/64a7ab5bb278dd50ec3db2a0/design_tokens?include_linked_style “
2. Download Design Tokens as a .zip package


Adding a tag group

screenElements:
Chip
Text Field

screenPatterns:
Suggestions & Similar Items
Add & Create

pageType: Application Application Application Application Application Application

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: [ J
+ 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 2 @D o
Profile Th  Register 2h  Chats 2h  Chats mockup 2h =
On(]
9:27 Sl = . 9:27 Sl = . 9:27 Sl = . ﬂ% “"‘. |
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Empty states Untagged
Web, 1x
ﬁ' Organize the screens more with tag groups.  Status: To-do | [x)
Untitled:
Type Description
Default v - 9:27 il - 9:27 il - 9:27 il - i i
' ' ' Overview of the basic screens
Member a Chats Chats
H > James
Status Reg l Ste r "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds.
Tag Group Connect to tools you use everyday;
like Jira, Slack, Microsoft Teams,
Beth Williams Trello and Storybook.
1 looking for tps around capturing the ]
I l milky way. | have a 6D with a 24-100mm... ° _..!_. * m B
Rev Shawn
Wanted to ask if you're available for a portrait .
CSS and HTML
Lo g b
;ﬂ z e o o Members =
O e Bl
- - -
o 2 @D o
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
9:27 il = - 9:27 il = - 9:27 il = - o= o ..‘
< James BROWSE ALL \ i :‘\
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Empty states Untagged
Web, 1x
ﬁ' Organize the screens more with tag groups.  Status: To-do | [x)
Approved:
Type Description
Default v - 9:27 il = - 9:27 il T - 9:27 il T - A _
' ' ' Overview of the basic screens
Member a Chats Chats
H > James
Status Reg l Ste r "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds.
Approved e Connect to tools you use everyday;
SRRSO like Jira, Slack, Microsoft Teams,
Beth Williams Trello and Storybook.
Create m looking for tips around capturing the
I l milky way. | have a 6D with a 24-100mm... ° _..!_. * m B
Rev Shawn
Wanted to ask if you're available for a portrait .
CSS and HTML
g )
;ﬂ e Members =
! B i i
- - h
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
9:27 il T - 9:27 il T - 9:27 il T - o= N ..‘
< James BROWSE ALL \ i :‘\
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Empty states Untagged
Web, 1x
ﬁ' Organize the screens more with tag groups.  Status: To-do | [x)
+ Add tag group
Description
9:27 all T - 9:27 all T - 9:27 all T - 9:27 all T - . i
Overview of the basic screens
a Chats Chats
¥ H N James
@ Re9|Ster "‘ Thank you! That was very helpful!
I know... I'm trying to get the funds.
Jone Connect to tools you use everyday;
Create password . . .
: o like Jira, Slack, Microsoft Teams,
SAN FRANCISCO, CA Beth Williams Trello and Storybook.
milky w Ve witl 100mm... =0 I3
Rev Shawn
Wanted to ask if you're available for a portrait .
CSS and HTML
b o %
| B o B el
$ir= i
- - h
o 2 @D o
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
9:27 il T - 9:27 il T - 9:27 il T - o= N ..‘
< James BROWSE ALL \ i :‘\
|* < 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 = . ﬂ% “"‘. |
|* < Mobbin Home's Workspace Dashboard Flows Styleguide Q Search workspace " @
Sections v Q Filter by name MVP
Web v
Empty states Untagged
Web, 1x
Approved:
+ Add tag group
Description
9:27 wll T - 9:27 wll T - 9:27 wll T - 9:27 wll T -
Overview of the basic screens
b Chats Chats
% . N James
@ Re9|Ster "‘ Thank you! That was very helpful!
ﬂ I know... I'm trying to get the funds.
Jone Connect to tools you use everyday;
AN FRANCISCO, CA ) B like Jira, Slack, Microsoft Teams,
' Beth Williams Trello and Storybook.
milky way. | have 60 with a 24-100mm... . .
Rev Shawn
Wanted to ask if you're available for a portrait
shoot next week. Extensions =
CSS and HTML
(ol 2 I8
| B *—t';~ o Members =
¥ b Fenrs e
- - -
o o @ o e
Profile Th  Register 2h  Chats 2h  Chats mockup 2h
9:27 il = - 9:27 il = - 9:27 il = - o = il ."
S b, o
< James BROWSE ALL \ " \“h‘;‘\


Principles of design delivery

screenElements:
Card
Grid List

screenElements:
Animation & Video
Switch
Banner
Top Navigation Bar
Logo
Card
Grid List
Progress Indicator

pagePatterns:
Landing Page
Features Page
Features Page

pageType: Marketing Marketing Marketing Marketing Marketing

screenKeywords:
* Principles Solutions v Pricing Resources Login Sign up for free
Great products can only emerge when there's harmony across product development lifecycles,
functions, and locations.
Aligning design, product management, and dev teams at scale takes time. The process is messy.
The pace is relentless. It's difficult to keep your design vision whole with every round of
revisions — no matter which design tool you use.
Today's workflows require a new way: design delivery. Zeplin combines not just new technology,
but a set of principles to make fluid design delivery possible for even the largest organizations.
These seven principles are at the center of how we work.
01 02 03
PrlnClPIeS Of Separate ready-to-build designs Track changes to shared designs Organize designs in a
design de|ivery from designs in-progress deliberately standardized way
04 05 06 07
Communicate the complete user Document behavior and Display design system elements Include technical specs & assets
journey requirements in context that are used tailored to the development stack
|© omlet Explore our new product Omlet — component analytics for developers
* Principles Solutions v Pricing Resources v Login Sign up for free
&
‘@
Bring harmony to
desi deli
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 Q .
—_—— —_—
< Has Icon, Pressed &> Pressed .
& CIEEIED Buttons [ Primary / True [ Default x
Aa Text Style Catalog I . Bl 2n
w Primary button with icon Primary button with icon
I Spacing and Layout Properties
<& Has Icon, Disabled <& Disabled
v Button Secondary hd o Has Icon: True v
Primary State: Default v
Secondary
) L3
Iseamh (o W Primary button with icon Primary button with icon Description
icons
Carousel <& Has Icon, Default < Default Got any notes?
Card
Bundle
;"bwding ST W Primary button with icon Primary button with icon Share
epper
Toast message < Has Icon, Pressed & Pressed Web: zpl.io/dxE6QD7
P
|* Principles Solutions v Pricing Resources Login Sign up for free
Great products can only emerge when there's harmony across product development lifecycles,
functions, and locations.
Aligning design, product management, and dev teams at scale takes time. The process is messy.
The pace is relentless. It's difficult to keep your design vision whole with every round of
revisions — no matter which design tool you use.
Today's workflows require a new way: design delivery. Zeplin combines not just new technology,
but a set of principles to make fluid design delivery possible for even the largest organizations.
These seven principles are at the center of how we work.
01 -> 02 03
Principles of Separate ready-to-build designs Track changes to shared designs Organize designs in a
design de|ivery from designs in-progress deliberately standardized way
04 05 06 07
Communicate the complete user Document behavior and Display design system elements Include technical specs & assets
journey requirements in context that are used tailored to the development stack
|* Principles Solutions v Pricing Resources v Login Sign up for free
< Back
01
Separate ready-to- Why?
. . Product design is iterative. It's never entirely complete. But, developers need a starting point to bring
b u I Id d es I g n S frOI I l a design to life. "Ready-to-build" designs are thoroughly reviewed and decided on by the product
. . team. They are a "snapshot" of designs that indicate developers can begin building. "In-progress"
d es | g n S | n - p rog ress designs are explorations that need refinement.
Create harmony by clarifying ready-to-build designs from in-progress designs so developers and the
rest of the team know which designs are in development.
Zeplin in action
Zeplin, by definition, is a different environment from the design tool that stores snapshots of your
designs. This separation allows designers to use their design tool for what it's best suited — design
exploration — while Zeplin preserves the build-ready designs for product development team
collaboration.
Publish to Zeplin
Once designs are ready-to-build, designers can select and publish frames from any design tool to
Zeplin. This way, your design tool is your sandbox, your playground where you can explore and
iterate. Zeplin is your stage for presenting ready-to-build designs — without the distraction of
ongoing design changes.
- ENE T S Y . I =05
— e EsEe e @ s QJI-J rfJJJ.:
|* Principles Solutions v Pricing Resources v Login Sign up for free
Publish to Zeplin
Once designs are ready-to-build, designers can select and publish frames from any design tool to
Zeplin. This way, your design tool is your sandbox, your playground where you can explore and
< Back iterate. Zeplin is your stage for presenting ready-to-build designs — without the distraction of
ongoing design changes.
01
build designs from ‘ ‘ = = =
g - ENE T S Y . I =05
H H e gelwc = @ i et gf TJ g (N L
designs in-progress =~ = — laia LT | I H
Y T T =—— .
—————— .4 — Y. 1= . -
b 3 e I
- | 258 - - |
o e Iy E Al
m Zeplin is the source of truth for finalized
x designs, if it's not in Zeplin it won’t be in the
shipped product.
Alan Chappell
Head of UX
Next principle -