Being efficient in UI design with Sketch | Anjan Shrestha | Skillshare

Being efficient in UI design with Sketch

Anjan Shrestha, UX enthusiast

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (48m)
    • 1. Chapter 0: Class Introduction

      1:04
    • 2. Chapter 01: The basics - Onboarding screen

      4:23
    • 3. Chapter 02: The power of artboards

      4:42
    • 4. Chapter 03: Styles and content generation

      7:49
    • 5. Chapter 04: The power of Symbols

      12:47
    • 6. Chapter 05: Libraries - Global Symbols

      3:43
    • 7. Chapter 06: Designing Detail screen

      4:19
    • 8. Chapter 07: Utility plugins - The Sidekicks

      8:55
    • 9. Chapter 08: Outro - Now, its your turn

      0:36

About This Class

This class teaches you to take advantage of Sketch app’s features that increases your speed of UI design.

You will learn

  • Quick basics of Sketch app
  • Generate ideas quickly and iterate
  • Building a cohesive design
  • Being efficient with handy utility plugins

Transcripts

1. Chapter 0: Class Introduction: I must say my name is on Since Wester, I'm a designer, co founder and maybe off product innovations at Young Innovations. It's been more than a decade that I've been involved in the field, a few extra design, and in this state years, I've designed a lot off websites, illustrations, logos, icons and mobile and Web applications. In this class, I'll teach you how to use sketch app. The main focus off this class will be on efficiency. I'll teach you how to use some very basic features. Florida by sketch and some third party plug. It's that will speed up your you a design workflow. So we'll start with basics. Move on to some third party plug ins, and then we'll also talk about reusable components prided by symbols and libraries. Ah, lot of Sarkar keys and few more utility plug ins that will definitely speed off here. You. I design workflow. I hope youll enjoy this class. So let's get started 2. Chapter 01: The basics - Onboarding screen: I have a blank document a skates to document here, and I'm going to go straight ahead and create an artwork here. So I'll hit a and then I'm going to go over here to my android devices and hit more. Well, 3 66 40 because we're designing for android os. And I'm going to bring up my sick press are make that rectangle footage from the art forward with it unchecked my border Click on Phil. Go straight over to radio, Radiant. And I'm going to trust the first caller here right about here. All right, I'm going to the end color, and it will be somewhere around here. Okay, Now I'm going to bring up a sketch, Aiken, and then place it here, so I'm going to bring this copy this file the s crazy filed here. Come back to my skates. Document and basted here. Boom sketch makes it so easier to bring your emails files. Interest gets document. Previously with order twos. What? We had to to waas press on some kind of insert menu and then click on the media or click on e mais or click on video button and then go to that particular folder and then hit open. Yeah, it was kind of a drag. Okay, After we've done this, we're going to give it some Sadow. It's a foot deep learner will keep the corner of decided to black. I'm gonna hit t and at the title off our course here. Kidding. If this seasoned with you design in, sketch up, I'm going to make this smaller, and then I'm going to increase the size. Let's just keep it there. And now let's say that this is first off three on boarding screens. I'm going to create some indicators here. Well, it'd white, and I'm going to create a select 2nd 1 I'm going to center line it. And since this is not the active one, I'm going to remove the fit and only keep the border. And then I'm going to click drag and create another indicator. I'm also going to put up a text cause skip going to change the transform to upper case. Then I'm going to underline it with command. You I don't want this to be prominent, so I'm going to hit my new Ricky pad on, give it 50% off city by hitting five. So there you go. I think this is This looks quite right. Oh, yeah. One more thing. Since this is our android application, I'm going to have the status bar here. So thanks to sketches, templates. I'm going to hit the mitral design from New from template. Here, click on this and this gives me very yes measure. Designs You, I elements. I'm going to go to select this art boardroom on it with command, too. And then I'm going to just speak up this status far from here, Going back to my previous document. It face command v going to write a line it up, align it, going to give this There's a capacity because I don't want this to be prominent here and their ego. We have our first art board ready 3. Chapter 02: The power of artboards: We've just created a design in a matter of human. It's and this was possible because sketch allows you to be so efficient, and one of those preachers that helps it to the efficient is it's our ports. You simply each a and then choose from the devices that you want. Let's say you want to design for Apple or iPhone device. Simply come over here and click on any of the devices Apple devices from this list. If you're designing for Web site, come over to responsive where and choose from any of these presets. If none of the size are meant in here, then simply going to custom couple right here and click on Bless Aiken and give a name to your precepts size. Give it a very were size. Let's say something about 400 pixel, it said, and it will stay here. So whenever you want to work in a new project with that particular size, the test preset that we just created go to custom. And here is your precepts sites. Thea. Other thing about art board is that it allows you to be. It allows you to test your ideas very quickly. Like for example, if let's say I want to try something else here. So I simply click on the art board here it absent and then drag it sift as well so that it comes out pretty smooth in his horizontal straight line. And I live on my buttons and then here now I can just my new design. New idea. So let's say if I want this to be a little funky, let's say all right, so I can do this. Uh oh. Are that said? These are do far away for my test. So I bring these guys in here. All right, let's say I want to try something else here as well, so I can simply again office and drag. Or I can select this art board and hit command T. It will duplicate the art board for me. Come and he also works on layer Spider Way. And let's say I want to give us our Gulf here behind this, you know, just to dry out something. I'm not sure it controls the Jews. Ah, color similar to the one in the blue there. Andi, That's essential. Align it. Okay, let's give a border as well. See how that would look, It doesn't have to be final, right? We're just testing it out. Testing what? Whatever is in our head this to see if it works. Looks a bit more interesting than what we had earlier. Let's say we want to try something new. Simply copied this heart board to bring this back, Maybe draw a squad instead of a circle. Give it a radius. Smoothing of the corners. If the border you were white background but the border again Bring out the thickness. This'll looks quite interesting. Duplicated the layer again, the square on. I'm going to try something. Thank you know. Okay. I think this looks quite cool. Interesting. Okay, well, I think we'll go out with this. Never drive with it. A bit of Sadow. Okay. Yeah. So you get a Z. You can see in a matter of a few minutes. We just just adelphia off our ideas and and thes ideas are still alive, Right? Began in whatever point of time. If we think that Hey, this is not working. We can go back to our original design or any of the designs that we like and try out a new direction. Drag and drop this and try out a new direction from here. So that that is the bar off our borders. 4. Chapter 03: Styles and content generation: after we were done building our own boarding screen will now create a chapter listing pays for that. I'm going to copy this art board. Hit the plus I can hear to chapter list can obey Stick off our port here. I'm going to remove all of the years except for the background because I need the background for this particular chapter. I'm going to rename this art for granted. Probably chapter on this again and then select the background here and pulled background hitting. Come on, our or renaming these. There's I'm going to quickly at the title for this dream chapters Andi will do enable agreed. So you can enable you create by hitting controlled. See, you can also come here it view and hit great settings and, uh, changes Sitting customizer sittings in here. Okay, get away. For now, I'm going to create a rectangular box. That's about the size right there on and I'm going to remove this Quarter it right change 1 16 Give it up, Regis, as well. Going to end here we have Our team is in here. He means for chapter one. I'm going to add on All right in here the users can actually download. Thank you. Like looking here and view it offline. Now I'm going Teoh, add a bit of saddle. So I'm not going to do the traditional way. But I'm going to do is I'm going to duplicate this layer. Get it down, Can you? Clear and then really stayed and outside for this mirrors. This will give me a little diffused Saturday here. It looks a bit natural than the enormous out of that sketch allows. I'm going to read him all of this year's as well. Okay, our first guard is ready, and I'm going to select all of these and crew picked recommends for grouping. Come on. Our to bring in this two car our first card Israeli, before we move on to creating new cars in this listing pace will be creating some styles for our text and some dares. So I'm going to select this text here, Come over here and click on, create new text up. This will help me to create new cell for our decks on. We're going to call it chapter. All right, so wherever districts down appears, it will help us to make changes in all off those text in just one click. We'll see that. You know what? I'm going to go ahead and click on the basics here and give it, uh, style as well. I'm going to call it a title, Right. And I'm going to call this one here as teaser. Forget it. And now I'm going to select this particular earlier here, and I'm going to give it a content O Leary style as well. So I'm going to give it a porter first, so this might not look quite good right now, but we can change it. You know what? So let's live it like that for now. So after I do this, I'm going to create a new style. I'm going to call it. Um, I you Yet? That sounds fine. Okay. No. When I to pick it this Lear. And that's for the chapter two. And when I make change to this particular earlier, the chapter is styled there. That's a I'm going to give you the color of this. And immediately after I do this, it tells me that Hey, this is ah pretty fine side and I've made changes to it. Do you want to repeat this to other styles as well. Or do you want to see if this new style to this particular stuff? So if I click on this icon here, it is going to change for all of the players that I have sit style at chapter here. So that is the benefit of having you know, uh, dick stuff. We're going to see a very powerful plug in now it's called Craft. It's built by N Visit and for that unit to go to this particular website, download the plug ins, follow the instructions there and install the plug into your schedule. After you install this Blufgan, you'll see a craft window in here. What it helps you to do is I'm going to so you two off the powerful features that craft allows you to do. First off, let's add a dynamic content that we can do by selecting this card. I am Celia here, and I'm going to this particular Parton on selected photos and hit. Let's say nature right. It says dollar us from months pest and it grabs and emails from months last article and face and images related to nature in here. So what it is doing is is going to my fill property and changing the maze property off my filth. And another cool feature of craft is it helps you to duplicate your content that so that you don't have to all today often drag this particular earlier to create new cars. So I'm going to select this particular cry card and then hit on the duplicate part in here . It vertical because we want to repeat it vertically. And then let's say we want six cars in the distance off 20 pixels. We can increase our decrees from using this as well, and we need to pick it content. It duplicates each of these cars, and it also creates a new Emmys for each of these circle earlier because it knows that I had once pulls content from using craft on from months pressed, and because of that, it generates new pictures for all of these circle. Earlier, when I duplicate this content 5. Chapter 04: The power of Symbols: another cool feature off skits that allows you to be efficient is its symbols feature? Like, for example, in this screen, you can see that this is a symbol, and all of these at icons that you see in this screen are all instances off one particular symbol. So if I double click on it, I can head over to its or xeno symbol now pays. And this is where I can make edits to it. Like, for example, if I changed it into do color color blue and return to my instance here all off these icons because they come from the same ad symbol. The change. And if I changed the field color for the circle here, let's say two blue and and changed the plus collar to white. And if I don't do my instance again, everything will update accordingly. Right. And this is super helpful when you're trying to make ah, when you're when you're when you have a repeatable component like, for example, hater or footer, let's say, because you use hitter and food to the same header and footer in most of the pieces for your website, right? And if we if you make chains to one hitter symbol. It will change to every other hair symbols that has been applied to other places, and this makes your work super easy and super efficient as well. You don't have to go into every single pieces and make changes to the same I can or component that you've is everywhere. Now let me just undo everything and let me go back here. And let's create one symbol, a new symbol. No. So I'm going to just select this card and turned it into a symbol by clicking on create symbol. But in here and I'm going to name it component the last car, and after the car changes into a symbol, it's I can changes to this. And this is how you can know that particular earlier is a symbol. And when Now, since this is simple, if I make change to any Lear here like, for example, if I change, the cars feel color to this. The background chances to this collar, because it is, is that that particular symbol that is this creator right now and all of these guards you see here they weren't There are not any right now because they are not symbol so far. Let me to select all of these and it replaced with symbols and click on that particular symbol. The car symbol and everything now uses the same car symbol that Mrs sends it back to white . And if I return to my instance, everything changes to white, and this is the power off using symbol. Now, if I make any change to this layer here, for example, let me just increased the foreign size. And if I go back to my return to instance and all of the fun size off that particular earlier changes and let me just go back and changes to its original size and if I report is in this, let's say align it to these other layers, head back to my art board and everything aligns to the way we just did. That is the bar of symbols. Three other benefits off. Having symbols in layouts like this is that you can actually make changes to your leers without affecting the orginal symbol. So that means that you can actually change all of these texts here. All of these texts, including the Emmys, without affecting the or Xeno symbol like for example, that exist. Select this second card here. And I can make changes to text in my right battle here. So I could change the basics to art boots because art Boots is my second chapter. And after one to chapter two, and similarly, we can change all the texts and the emails as well. And what do you see here? The level that you see here are actually the Lear names off these layers off these layers. Right? So if we double click on this and here onto our symbol and we can see the layer name is and if we rename this Lear to number and which is done to my instance and if I see here, it changes to number. Now, this looks like a level for for for my over I text in here. And similarly, I can change the basics to title the time to duration. And similarly, I considers this to teaser. And this du m is this to at Aiken. And now if I returned to my instance here and see here now, these all look like that they are level for these years. The other benefits off. Having a symbol is that we can actually use a nested symbol. That means we can use a symbol inside another symbol. Like in this case, we can see that the card is one symbol. And inside a car, we have another symbol that is this Ah, at Aiken symbol. And if we go back to this original at Aiken symbol if we change the color here, it's it updates in the card as well. And, uh, we need So what we're going to do now is let's say that the user uses D plus Aiken to actually save or down with this particular chapter. And after this chapter has been downloaded, the plus Aiken has to change to something else that represents that the chapter has been downloaded. Let me go back to our symbol pays and into our plus icon symbol. So what we're going to do is we're going to duplicate this symbol and make sure that while duplicating the width and height off the new symbol here is the same as the one off the plus Aiken symbol. We need to make sure that rename this and in here and now we're going to remove this. Plus I can and had a check, Mark. Ah, that indicates that this chapter has been downloaded. So let me change the border color here. Same as the plus icon symbol to sickness to four and make it around it for the corners and the joints. Let me just resize this. Yeah, And if I go back to our board, And now if we see here in the ad Aiken six and here in the symbol panel it it gives me override functionality, and we can change update the ad Aiken to added Aiken symbol. And similarly, we can change for other cards as well. So this is how we can use the override from personality. Before we close this chapter, we're going to see one last trick that off that uses a nested and all right feature off symbol. And that actually tricks us into thinking that we're actually changing the caller property off off our competent off our Aiken. That is a symbol. So to do that, um, we're going to go inside. The symbol pays here, and I'm going to actually create a new art port. And this will have a very weird size, and I'm going to rename it to color. And then I'm going to draw our rectangle that feels the color art board here. I'm going to change the field color to the dark corner that we've been using, and I'm going to create it converted into a symbol. I'm going to call it caller slash Dark and ah, symbol will be created here. I'm going to do it. This caller, our board now we're not going to need it. We'll allow create a lira rectangle ear here and replace it with the color symbol that we just created. They called her dark symbol, and now I'm going to select this Lear the bath layer. Let me this You move the visibility off the color earlier, and I'm going to select the check Mark Lear, and I'm going to change it into outline would. So now it no longer has the border property, but it has a feel property, and the Phil is filled with the dark color. I'm going to do same with the salt earlier here as well. But before that, I'm going to change the border to inside so that the border lies inside the art board boundaries. I'm going to outline it as well and now it has the feel color instead. Ottobar ago. I'm now going to strike these two years, and I'm going to union, pressed the union and going to converge into one single sip and I'm going toe on group this as well. And now that we're going to disable the fuel and bring back the visibility off the color symbol and I'm going to change, I'm going to mask use the combined safe as theme. Ask there. And now it looks like, ah, the the same colors the same seem, well, the same Aiken that we had before. Now we're going quickly going. We'll go ahead and do the same for at I can ask. And after we've done that, Now we have the ad and added Aiken as we wanted, and both of them have the color symbol inside them. And now I'm going to duplicate this stark symbol and change it into color slash gray, and I'm going to change the field color to create that. Just go back to our poor chap released artwork. And now here we have override in our color dark symbol that just quickly changed the, uh, name off these years as color so that it is easier for us to identify in our override panel here. So now I'm going to use this drop down here and change the caller to great and and using this very simple feature off symbol, it helps us to. It tricks us into thinking that we're actually changing the colors off our symbols. So that is another far off using a symbol. 6. Chapter 05: Libraries - Global Symbols: using a skits. Larry is a powerful way off extending the par off your symbols. Like, for example, if let's go to our symbol space here. And let's say that Ah, your designer colleague, uh, here, see, is also working in the same prison as you are, and they want to. They need to use the same symbols, right, Because we are using We're designing for the same project and they're working on a different skates document. If that is the case, in order to use them energy, you know, our to use the same symbols by them and by you. What we need to do is we need to We need to add all of these symbols into a sketch library document. It's so And to do that, we can select all of these symbols that we want. Copy it. Come on and and paste it into this new document here, I'm going to rename it into symbols. And now I'm going to save this particular new document and called score slavery and save it in this folder. Now all I need to do is go to Preferences, go to my larry staff, and in here you can see all of the Larry's that I have in my sketch map. And to add the Larry that we just created, we simply hit ADL every and select this, Larry that we just created course, Larry. And then we can close this now And now if I open up a new document and I can quickly create an art board here and now I can insert symbols from my course library from you. So all of these are libraries in here and the one that we just created course. Larry, I can go in here and insert any symbol from my library that is in here, right? And what this allows me to do is if I make change in my course library here, let's say I'm going to take bring this down and hit save. And if I go to my dog went here. What I can see is that it says, Hey, your library, a library has been changed and it nn operatives have level. So if I click on this, it tells me what had changed. And I can simply hit up their symbols and it will change it in here as well, so super useful when multiple multiple designers are working on the same project, and you can store this library in in your common server, for example, Dropbox and we can simply pull pull in, ah, symbols from here and let me just means it to default. Let's go here and objects symbols and it'll opted again. So super useful, super efficient. And what we can do now is we can also create library for for for the for the competence that we regularly used in our process like, for example, the status far for material designed applications. So we can simply create a local library for for elements like these, which we tend to use regulatory in most of our pres X. 7. Chapter 06: Designing Detail screen: so we'll quickly create a new screen chapter detail. And to do that, I'm going to copy this. And I've already created a new piece called Labradoodle here. I'm going to pass this art board here and I'm going to duplicate it. You can command E as well going to rename this'll ear as chapter detail. If you want, you can. You can simply duplicated here and start working in this art board itself. It just a matter of preference off. What makes it easier for you. Umm, I generally want to have a pays for different pieces a screen for different pieces because that would allow me to experiment with same screen here a lot more. And I've done that. After that, I'm going to remove all of these leaders because I really don't want them. I'm going to remove this layer as well. I'm going to keep the background layer, though. And after I do that, I'm going to select this card here and paste it here. So if you have noticed that when I come and see and command V here in this art port, it remembers the police and that it was in its origin are poor, right. And these are some of the features that sketch allows you like, for example, while copy pasting, let's say you have a Lear here. And if you select this layer and press, come and sit three instead of command V. It will remember the police and off this leader that you've selected, and it will baste it with respect to that, particularly that your selected very useful in a lot of places. Now I'm going to d'etats this from symbol. After every tax, it will no longer be part of the symbol. As you can see, that I can has jeans here too. And I'm going to remove this background removed this background as well. I'm going to bring this early toe towards the top and I'm going to bring this here. And after that I think it's harder to read. So I'm going to add a white background here ticket behind the layer, but evolved my background. I can do that by prison command, office in and opened down arrow, and I'm going Teoh control C and picked the white collar and then going to I think I'm happy with this position off this, um, I okay, I'm going. Teoh. Like it right there. Introduced several. The greed. But this until here, going to get government off, some plus to increase the size off the front. Increased height of this there as well, I guess right about there. And then I'm going to add some key. Some details, key details for this base. Okay, We have our basic hard word for our chopped Reggie. Till already. We're going to add some more contents here. Uh, but for that would need to see if you plug ins would look into a few plug. It's in the next accent of this. Listen. 8. Chapter 07: Utility plugins - The Sidekicks: one of the most amazing plug ins that sketch has. If it's runner, plug in and you can download it from this site and after you have downloaded and installed this plug in, you can press command and courts in your keyboard, and you can run a command from this AP from this plug in and it looks like a spotlight. A Z you can see here. And yes, this is what it is. It is a spotlight for your sketch app. Like, for example, you can it. You can run commands like open and open up, and his kids file that you want or you can type go to hit Tab, and then you can go to any pays. Like, for example, if you want to go to chapter list, simply hit this and it will take you to chapter list. Or, if you want to go to, let's say back to your chapter detail pays, you can say like that often can hit Enter. It will take you to chapter detail piece, right, and you can also like, for example, go to a particular earlier like, for example, you want to go to this path to layer you can simply it bat, it will. So you there are two names do layers that with the name bat that hasn't the name bat, and you can select any that you want to take you to that particular earlier. Another cool feature that Runner allows us to do is insert symbol right from years that's typing. Insert hit tab, and we can add any symbol that you want. Like, for example, we have disc are simple. If you remember, if you type card and press enter, it will bring up the card symbol. For us, it's a still it that and let's say, if we want another symbol like, for example, ad, we hit that and it will bring us the ad symbol right. We can also insert symbols from other libraries, like, for example, it says here, like right now, local. Only if I click on this and it will tell us say that you have these libraries do which off the libraries do you want to be enabled so that you can pull in symbols from here? I'd like, for example, I have mitral designs. You, I and Mitchell design icons Larry. So these are custom Larry's that I have built so that it makes it easier for me to work on for material design projects. And if I novelties and if, let's say, if I want to have a back arrow key, all right, we can simply select this one. It Inter, and it will bring me my bag hierarchy very quick. Very simple. I don't have to go to another skates document copy it from there and pasted here. And let's say if we want a fab began, simply do that as well because this is in my mitral designs you, Hillary. And if I enter and put it here, it brings me the fab button here. So I can't really edit this because it's in my Larry document. If I did, that's it from Symbol. Now I can edit this, but I think this is still it is still the color earlier is still being pulled from another library. So I'm good. That's it as well on on group it. I can change the color to my liking from here. So you want to go with that? And we want to add ah, play. But in here, um, so that it plays up the video off this particular course, I'm going to add very quickly a simple, um, play. But in here and this will, you know, when you use their clicks on it, the video off this lesson will start to play. As you might have noticed in this class that I really like to use, I really like to rename my leers and stay organized. But sometimes, you know Ah, you You're constantly trying to continuously trying to generate new ideas quickly and you tend to forget Ah, they're renaming your layers. Are you want to really merely years after your kind of done with your design, right? And to do that, uh, there's a very handy plug in. It's called Rename It. And the reason that we want to use this plug in is because we can't like, for example, renamed thes Julia's at once. If we press command are it doesn't do anything like, for example, if for this one there we can simply press command are and renamed it anything that we want . But if we want to ah, rename more than wonders at once. There's no obstinate by default that skates allows us to do and to do that we need the plug in called Rename it and we can install it by going to the website or going to the guitar pays and installing the tracing away. But we can also install it to Runner. So this is another important feature off runner that it allows you to installed any plug ins and its case plug ins from this case, plug and directory by just running a command from here. So simply type in, install his dad, and it will give you a list off all off the sketch plug ins. And let's say you want to installed rename it simply type rename it. And there you go. This is the top one here. So this is the plug in that we want. Mine is already installed If we hit. If yours is not installed, simply it inter and it'll install it for you automatically. So since I already have this plug in, I'm simply going to you know, uh, select these two check marks. Let's zoom in a little bit and then I can press control Command are on my keyboard and the springs off this window. And this is possible because off the plug and rename it and I can do this. I can rename two layers at once. I can even go ahead and to this, let's say I want to keep my current learning. But add some numbers at the end like, for example, this one. It will add this variable here. And if I hit, really, it'll dream into this so super super useful to rename your leers at once, and that would help you to stay organized another way off. Being at the top of your efficiency gaming Skitch is by knowing, ah, lot off start car keys by using a lot off socket keys, and there are a lot of sort code keys that Skitch allows by default. But like, for example, command are to rename layers and command sift to convert a say pinto outline. But there are certain accents that sketch don't allow by default. And if these are, if you use this accents reputedly, our success, too, create a custom start guard for the those accents. Like for example, I use to I like to create symbol pretty much in all of my projects, right, and a lot of times I keep on creating symbols. Now Skits doesn't allow a sort good key for creating symbol by default. But I can hear onto system preferences, keyword and then two circuits. And under absolute kits, I can go ahead and click the plus I can. In the all applications, I can choose Skitch and then in menu title I can right the exact menu item that I want. Right now it's create symbol, so make sure that you get this spilling and spaces right and after that heroin to keep what sort code here and type in the communism that you want here. I like to add this communists and commands of C, and if I press add it adds Thedc Reitz symbol. Start guard here now If I hear onto Skitch and select this layer and hit command CFC, it acts me if I want to create a new simple with this and it works for every other earlier as well, so super fast and super useful way to increase your efficiency by creating us custom soccer keys 9. Chapter 08: Outro - Now, its your turn: I hope it was fun for you taking this class. Now there are a lot of new your design tools out there and you are free to use. And it was that you like. Just remember, though, any tool that you choose it should switch your workflow and still using Skitch because it's so It's my workflow, and it makes it easier for me to generate new ideas quickly and build up in there. I hope you'll take this knowledge of sketch and start building some really useful user interfaces all the best.