PenPot Tutorial - The Open Source UI/UX Design App

Key Takeaways

what is up everybody Gary Simon here so you may have heard recently within the past few days an app that you never heard of before called pen pot now pen pot is a free and open source UI ux design and prototyping app open source meaning it is going to be 100 free so this is going to be the design that we create here in the penpod app which you're looking at right here looks very similar to you know traditional UI ux design prototyping apps uh so penpot.app is the actual website address I in here you can go ahead and just sign up for free and you can get started and this is exactly what we're going to take a look at in this sort of crash course now I do have to say that at the time of recording this video they lack some pretty significant features that we've come to know using apps like XD and figma those are there's no component States or micro interactions meaning you can't have a component and and then just be able to have different states like a hover state or whatever state you want to Define so that's kind of you know a real Buzz Kill there's no Auto layout and there's also no plugins at all I so these are things of course that they are definitely 100 percent going to be introducing I they say it themselves so I it's one of those things if depending on when you're watching this tutorial it may be updated quite a bit already now I also wanted to mention I because of the news of adobe buying figma I don't think at this point in time it's very early on that it necessarily means you have to switch it really you know they put they spent 20 billion dollars let's hope that they don't really screw it up I'm not planning on Switching myself anytime soon unless you know an app like penpot.app really ends up being just as good if not better so as always make sure to subscribe and let's get started now chances are if you're watching this video you probably want to be a better designer and if that's the case how much do you really want it because at designcourse.com I've created a UI ux course that will help you go from designing layouts that I might rate a four or five up to eight and Beyond but more important than that as a better designer this means that you can land higher paying clients and jobs this course includes over 16 hours of video for the interactive UI design tests and even mentorship where I personally take a look at your work that you submit I review it and many times I also revise it providing you with great feedback to help you become a better designer now for this video I want you to use the coupon code UI 2022 and that will give you 22 off at checkout all right so after you create your 100 free pen pod account we can create a new project by clicking new file right here now the designer in me just had to point this out is being very nitpicky uh but when you hover over this little plus icon this right here that section you don't want that you want to have more white space even on the hover State between these elements but you know what not a big deal Okay so the we'll do a quick uh overview of the user interface here so first uh it's very familiar if you if you've used figma if you use XD or something it's it's very it's if you use framer very similar sort of setup when it comes to the panels so on the left over here we have a tabbed section sidebar so we have your layers very typical here Pages at the top um and you know this is just like uh not XD but figma that have the pages up here and then the layers will be shown underneath uh we have the assets over here for like components and stuff like that the toolbars on the side on this this other side menu over here and you know pretty straightforward just your your drawing tools your type tool you you insert an image over here with an image tool and we'll get to that uh it's not quite ideal in my opinion but I'll show you that and then over here you have your inspector so when you select an element I all the properties will show up here that you can adjust them if you also have your alignment and all this stuff up here and then also a prototype section same exact thing as figma essentially one thing that this app does have over Adobe XD however is the ability to change the back round of your canvas uh the background color so that's going to be very handy so if we change that we can come here like a darker if you have like a light sort of design you're working with or you know in the inverse uh you can leave that light if you have like a darker so anyhow let's go ahead and get started so how do you start a an actual I guess you could call a frame for uh not framer but I figma calls it a frame I other things I think XD calls it artboards uh well if we come out right here we'll see it says board all right so they call it a board now there's no presets by default you kind of just have to click on here and then it will give you access to the size presets like your different devices over here so I'm going to go ahead and just choose if I scroll all the way down um a web I I think maybe I'll do web 1920. all right now one thing I don't like is if I hold my control or your command on Mac and you use your mouse scroll wheel it goes from 100 here 54 when it would while I barely touch my my mouse scroll will all right so that's kind of frustrating I'd like it to be a little bit more incremental uh if possible yeah it's just like a small kind of grape right there um and so let's go ahead and get started what we're going to do is I we're going to create a rectangle all right so rectangle here R for the shortcut I which is very familiar just as in figma we're going to left click and just drag that sucker out yeah maybe something right around here all right and I want to make this a gradient so again the property inspector over here we have all of our properties we can see we have size position rotation and your corner radius again this is all pretty much just like figma you have your blend modes right here uh opacity or pass through your fills and then you have strokes and shadows blurs and you know it's almost like a replica of figma all right um so we can come out here and in this section we can create our gradient all right so for the first color for our gradient I'm going to go ahead and choose something probably I kind of want something like like pastel all right and then for this one again we want to make sure we're going to boost this all the way up there we go for the opacity and for this one we're going to use like an analogous sort of color we're going to go into the blues kinda now let's see what that looks like I'll Zoom back out here now we can also change the angle of this linear gradient I haven't actually tried changing the angle yet but you just oops no let's try it again I want to select this there we go all right so we can kind of do something like this and that maybe a lot of color stop in the middle I haven't even tried adding a color stop yet here so let's see how easy or difficult they made this oh shoot there we go okay um so if I double click it's not working if I right click it's not working how do I add another color stop that's kind of interesting so what's this no well that's interesting I guess I can't I can't do it all right well going back well that's basically I'm hoping that there's I'm just missing something and you can you can actually have more than two color stops for your gradients if not hopefully they'll update that um so if you want to have a gradient you could completely do it like this um we're gonna let's see for instance we wanted to have a photograph background well let's see how we can do that now typically like on figma if you go to Phil uh you'll have the option to just like right here I think the same thing on framer is true as well you can just choose an image like in a tab navigation uh but I don't see that option here so you have to do it differently and so let me show you how to do that you click over here on the image tool and when you go to the image tool hopefully there's nothing you shouldn't be seeing here I you'll you'll be taken to just your file you know your prompt to open up your files so um I'm going to go ahead and I downloaded real quickly an image this image right here from unsplash I try to remember link this in the YouTube description but what you want to do is just go ahead and take that drag that to your desktop or just like download the medium version that's actually what I did initially if I get Ctrl J show in folder there we go I can grab the actual URL of my downloads we can go back here and then we can come to this all right okay so I could paste that in and then click on this all right so here it is let's go ahead and leave this here and we'll put this to the top or so and then I'm going to select both of them right click and choose mask all right sometimes I get the layer order messed up I always forget about that let's put this at the bottom all right let me see here if I did not do that correctly all right so we'll select both of these and choose mask all right okay there we go that's what we want so that's how you can do like an actual mask so like if you were to click into this group then you can adjust the mask size itself or you can also reposition the image as well inside of that mask I think this is what we're going to use right here I was going to do a grading for this but I forgot that this was an actual image that I used you could see this would be like a three color stop sort of gradient like where it's this pink to like an almost white to like a blue over here okay so let's go ahead and create a grid so they definitely have a grid here so if we CH we select the board at the artboard or the frame whatever you want to call it we can come over here and choose under grid plus and then it's just kind of the same way as before we can change let's let me click plus again change this to columns just 12 by default if we come over here let me get this back up I we can change I the gutter or the margin rather to like I don't know uh 200. all right let's get back out and there we go so that's our basic grid let's go ahead and left click and just use a letter Mark or word Mark type of logo so Gary soft Gary soft that's my you know Microsoft okay hi let's go ahead and let's bump this up to like 24. maybe we can go larger yeah maybe that's fine uh Source Dance Pro is what they have by default we can search fonts up here Poppins so I'm going to use and we'll make this sucker bold all right so we'll go to 700 bold garysoft what a stupid name okay so let's go ahead and put that right up here so I'm going to duplicate this with Ctrl D or command D on Mac and we'll just hold shift and move that sucker over right around here so now for this one typically for a navigation I like to make the nav type a little bit smaller than whatever the logo is at so I'll go down to like 20. I think that's fine and then we'll also change it um I think we'll just go regular here all right so components does penpot have components yes they do but I found a little strange to work with um and you'll see what I mean probably here so I with this the we can see the rollers out here we can actually drag on uh guides right here and this will become handy just to make ensure everything is aligned up properly um so to create a component we can probably right click it and choose create component work just control or command k now it's a component all right so you see it's like highlighted it kind of like uh in a blue blueish color all right um we can also go ahead and duplicate that so we can now just use our keyboard arrow keys or just hold shift and now these things these rollers can kind of get in the way so Ctrl shift R will toggle that off all right so if I hold shift and move this over maybe around here oh by the way let's go ahead and change this type we're going to just change this just to home and we're going to change this one to now I'm like really double clicking and it's like not working sometimes that's a little finicky it's kind of strange case studies all right now one thing that I found strange is let's say for instance I change the font size I decide okay for this component I want all these nav links to be a little bit larger and I decided to change the the font size of this so let's change it to like 24. well it doesn't it doesn't end up dating any like the the instance of it so that's a little strange to me now it is weird it has these kind of like in groups over here even though it's just text anyway so it has the text inside of a group already so like this must be indicative of the component itself and then whatever's inside of it so maybe I can't change it there all right so let's back up well geez I shouldn't have done that let's do home I let's go ahead and we have this selected the type layer itself let's try 24. it doesn't update the other components so it's like what is the purpose of the component if it doesn't update the the child instances let me know if I'm screwing this up but uh that's one thing that was confusing to me that I could not figure out anyhow let's continue on um I'm gonna put this right here again we're gonna make this case studies again there's weird thing like trying to double click and it won't let me edit until after a couple times okay studies uh let's duplicate that one now sometimes when you duplicate it won't duplicate the actual um component it'll duplicate the type inside of it so you want to make sure you're selecting the component itself and then duplicate it hold shift it does have this at least where it's showing us you know the equal white space between the elements here I am trying to double click again all right so you have to wait between double clicks apparently um case studies I what was I using here on my all right so clients right here and then we'll do contact all right so a few things are finicky that I just I'm not a fan of but it is what it is I'm sure it will improve in the future um now let's just give this an active state color so if we grab the current background color here and then maybe just push it over here somewhere all right so now we can go ahead and let's just hide this grid and it's looking pretty solid so far again like if you know how to design well you can use almost any app it's just like sometimes the workflow is not as ideal if you're switching apps and it becomes a little bit unfamiliar so let's create a headline we'll do creating stick web experiences that's a weird headline but that's all came to mind so uh for this let's try just out of the blue like uh 75. maybe a little bit too large let's try 65. and what did it do it just it something happened I don't know what it changed it looked like it changed the opacity but I don't it didn't show as changing the opacity so I was dealing with weird issues like that so we could center it up here now let's create some um cards so use a rectangle tool that's R in your keyboard and we'll drag out something yeah right around here let's duplicate this just to see how much space we'll have from the very light the right and left okay that looks good to me okay so rounded borders we have that for sure you can control all four by clicking this right here or if you want them all the same uh let's change this to like 15 and make the background white all right so they also have shadows and it's pretty you know if you if you use Shadows before you know you've used them pretty much anywhere you know how to do it anywhere um I'm Gonna Bump this up to like 15 on X and Y and the blur like 25 so it's going to be real nice and blurry we'll go ahead and grab maybe this color right here but maybe we'll also take down the opacity from a hundred percent to something quite a bit less so we don't want it to be be too harsh so I think right there is good um that's going to be 53 opacity all right so this is gonna be your first card let's go ahead and create some type inside of it UI ux um that was 65 we should probably do something like maybe 40 here and then make it bold it does also have what's called Auto width right here in this middle one um right now you can see this one is fixed we choose Auto width it'll just stay the width of whatever the content is inside of it we'll go ahead and make this one bold all right and we'll put this nicely so we have equal white space around this container we'll go ahead and duplicate that hold shift and scale it down making M look good and function oh darn I got a SpongeBob type going on there make him look good and function well okay now let's go ahead and scale that down quite a bit more maybe we'll do 20 and we will make that regular for the font weight and we'll just drag this in right around here and I think that looks pretty good okay next up um let's do something interesting on the inside of this card so go ahead and drag out something like right here all right let's use an adjacent color found in the UI right here let's give ourselves some Corner radius like 10. all right and then I'm going to duplicate that and like maybe offset this we want these to be kind of like centered there we go all right this one um I think we're not gonna have a fill but we will have a stroke so we're going to add a stroke the stroke is you know like just like Shadow if you use strokes and other similar apps you'll know how to use them here I think what we can do is maybe we can grab this over here for the stroke okay cool now don't worry they're not going to be hanging off the side like this um so let's go ahead and take our type here type tool and we're going to say featured we're going to make this quite small maybe like size 15 or so all right maybe we can even go 14 for that and then we'll make it bold and we will increase the the tracking so to speak so if I go back out you can see it's just increasing the letters the letter spacing essentially all right now we'll go ahead and take this duplicate that reset this to zero for the letter spacing and this one will be regular and this will say some project .com and let's use the pen tool the dreaded pen tool for the first time so over here we have the pen tool or p on your keyboard I'm just going to hold shift let's left click once hold shift left click another time and there you go it's a pen tool I'm going to make that a little bit smaller yeah something like that and uh these are kind of large so I can probably reduce both of these let's do them both at the same time like that okay now I'll take this type locate this we're going to put it over here and I'll just put latest for this type now I let's say for instance let's break that up let's say for instance that we want to mask out the side of this we don't want these to extend outside of this white container here well what we do is we're going to duplicate this this background right here so Ctrl d and then with these two selected holding shift so we have three elements selected this card this card and this card will go ahead and choose to right click and choose mask there we go that's how you do that and it looks pretty solid to me for a card so now we'll take this we will duplicate it Ctrl d this one might be something like um front end Dev I'm not going to bother adjusting the other type we will let's just adjust adjust this card so you can control left click just like in figma to access layers quickly that are might be nested in groups and stuff like that let's change the fill here to like a color over here just to separate these a little bit we can do the same thing with the stroke there we go all right that looks like a solid and let's move this stuff up on over let's also change the um the the drop shadow over here so to do that uh Ctrl left click drop shadow we'll go ahead and change this to there now one thing that's strange is it still looks pink to me right it does not look correct so it makes me wonder I think it's because one of these elements or the group as a whole might have a drop shadow it just does it still looks pink it doesn't look like it's changed to me that looks pink and not what I adjusted so if I move this out of the way we select this oh there it goes yeah for some reason when I tried it the first time it just didn't update so maybe it's because it's select oh that's why so we need to be able to select Rec six okay so rectangle six is the one we want to change so if we do that again there we go that was my fault so now we'll go ahead and take the uh where's the opacity right here just use my keyboard down arrow key there we go so now I take both of these move them there all right looking pretty solid here so far now I'm going to go ahead and put in some type so we can fill out this area with a primary call to action and a secondary call to action um so I'm just gonna to be honest I'm just gonna move this over oh wait I can't do that I'm thinking I can drag stuff between Windows you cannot do that Gary so I'm going to put this type right here you already know how to do type no big deal and then we're gonna have a button so a button uh rectangle let's choose R drag out I think we'll align it to the Baseline of these cards um we'll go ahead and grab this background and then just kind of like uh really saturate it with color to make it more vibrant all right we'll give this a 10 I would say for the Border radius Corner radiuses rather type tool left click once and we'll just say my work and we'll make it white and let's try like 24 and bold 700. okay so if we were to take this type right here um and set this up so that the constraints over here on the right side are centered on the top and bottom and then we go to reset size this look what happens that's not ideal right there so a workaround for for this is we could take this all the way out to the very left and the very right center up the type choose don't choose Auto with sorry Center up the type now we take um and select both of these elements now that they're centered we can just uh move this around although that doesn't appear to be yeah it is centered it looked kind of strange to me it's not centered oh okay because it's also changing the the height here when you scale out so if you do this it's not staying exactly centered as you would hope um so unfortunately it doesn't seem like there's a a good fix for this unless I do this Auto height nope so yeah unfortunately that's one downside uh if you're dealing with like you know create a component typical typically when you have buttons you're creating components out of them uh and unfortunately if there's not like a good system for like look like look what's happening here this is this is not ideal either for the size of this uh when you create a component out of that all right so anyhow if I move this over here I'm going to go ahead and just ungroup that we're going to push this in we'll go ahead and duplicate it and we'll have a secondary call to action with no fill we'll give ourselves a stroke not a not a health stroke I don't want to give myself a stroke that wouldn't be a good idea but uh we'll go ahead and put that right there we'll go ahead and make the fill this color there and then we'll also make it regular all right so this could be like hire me something like that yeah and there we go uh a real simple UI kind of like a not a full fledged UI you know of course you probably want to have more stuff here uh notice how it was pulling these down what you would want to do is Select these just to make sure that these are uh top for the height and that way that won't pull down like that so you do at least have constraints for when you resize things um but yeah let's go ahead and create a very fast sub page all right so let's um let's see here let's let's move this up except we don't want that to happen so we will get this image here and just pull that back down there we go there we go uh this one might say like UI ux let's let's get uh let's get this type right here all right and then let's hide all this delete that let's get this container right there and then we'll delete that uh for this drop shadow I might want to change this to like 10 and 10. that way we can see the outline at the top a little bit slightly better all right and then finally yeah maybe we would have more type inside of it this is annoying me let me change this to like 35 for the blur there we go we kind of see it a little bit better now we're just assuming we would have content and all that good stuff here all right so this is our sub page and the reason I did this is because I want to show you real quickly the prototyping uh so let's say we'll make this whole card clickable we go to prototype we just drag it onto here just like XD or figma uh and then here are options so you have triggers of type of mouse enter and mouse leave all right navigate to as an action we can just choose open overlay so you can have overlays toggle close preview screen or URL so you can have clickable links here um destination is where we push it to and then animation is dissolve slide and push obviously not a ton like the the other big guys have uh let's just do dissolve he also has easing there as well uh oh what's happening there we go sorry about that so now um we can go ahead and reverse that so we could take our home button and push it back there again we'll change this to dissolve and let's go ahead they also have flows here so we can hit play all right there it is and we'll choose this card you can see it does change the cursor and there we go we can go back to home the one thing that we don't have however like if you want to have hover States on your your your components you would have to literally like duplicate the entire artboard um so there's no thing no such thing right at this point in time if it's recording this video which I'm sure will change you don't have component States you don't have so therefore you don't have the ability to do like hover States or selected or active um stuff like that you also don't have the ability to just take components like I said and just create interesting animations like based on Hover like on at the component State now you can do whatever you want at the board or the artboard or the frame State and change whatever you want but then that becomes very cumbersome because I you you have to replicate everything even if you just wanted to change one tiny thing like about a component I'm sure they're going to address that as well um but at this point in time those are the the primary um drawbacks all right everybody hopefully you enjoyed that if you did make sure to subscribe check out designcores.com for my interactive UI ux design platform and as always I'll see you soon goodbye [Music]