7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 A Handy List of Plugins and Resources

Sketch has a very active community, who regularly create and contribute plugins and resources. For example, what if you need an iPhone 6 graphic to use in a project? Well, that and many other resources can be downloaded for free on dedicated websites. And this is just the beginning. In this lesson I’ll show you where to look if you ever need Sketch resources or plugins.

Related Links

4.1 A Handy List of Plugins and Resources

Hey, welcome back to practical UWare design with Sketch. One of the reasons Sketch is so awesome is because it has an awesome community. That community creates plugins and resources. For example, what if you need an iPhone 6 render to use in a project. Well, that and many other resources can be downloaded for free on dedicated web sites, and this is just the beginning. In this lesson you'll learn where to look if you ever need some resources or plugins. So, let's get started. Now for the websites I'm going to show you, you can find links in the lesson notes. So the first one is Sketch App Sources. You can submit your own resources, you have free and premium ones, as well as some tutorials and tips. But, in here you can basically find a lot of interesting stuff, and you can even search, so if we search for an iPhone for example, we can see all sorts of things like the iPhone 6 plus. We can see see a preview, we can download it, we can see related resources. So that is actually pretty cool. Let's check out the tutorials and tips. As you can see there are a few tutorials made by different people all around the world. Plugins, we can find a big list of Sketch plugins. So this is definitely something that you need to check out. Another website is sketchresources.com. It's the same principle basically. You have a bunch of different elements made in Sketch, which you can download. And then you have some resources for Sketch from ui8. As you can see here this is our premium, so they are not free. And then if you ever need iOS devices, you can go to this address. As you can see, fully scalable iOS devices for Sketch. Now, I was talking about plugins, and as you can see on Sketch App Resources, there are a few plugins here. And Sketch is pretty awesome in this respect, because unlike most graphic design applications out there, you can add plugins to it. And to do that, the best way is to download Sketch Toolbox. You can find it at sketchtoolbox.com. This is a plugin manager for Sketch. So once you download it, and install it, this is what it looks like. You can see all All of the available plugins you can download. You can even search for a specific plugin and you can install them. So, I'm just going to show you a really quick one. This is called Sketch Dynamic Button and it's made by Alexander Kudymov, I hope I'm pronouncing that name right. You can find it on GitHub at this address or by searching for Dynamic button, or Dynamic in Sketch toolbox. So, the way you install this is really simple, you just hit Install. It downloads it, it installs it into Sketch. We don't even have to close the app. So, right now, you can see in Plugins we have Sketch Dynamic Button. So, let's say you have a text. Lets call this Button, and you wanna make it into an actual Button. So, what you can do is replace the layer name with the padding you want your button to have. Let's say for example, you want 30 on the top, 15 on the right, 30 bottom, 15 left. This is exactly the same as the CSS syntax for padding. So now simply press Cmd+J, or go to Plugins Dynamic button and this will create a group called flex button that has your text and the bg scaled to match that heading. That's pretty awesome, but what if you want to change the padding. Well, let's say you want maybe 20 pixels on the top and bottom and maybe ten on left and right. We'll simply do that. Press command J again and the button will change automatically. What if you change the text? Well, select the text button big title, yeah select the title again, order button text, Cmd+J, and the background will scale accordingly. So this will make building buttons so much easier, because I'm sure you've come across the situations where you would make a button according to the text inside it, you know, right to the last pixel. And when you have to change the text afterwards, you would have to modify the button background as well, and that can be frustrating at times, and very time-consuming. But using this plugin, it's really easy. And it's not the only one. You can find a full list here. And I strongly encourage you to check out every single one of them and see what they can offer. So, yeah, that's basically it for this lesson. Next time on practical UI design with Sketch, you'll get an overview of this course and also find out what you need to do next. See you there.

Back to the top