Deliver Your Designs to Developers with Zeplin | Ljubomir Bardžić | Skillshare

Deliver Your Designs to Developers with Zeplin

Ljubomir Bardžić, UI/UX Designer • Adobe Certified Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (18m)
    • 1. Intro

      0:45
    • 2. Getting Started

      1:07
    • 3. Importing Mobile Designs

      6:07
    • 4. Creating Design Systems

      7:38
    • 5. Sharing with Developers

      1:51
    • 6. Final Thoughts

      0:17

About This Class

My name is Ljubomir, I’m a UI/UX designer and one of the most common questions I see young designers asking is how do I deliver my designs to developers? So today I’m gonna teach you how to do just that using a tool called Zeplin.

Zeplin is a tool that let’s designers and developers collaborate when creating digital products. It lets you export your designs from Sketch, Xd, Figma or Photoshop and it automatically generates specs and code you can share with the developers.

In this class I’m gonna teach you how to use Zeplin by showing you how you can export designs made for iOS, Android and Web and I’m also going to show you how you can quickly create Style Guides within Zeplin.

Transcripts

1. Intro: Hello and welcome to this quick class. My name is we women, um, a UX designer and one of the most common questions I see young designers asking is, how do I deliver my designs to developers? So today, I'm gonna teach you how to do that. Using Zeppelin Zeppelin is a tool that lets designers and developers collaborate to in creating digital products. It lets you export your designs from sketch eggs they sigma or for the shop, and it automatically generates packs and code you can share with the developers in this class. I'm gonna teach you how to use Zeppelin by showing you how you can export designs made for IOS, android and Web. And I'm also going to show you how we can quickly great style guides within Zeppelin. It's gonna be a short class, but it will be a fun one. So let's jump right in 2. Getting Started: to get started, we're gonna talk a bit more about Zeppelin and how it works. First, Off Zeppelin currently integrates with most of popular design tools, including sketch adobe eggs, the Stigma and for the Shop. If you created your designs in any of these, you will be able to export them to Zeppelin. Next. Zeppelin comes in two forms as a Web and as a desktop app. Web app is used for previewing and organizing your designs, but it can be used to important from your designs Offer. For that you need the desktop app, which is available for both Windows and Mac OS, and you can get it by going toe the Zeppelin website in creating a free account. If you already have an account terribly an option tojust donald desktop app, you will need the up to be able to follow along, so go ahead and install it before moving to the next list. 3. Importing Mobile Designs: Now that we have Zeppelin installed, we're ready to start working. When we opened the up, we're met with this welcome screen where we can click on, create a project the apple ask us to pick a platform we designed for And based on this, the units and the code will be different. As you can see below each option we're going to start with, there s and I'll demonstrate the other options later. So just click and create and we'll get started when we create a project will be met with the screen. On the right will be the info about the project and this is where you can give it the name as well as just some other settings that will cover later. I'm just gonna go ahead, then rename it to something like Rs. For now, we'll focus more on this. Let's section where it lets us know how to export our designs. We have three options listed here Adobe X'd fig, MMA and photo shop. And if you were on macro as you will have a sketch list that here as well I prepare my designs the next days so I'll select that and it will let me know how to export as well as what keyboard shortcut taking use. Now I'll go to X d and open the file I prepared. I'll select for the screen on the left and go to the menu Export Zeppelin. This will open a pop up in Zeppelin, and if I open it first, it will ask me with Project. I want to export to click on Export, and then it will ask me about the screen, then stick If you design an hour before he will be familiar with this concept. And in case you don't know how screen sizes work for a designer, recommend that you check out my you I design basics class, which I link down below. Since I prepared our files for one X, that is what I'll select and click on done on. After with we do that, our screen will appear in Zeppelin, and we can click on it, so check it out. Once we're in this view, we can select the different elements and see their dimensions. And while we have them select that we can hover over other elements to see how far away they are and based on element we have selected, we will have different info here on the right in case of text. That will be the fund family, fun size alignment, the line, height and so on. We will also have color as well as content, which we can easily copy by clicking on this icon here. I'm showing you this because that's how the developers will be using Zeppelin Togo through our designs and turn them into code. In most cases, you won't be looking at their designs like this, but you will need to track them to make sure that the developers can get everything they need. One of the most important things you want to track is whether the assets can be downloaded by assets. I mean any icons, illustration or photo that the developer might need to turn your design into real app. To track this, you can select each icon separately and see whether you get the download option here on the right. You can also go back and click on this Assets icon, and here we will have a live the assets listed. As you can see, we only have three icons, which means that the stars on the heart icon from our designs aren't available for download , and I'm gonna show you how to fix that right now. First we'll go back, toe Adobe X Day and zoom in on our screens. Now, what we want to do is find the icons in the layers panel. So here we have the heart icon and all you need to do is click on this mark for export. I can't here and you can also find it here on the right in the properties panel. Now we need to do the same for the star icon, and here we can only do it for one. It will be enough in this case, but you should really make it your habit. Toe mark icons for expert while you're designing, so you don't have to do it at the end. Now, what tell also do is go back to the access panel and, uh, change the color to read, and I'll show you why I did that in just a second. Now we'll select the screen again and use the keyboard truck up to export it to Zeppelin. We will open the pop up dialogue, and we need to make sure that these boxes tracked at the bottom, the one that tests update screens and components with same name. This is, of course, so are screen gets updated. Instead of being uploaded as a new one, we'll click on export. And as you can see, our screens has been updated and on the right. You can now find both the heart and the star icon, and this brings us to the last thing we'll talk about in this lesson, and that is version history. You can open it by clicking on this are glass icon in the bottom left, and in this panel you will be able to see all the changes you made to the certain screen as well as commit messages to help you and your team track which changes were made in each version. If you click on the older version, you will clearly see the difference we made by changing the color. Now I'm gonna go ahead and at the messages to the 1st 1 which are called initial commit. And in the 2nd 1 I'll say change color month. I comes for expert if you only have a couple of changes this one matter as much. But once you've gone through 10 or 20 versions, it will be really helpful to know what you did in eight version. 4. Creating Design Systems: we're now going to talk about how you can use style guides in Zeppelin to create the design system. But before we talk about that, we're gonna import the remaining screens from a project. To do that, we'll go back to X'd select the remaining screens and same as before, export them to Zeppelin. Once we do that, we will see all of our screens will be displayed on Dash Sport. And here I want to stroll you something useful. If you have over this area between two screens, you will see this line with the divide icon in the middle. And if we click on it, it will create the new section and we can name that section. In this case, it can be on boarding, and we can now organize their screens by simply clicking and dragging. We'll move this to the top. This is well, just snap them toe the right or the left off another screen. And now that we have ah, section with the screens we want, we can collapse it if we need to hide that. And if we click on this more icon, we will see all the things we can do with Our section sections are neat weight organizer designed, so they're easier to find once you kept more screens. And now that you know how to do that, we'll move on to the Star Guards to get to the style guide. We can just click on the stab next to their board or we can use the keyboard shortcut. It chose us when we have all right, which is all tested Windows on. Once you're on the screen on the left, we'll see the list of categories we can input into the style girl and those air colors, textiles and components in the middle. We have info on how we can add stuff toe the style guide and on the right. We have some code, but it's not showing anything useful yet as we don't have any elements in our style guide. Now let's Philip, this style God toe that will go back to their board and open one of the screens. We'll start by focusing on color, so I will select this text right here and in the properties panel. When we hover over the color, you will see this I can with droplets, and we just need to click it and the color will be added to our style guide. And it will even give it a name, which you can change. But in this case, pink read the works quite well. Now we'll proceed with adding other colors as well. And once we're going to be the first, green will proceed to the other screens to make sure there aren't any other colors left. For example, this great and I believe this is a different grade. Yes, so in case you already have a color added, it will just show up. For example, if it's like this, it will recognize that we already have it tonight are designed system, so you don't have to worry about herring duplicates. And also you don't need toe ad ever color, just the the main months used in the U I. It will be two marks to add every single color is Denon illustration, and that's not a point of a design system. Now we should go back to the airport and switch to the style guide. We can make sure all of the colors he have names that makes sense like black is OK right is okay. Here I can rename this store start yellow. Since we have warm gray and world great tool, we can rename them toe dark, great and light gray. Now let's go back and we will add textiles toe dough that so that just select the text element. And if we have our over the textile, we can click these two A's and the style will be added same as before. We can proceed with adding other styles as well. And once again, you don't have to worry about having duplicates, since if you select the style you already have, it will automatically recognize it. Now we'll go back and go toe other screens and we'll make sure all of the textiles have been at it. And once we're done, it can go back and go to our style. Guide the and the styles will be displayed here, and we can rename them in, as you can see here. And right now, we have a bunch of code that the developers can use toe make their job easier. And now that we took care of text, we're gonna wrap up by talking about components. What a component. We have to go back to eggs deep and select something like these tabs right here. And if you don't already have the assets panel open, open it and click on this plus icon next to components. Now that we have done that, uh, grab this on Ulta, click and drag to copy it to the pace toward the pace board. Is all of this area outside of art boards. Now that we have done that, make sure you're finally saved. And now select this component and we can use our keyboard shortcut to export it to happen. Once it's done processing, we will see it here in the style guide. And if we click on it, we can track it out the same way as any other screen in Zeppelin. Since this component is being used in the places one screen, we will see ah listed here. And in case this isn't sure appear, really. Just make sure you have updated the screen. After creating a component, we can now go ahead, then repeat this process for other things in X'd like, for example, this button might be useful again. We'll copy it, save export. And once it is impressing, we will have this here as well. And that completes our little design system. So now we know how to use style guides in Zeppelin 5. Sharing with Developers: once we got everything ready, sharing it with other people is super simple, which is open the project, and we will click on the share button to see what options we have. First off, we have the share link and, as it says, we need to invite someone for linked work. And we do that by going toe members clicking on invite and typing in their email address. If we go back, we also have the scene option, which works for anyone with the link, but it doesn't really show the design specs. Instead, it is meant to showcase the design, and I'm going to open it to show you how it looks. As you can see, we can seal the screens and zoom in to check them out. Disruption my be useful for sending the designs to a client for review before delivering final designs. Now, if you go back to Zeppelin and go back to the workspace, there is another option that they want to show you. And if you right click on your project, you can transfer the ownership for this. You'll first. You have to invite someone to the project and then you can make them the owner off that project to free up your account and the last thing I want to mention before we wrap up our the notes. If you open a screen, you can go here to notes and the slide to pin a note anywhere on the screen in case you want to leave a message for a team, and they can leave messages for you as well. For example, you can click on this image and being placeholder and click consent, and you can later replied to this post quick reply. And you can also resolve it if you have fixed the problem. The message was referring toe, and now you know how to use Zeppelin to collaborate with your team. 6. Final Thoughts: and just like that were at the end of this class. I hope that you have enjoyed it and that you found it useful. If you would like to learn more about design, you can check out my other classes and follow me here on sculpture a little more about Zeppelin. You can check out the links they provided down below. Thanks for watching, and I hope as you soon