Lessons

Lesson Info

Putting It All Together In A Desktop Example

Hi, everyone. Uh this video, what is it? It is kind of like a production video. I, I need a desktop version. We don't have that yet. OK? So I'm gonna work through it. There is nothing really new that we're gonna learn in here. It's just a kind of a ride along of me making something and showing you how to tie in variables, update, variables, use some of the styles that we've used. I'll give you a few shortcuts as well. But if you are a capable designer and you're pretty good at fig M you feel already you can skip to the end of this one. I won't be heartbroken. There's nothing essential in this video other than me working through and making this. OK? So this will surprise you in the next video. It's just a frame with some stuff. There's nothing fancy about it as well because we're going to get into prototyping and we need it. So I'm gonna make it in this video along with a home page, a few tips and tricks, but mainly just a little bit of a ride along. Enjoy it. Skip it. It's totally OK w...

ith me. But if you are sticking around, let's go. Ok. Let's get it started. I'm gonna hopefully look professional, but it's gonna get messy and it's the kind of things that you're gonna run into. Hopefully. So, working on the desktop page cos we've neglected it in this course, I'll turn on my grid uh command forward slash grid. Cool. Uh So you come down a bit, I'm going to, now my components are getting a little messy. So I'm gonna tidy some of these up. So if you click on it, it will jump to the page that that's on. There. It is. OK. And that was good. I don't need it anymore. Where I'm going, I don't need you either. Can you see it highlights it if you're zoomed in and you click on it. What's this? If I go to my other page, components, pages and I go to here and I go back to my assets and I click on it. What's this? It highlights it on the page. It takes you to the page but you can't see it. So you gotta be zoomed out a lot. There you go. It's highlighted it and I don't need you anymore. Cos I'm doing super amazing variants. Do I need of that guy? Kind of do if I used the other places? Remember even if you delete it from here, it will as long as there's an instance somewhere you can go back to it anyway. That's nice. And tidy. Let's go down to my page. Now, you, we're gonna start with a bonus shortcut. OK. Jumping to pages is when you're on assets, it kind of closes them all up layers, it's a little bit more exposed, but you can still get to them there. What I find most useful? You might not. If you've got a PC or a big keyboard plugged into your Mac, you can use page up, page down. OK? On a Macbook Pro that I've got a whole function and use the down arrow and it just moves through the pages. Can you see now? It seems a bit weird. It's not weird. But can you see the little tick there moving this bit here? So after a while you get a sense of like where things are. So I know that that's my desktop view. I'm gonna do that in this video just because I do it uh assets panel. Let's grab our logo. Give me a logo. Now it's a component. It's that size. It was made that size for our mobile. I'm gonna make it bigger, holding the key or tapping the key tool. Drag it out a bit. Here we go. Remember we've got a primary secondary and accent color of that. I'm not sure what I'm gonna use for that. Let's add a bit of text here. So I'm going to draw a kind of a fixed width box that goes from that column to, I don't know that column. I'm going to type in my, the music for our people, music for people select it all. We're gonna use some of our styles. Remember I said I wasn't gonna use uh zero because it was really big. Totally using it on desktop view. OK. So that's kind of what I want. I just want to do. I want to add some buttons. So we created some variables earlier. OK? So I'm gonna use this. Can you see how we're putting together with these things? And you know the things we've made earlier? So this button here has a few. So do I want a small one or a large one? I want the small one, please. And this one can stay the primary color. I'm going to make another one problem with this one is I want that outline view. So let's go and fix that one. So I'm going to right, click it and say take me to the main component. Here it is and we're going to go a bit nuts with this. I don't need that. That's just an instance of this. Let's go a bit nuts. Let's first of all make the accent color of the button. I don't have that. I've only got primary and secondary. So I'm gonna select that, grab that guy, command D control D, it's messing with my flow. That's alright. We can make this bigger. Remember, let's make it really big. You two can go down here and this one is going to be small secondary, I'm gonna actually change the color of it. First. Remember Z and this one's gonna be ex in color. And what we'll notice is, can you see this one says if you see that that's bad, things aren't gonna work. Properties. Values of variants are conflicting because we duplicated it. This has got the exact same, it says it's small and secondary. So fig A has no chance of working. Which one you actually mean? So I need another property, ok? I can either go back to this outside one and say I need another one in here. So this property I need another. Well, right in there, I'm not sure. Let's undo that. Let's go back you this variant, let's do it here, the safer, let's add a new one, ok? This one's called accent. So now it's not having that problem. Ok? I probably need another one of these. So I'm gonna duplicate this. This one's gonna be the accent color. Let's actually give it the accent color. Alright. So what you tend to do is just go through them all once you're making them, especially when you're new to check if there's any errors. So I've got that next thing I wanna do is the outline views. So basically what I'm gonna do is grab you and go, I want an outline set. I need to make it a little bit bigger. So head towards that giant version right. So I'm gonna make an outline view of all of them. Actually, I'm never gonna have an outline of these. I'm gonna keep it nice and clean. So these guys again are problematic because they don't know what to do. Let's make it this like an a third level multidimensional. So back here, let's give it another not variant property, ok? Which is this kind of like up here, this one is gonna be the outline version. Now o headline, OK? You, you, you are going to be the outline version perfect. And instead of calling it default, we're gonna have the outline turned on. OK? So all of these guys, I'm going to select them all. I'm going to say you have uh no, Phil. Can you see when you've got lots of fills selected? It says I don't know what to do. It gives you a hint just like that will replace them all with accent one. I'm gonna delete it. I don't want any fill. I'd like a stroke. There's gonna be probably 232, 23. We can come back, we'll start with three. OK? And this one here is gonna be the stroke of primary stroke off secondary circ of accent these buttons in here. Now to click things inside of other things we did this earlier on, we have a whole command and you can click inside and if I hold shift and command, I can click little bits within these frames. Otherwise I can't click on them if I hold shift and click these, it grabs the entire thing. I just want to grab the bits of text inside those frames whilst holding shift and they're all going to be white. So we've added it into the property. So this one here is small, it is primary and it's got an outline on. What is this one? This is small, primary and the outline is on. Now, let's turn this one to off. Same with this one and that one I can select more than one. So you are the off version. Same with this. These are all large, they're mixed colors, but I can make them all off in terms of their outline. Remember we use on and off. Hopefully we can go you small. I need it to be accent colored and I could turn the outline on Woohoo. All right. So I'm gonna delete that. Let's go down to a page function down arrow or page down. OK? And you might not find that. Sure gu helpful. But now I can say small, you might find this one. I want secondary color and I want the outline on. OK? And I'm gonna change the text. OK? This one's gonna be the Bye now. Bye now. And this one here is going to be the learn more. Do you notice they didn't bump each other along? They kind of fit in there fine. But if you do want that whole bumping thing along who remembers what it is. Ok. These two need to be turned into something because we've been using smart selection. We like smart selection, right? It just means that we don't have to do anything to them and we can kind of grab them and move them around. But if you want them to kind of interact all the time, you select both of them and make them a auto layout. OK? And all it just means is that they'll reference each other. So let's go by. No, this one here is going to be the learn what not really necessary there. But hey, we're learning. OK, let's add our NAV along the top here. OK? So I'm going to use the same kind of button problem with these buttons is I don't like the round the corners on everything. OK? So I want this to be actually let's just add the text first. So this is the actually let's turn it into an auto uh layout because I do want them to kind of adjust as the things adjust. Oh And this gives me a chance to show you something cool. So at the moment, let's adjust this one. So this is gonna be my uh checkout or cart or yeah, cart, let's call it cart. Can you see it's kind of doing left to right? Which is not what I want. Who remembers the term to kind of get it to stick to this side, you're like, I remember you with a hand up, I pick you. OK? What is it? It is constraints. OK? So I've got this selected doesn't have to be an all eye layout, but it has to be a frame. And you can say actually constrain yourself to that side. OK? And what's happening is this is the thing I want to show you. Can you see what this, if I move you over there, it's constraining to my grid. OK? Or my guides or my columns even. OK. Instead of the edge of the frame because when we are using columns like this, especially, it's sticking not to the column really, it's sticking to the margin, the edge here. So it just means that if I now adjust this, I can say if I adjust this thing here, it's gonna stick to that column rather than the edge of the page. Just something to note that it does stick to columns as well. So let's go. You, you can't see it but it is still doing it sticking that way. So now if I go, you are cut and you are home and you are a account. OK? I want you to be the HM secondary and you can be the accent, all the colors. So now what I wanna do is I want one that doesn't have rounded corners cos I don't know, I feel like they, we've got different meanings, right? These are kind of navigation buttons and these are action buttons. Go here, do this thing. I want these navigation buttons to not have a round of corners. So right click it. Let's go to the main component. Why can't I see it? It's because my uh my little components are actually inside this thing, this auto layout. So in the layers OK. There they are. But I've clicked on this. That's why it won't do it. So what you can do is command, click to select one of them then right click and say go to main component. Another thing you might have noticed is this thing's really big. OK? You can actually, with your layers and assets panel, you can make this bigger and bigger and smaller cos as we add like these extra levels, you'll notice they'll kind of push this out and you need to kind of expand it out to see stuff. So let's have a little look, I've got, I wanna add another property. OK? And the way you organize these is totally up to you. OK? Let's say that I want to seem like a good idea to separate them that way. But now what I'm gonna do is I'm gonna go, you, I'm going to drag out another chunk of them. Actually, before I do that, I'll actually add the property. So I've got size color outline and I'm gonna do a new property that's called rounded go and I might actually add not just the property but let's name the round the corners on and let's add a variant to that one as well. That didn't work. Ok. So let's add the variant afterwards around the corners on. Let's duplicate these out and let's call these ones at a new, these ones gonna be around the corners off. You can start to see why now you kind of start needing this because you start getting quite complicated. But hey, we know what we're doing. OK. So all of these selected, I'm gonna say you have around the corners of zero or maybe just a teeny tiny one like a two. So my offer is kind of like a little bit on, let's like them all up and just tidy them up because look at that, look how tidy we are on the outside kind of component frame. Let's tidy this up as well. Is it gonna work? I don't know it might do. We're gonna see if there's any errors. No, no, no, sorry. Jumped out there. Nope. Nope, nope, nope. Actually, I never check it. I play with it and if it breaks, I come back and check which one's broken mine are doing. All right. Uh So let's go and play it uh function down or, or page down there we are. So you guys command, click one of them. I'm clicking, trying to click the outside, hold shift. So I'm grabbing all of these and I'm gonna say small colors are mixed. The outline is not what I want to change, but round the corners are off. Oh I feel so satisfying. Alright. I'm gonna turn my grids off. It's not a work of art. Uh It's getting there. Another little bonus is say we're working on the home page and we need to move to the next one and we know that you know page down or function down arrow moves to the next page but you can actually move to the next frame. So let's go to just um the mobile H this one. OK? If you want to go to the next um frame, so I'm gonna zoom in. So shift two. OK? And say I want to move to the next one is just in, just tap the N key. It's a good way of toggling. Shift in goes backwards. OK? You've hung out this long in the video. You get like a bonus shortcuts. All right, I'm gonna go down one. Here we go. Next thing I'm gonna do is that modal, we're gonna use it in the next video. So we need to kind of build it. So let's, yeah, let's practice what we're using again. I'm gonna start with a frame. Not a rectangle for no good reason. I'm gonna give it a fill of my brilliant, I'm gonna give it some round the corners. OK? It's that pop up, uh sign up to our newsletter thing. I've actually got an image that I cut out on Photoshop command shift K and it's called cassette tape. It'll be in the exercise files if you want it. It's massive one megabyte. OK? I'm in a whole shift and drag it out, something like that. Like I love those things that kind of project out over the edges, something like that. OK? Type tool. Let's draw a fixed width box. Join our newsletter, select it all text. Here's my alt hitting again back to using the uh zero version. OK? I'm gonna left align it actually let's select it all. Command shift L for left align. Now, there are some shortcuts that are totally ridiculous. I only know that one cos if you hover above it, it says text align uh left and right. OK. Your on A PC is probably what control alt L. All right. We're getting there. Now, in terms of the size wise, it's probably shift zero. It's probably the good one at 100%. So we know we're kind of not too ginormous. OK? So let's grab my type tool again. Actually, this one here is too big. So we're going to use that now, even though it is part of my like paragraph style or my textile, OK? I can't do that whole fix with stretchy box thing. It actually is in there for some reason. Here you go. OK. I want it to be that uh we've got fixed height so it kind of expands as we need it just to tidy it up. So it's not in our way mainly. OK. Same with this one. I'm gonna drag out a box and I'm gonna see that you are that kind of stretchy bottom version and I'm gonna change my style to paragraph and this one's gonna say I'll speed this bit up. Ok? I can't spell there. It is. Did you mean? That's what I mean? Thanks Google. Uh What else am I gonna do? OK. I'm gonna use my sweet form text field. OK? And remember there's some things that we can, I could go back and add another variable full of filled in background, but I can actually just modify this. Remember there's things you can just overrides. OK? So this one here, I'm actually gonna put a fill in the background. I want this label, I'm going to delete it, did it delete, you know, it didn't. OK? Layers you can see there. I deleted it and it just turns it off so it's still there. Just gonna mess with my lining of things up. OK? But hey, it was handy. Let's grab our assets. Let's grab our button, sign up. So I just put it over here. Oh, I totally want a rounded corners version I do. Here you go. You can be primary secondary. Oh None of the work. Uh green b the ground that'll do. OK? Subscribe again that one. If we want it to push the other way we clicked on it. We say actually you uh before I do that, actually let's undo it. OK? If I want you to be, I want you to kind of go off that side of the exterior frame. So now when I type look at us, we're being fancy contrast ratio here is probably not gonna work like it's just not enough of a contrast, but I'm going to acknowledge that and move on. Uh Let's change the sample text as well. It's cool that you can change so much of these things into. All right, my little frame is going to have a drop shadow effect. That's probably going to be enough until we hook it up in our next video. So yeah, I hope that was useful. You were totally able to skip it. There was a couple of bonuses in there and I think it's nice to see people working like I'm not a super amazing designer, but it's nice to see some of this kind of coming in and being used in different instances. I hope it is anyway, either way it's done. Now, let's get on to the next video.