Prototyping in Sketch - 8 Tips and Tricks (2021)

hey everyone its Joseph from learn sketch calm and this morning sketch 49 just kind of popped up out of nowhere and brought us native prototyping directly within sketch which means naturally there's some tricks there are some shortcuts and I've got eight of them to share with you all right now [Music] when you open up your prototype to preview it or share it on the cloud it's got to open up on a screen it's got to have a start point and sketch is kind enough to allow us to set that start point you can see here that there's a little flag next to this artboard this is currently set as my start point and you can do that from the prototyping menu at the top of the screen right here you'll find use artboard as start point the problem is that when I go to preview it's gonna start there no matter what I'm trying to look at if I'm down here looking at profile and I want to preview what the profile screen is gonna interact like let's say I want to click around and test out some of my hot spots if I go to preview it brings me back to the frickin start point it gets really annoying so I recommend that while you're in the process of creating your prototype disable all star points you don't want to have a star points so that way when you click any object on any screen and you go to preview it brings you to that screen so you can click around and you can start testing your prototype from the point that you want to start testing your prototype from rather than starting from the beginning every single time prototyping is definitely a way to take the product to the next level of fidelity but it's also a way to keep yourself organized for example we've got a link here when you tap on this it's going to go to Karen Pollux profile but I might not know where that artboard is and I don't want to scroll around looking for it so if you have an object selected that's been linked to a screen you can head over to the inspector and there's a little arrow and if you click that arrow it goes to the target artboard it'll bring you directly to the artboard that that object is linked to so you can help yourself stay organized and not have to worry about scrolling around quite as this next one is one of my favorites and it's one that you've possibly found already but if you've got a back button or a closed button that's going to bring the user back to whichever screen they were on prior to this one for example this camera screen can be accessed from the camera button that's on a bunch of different screens so I don't know necessarily how they got from where they were to this screen but what I do know is that the close button is going to bring them back to wherever they were before so if you press W to begin prototyping to create a link there's this little on object UI that is a back arrow and if you click to link to that instead of linking to another screen it will automatically bring you back to wherever you were when you navigated to this screen and my favorite part it'll automatically reverse whichever transition you used to get here so for example if we go to profile and I'll press command P to go into my preview here if we click on the camera icon it does a slide up animation and when we click close it automatically knows to slide down that is why this is one of my favorite little tricks because it does work for you so you don't have to what could be better than that this next one is huge whether you've got just one button that's repeated on a bunch of screens or you've got a full-blown navbar that's repeated on a bunch of screens you probably have already turned it into a symbol so that you don't have to worry about making changes on a bunch of separate screens when all these things are really sharing one UI element now with that you can share the links between screens so that you don't have to link everything over and over and over again you can link from this symbol one time and then wherever that symbols being used the links will go with it so if I double click to edit this symbol and I'll press command 2 here to zoom in I can select any button here and press W to create a link and instead of clicking on another screen because the only screens available to me are other symbols you head over to this little on object UI this little element here that looks like a sort of an escape or out word icon I'll call it what you will it doesn't matter if you click on that it comes up with a little dialog box that lets you choose which screen you want to link to so in this case this would go to feed this would go to forget what the pages are called comments this would go to camera etc etc and I don't need to be able to see the artboards in order to link to them and most importantly once it's done it's done wherever this symbol is used it is a done deal another problem is that you can't override in case there's an exception to one of these but stay tuned there's another trick coming up so by now you know that you can use a layer or a group as a link but there is another way to link part of your screen to another screen and that's using something called a hotspot fortunately the letter H is the shortcut for hotspot couldn't make any more sense and if you click and drag it'll create an area that becomes a touch target and whatever is within that area design-wise doesn't matter as long as this area is touched it'll automatically link and bring you to wherever you want to go so when I let go of the cursor it automatically brought me into link mode and it's waiting for me to choose a destination for this hotspot and when I click that is a done deal so it allows me to do sort of a more general area and not a specific object you might be wondering why not just create a group or why not just create an invisible layer that has no fill well I'm glad you asked there is something special about hot spots and that's in the next tip in this prototype in addition to my bottom navigation I also have a top navigation that is also global it's a symbol it's being repeated on several screens and on that navigation bar there is a search icon and the search icon is linked from the symbol to this search screen here the problem is there isn't just one search screen this prototype is meant to demonstrate that when you click search on a screen it shows the search bar on whatever screen you're already looking at so this comments screen when you click search needs to link to this comments search screen meaning I would need to override where this instance within this symbol links to and as I mentioned in I guess it was two tips ago that you can't do that well that's partially true there is a trick though of course that's why we're here so if I double click and I go into this symbol you can see that this icon which is a symbol itself is currently linked out and it's currently linked out to a specific screen now that can't be overridden but if we remove that link and instead press H to create a hotspot when we create a hotspot and we link that hotspot I'm going to do the same thing I'm gonna link it to the same place the explore search screen that is where it was linked before so so far nothing has changed right but now when we go back and we select an instance of that symbol you'll notice that now there is a hotspot override that was not there before only hot spots show up as overrides so now for this particular instance for the comment screen I can switch this to link to the comments search screen so I am NOT out of luck as described in a previous tip you can override the link for a hotspot you cannot override the link for a normal layer huge huge trick in the previous tip you guys saw me remove the link from the search icon and then create a hotspot from scratch and then relink it that was probably painful to watch that was painful for me to do and it's not the way to do it if you select any object it doesn't have to be within a symbol it can be anywhere within your design in a symbol on an artboard doesn't matter with an object selected that has a link if you head over to the inspector there's this prototype icon when you click on it it'll automatically take the selected layers and it will lift the link into a hotspot as a separate layer and then you get your overrides if it's a symbol you get your overrides as described in the previous tip and you can do that without having to redraw and relink every single one check this out look at all these beautiful hotspot overrides how cool is that it's inevitable that if you're creating a prototype that has a lot of screens it will become quite the bird's nest of these little orange connection lines so this tip has multiple parts to it if you press ctrl F on the keyboard it will hide away the bird's nest so you don't have to be burdened with looking at all these things you press it again they come back you can toggle back and forth that's not so much a trick but I do recommend that when things start getting crazy that you keep it turned off because if you click on an artboard it will show the links associated with that artboard if you click on a group it'll show the links associated with that group so essentially it shows the children of the selected object in what they are linked to so things are way less hectic you can also hold shift and select multiple artboards to see all of the links for those particular artboards without having to see the whole bird's nest all at once because it's just it gets crazy it gets absolutely nuts so this is definitely the way to do it if you've got a big prototype that's it hope you guys enjoyed if you did please subscribe if you haven't already and if you're new to sketch check out learn sketch comm there's a link in the description below along with a link to my you to me course on sketch and if you click on that link instead of paying full price you'll pay its like sixty seven percent off so big fat discount for you alright guys see you soon [Music]

Channel: Joseph from LearnSketch․com

Views: 100,568

Keywords: sketch, tutorials, app, sketch 3, sketchapp, learnsketch, learnsketch.com, bohemian coding, sketch resources, sketch app sources, mac, osx, software, design, graphic design, web design, ui, ux, Apple, Tutorial (Industry), OS X (Operating System), Macintosh (Computer), Software (Industry), Adobe Illustrator (Software), Adobe Systems (Organization), prototyping, Sketch 49, linking

Id: hE0dycKVCbI

Length: 10min 50sec (650 seconds)

Published: Fri Mar 02 2018