Zeplin for UX Design

- [Narrator] Zeplin is a collaboration tool built for UI designers and front end developers. I've used Zeplin as a tool to effectively collaborate with other designers and developers and it's saved me a ton of time. Behind the scenes, Zeplin is turning my designs into specs and guidelines, while developers have access to front-end style code snippets. It's alleviated the need for me to even think about where I'm going to fit redlining into the picture, because it does it all for you. Let's go ahead and download Zeplin if you haven't already done so. We're going to navigate to their website.

And you'll see we can get started right here for free. All you need to do is set up an email account with a username and password. So we're going to do that real quick. After setting up an account, you'll have the option to download the app locally or view the Zeplin interface in your browser through their web app. We're going to download the desktop app since that interface allows us to upload our designs. As you can see, the web app is great for sharing out with developers but it's not quite ready for Windows just yet.

So let's go ahead and download the Mac app. We'll double click the Zeplin application. Just log in with the same account we used to set up. And we're good to go. When you do download the desktop app, the Sketch plugin should be bundled in along with it. So you'll have access to the plugin after you install the desktop app. We can double check that this has been installed by just going into our Sketch file, coming up to Plugins, and viewing our dropdown of Zeplin.

If for some reason you don't see this, you can download the stand-alone Sketch plugin from Zeplin's support section. You can just navigate there really quick. You'll see in their FAQ section, there's an area to download the plugin itself. So if there's an issue with the plugin install, feel free to download it from this FAQ section. After you download the desktop app, you should see a pretty basic screen with a call to action to create your first project.

Let's go ahead and select Create. Next we're prompted to select the platform we're designing for. In our case, we're going to select iOS. You can see that Zeplin is already detecting the dimensions of our screens when we select iOS. This is going to determine the measurements that Zeplin spits out in the form of redlines and code snippets. Since we did select iOS, you can see here that the color styling language is provided in Objective-C or Swift for developers. We'll select Create and we're good to go.

Now you're all set up with an easy install of Zeplin and have set the platform for your first project.