Learn How to Use Zeplin With Sketch App


Whatsapp everyone my name is Faiz and
welcome back to in my New video and today we are going to learn how to use
zeplin so if you are designer if you are struggling a lot with your
development with your developers and you are still unable to calibrate with them
properly then the zeplin is great shortcut to collaborate with your team
with your developers so if you don’t know about Zeppelin zeplin is a app is
a popular tool for the UX and UI design to collaborate with your team to assets
management and to documentation of your guidelines colors fonts and the other
thing if you are sending your assets to developer again and again in jpg in PNG
it’s gonna help you that you can directly upload your whole project in
zeplin so in this episode we are going to learn how to use zeplin into a
sketch how to move your output into zeplin from sketch how to export assets
from shaft lean and how to invite other people where you want to share the
project like stakeholders designers and the other people first thing if you
don’t have a count of zeplin then you have to directly go into zeplin website
and just click on the sign up and the first sign up is free meaning you can
upload your first project it’s totally free
after want to upload more project then you need a paid account and if you are
already sign up then you have to download of zeplin then you can
directly look login your zeplin account in your operating system like right now
I’m reusing Mac so just I’m going to login this so now I have a my interface
of my zeplin so what you have to do you have to create a first project over here
so just click on this first project and select web iOS and write whatever you
like to and create and now your first project is created just give the name
like giving web and and the second thing you
need to download the zeplin plug-in for the sketch and that just go to one
google and type zeplin sketch plug-in and just download from here then you
will able to send your artboard into your zapping just simply you can see
over here this is plugins apni so now you can see I have my artboard and here
is design it’s beautiful design and what you have
to do just simply select here I brought simple select your output and click on
plug-in and click on sapling and export your artboard just simply and it’s
showing that you have created a project name called web and now you are going to
import your project into web just click on this and is starting exporting my
images assets and other things so after floating my project so you can see over
here then it’s showing that’s which I have uploaded into sapling so now just
click on dashboard and you can see the style guide also what kind of font I
have used in my project and also you can say CSS it’s easy to export CSS from
here that’s amazing so now what is advantage of the Zeppelin so like
example if you have if you have your icons like this then you have to make it
export able so what you can do let’s suppose it’s your icon in your symbols
that’s best way if your I can in symbols then you what you have to do you’re just
simply slice that I can like just select your icon select your icon and click on
plus button and click on this slice button so now you will create this
separate slice and just change the size according to your artboard so now you
can see 24 24 and just gives the name like I have my folder like icon
and inside the I can I have profile icon it’s simple
so now what happened when I when I will update my artboard once again just click
on this and click on plugins create symbol export artboard just import again
now you can see replace screen with same name so what will happen over here it
will update my artboard like you can see now now you can see here just now my
icon is export able so now i can easily export my i can into PNG into into JPEG
or into SVG so so just simply when i click on this export button over here
simply over here then then let me give my location like you folder is a web and
create this so what happened over here I’ll get my icons so it’s very simple to
calibrate with your developers so the second example over here in logo so what
I have to do just simply click on plus button and click on slice now you can
see and these few options like I want export group with content only so I can
export my transparent I can I don’t want to acquire any background and then what
happened if I click on the export the the Zeppelin export so let me explode
again so just click on this and now you can see it’s updating over here so now I
can export my logo here you can see and so even you can image you can export
your images and add butters and the other thing asking how to invite other
peoples that can see your project so here is you can invite the members then
whatever members you have which which are already on Zeppelin so take you can
easily if my team from email address and also you can
share the project on over here just simply click on this and share the link
then what will happen then people will able to see your project quickly then
they can just simply simply just log in your app and then if they can easily can
can see your project if they have discipline account then you can see it’s
simple and you can export from everywhere no issue where you are
whether you are working then you can easily export your assets so guys if you
like this tutorial just hit the like button if you are new and you are
looking for the great tutorials and you want to learn something awesome then
subscribe my channel and follow me on Instagram thank you so much for watching
this tutorial thank you so much guys I’ll meet you in next video thanks a lot

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *