In this 10-hour video course, you'll learn core skills and techniques for user interface design, from simple graphics to complex patterns and design systems.
10:46 min
In this video, Laura shows you how to understand and organize files in Penpot, including working with pages, boards, layers, and naming conventions to improve workflow and collaboration.
Licensed under CC BY.
🎹 Music: Great podcast intro by Lundstroem; Lofi Chill Hop - 20 min mix by Ketsa
📼 Video by Penpot
10:46 min
Let's look at how a file is organized in Penpot and how we might organize our own files.
When you open a file or create a new file in Penpot, by default it will have one page. And here I have two pages. And to create new pages, you use the little plus button here in the pages section, and you select a page to view that new page. We'll have a look at that other page in a bit. These pages are listed inside of the layers panel here.
Each page has its own infinite canvas. This is the space here. You see you can keep zooming out forever and the canvas will still be there. And you can change the color of your canvas like I've done here in the Canvas background section. Now, this is accessible when you have nothing selected on your page. So if you have a board selected, you see things in the design panel. If you deselect that, you get the canvas background and I can change the color to whatever I like. And each canvas background is saved to each page. So if I change this to a dark color here, but I go to my other page, it's still got a different color in the background.
Boards are a really important tool inside of Penpot and you can create a board from this board tool at the top here. So I can create a board, I can select the tool and drag out the size of the board that I want, or I can choose from the size presets list down here so I can choose what size I want my board to be, and that will set it to that dimension. So I could go here for, I want 1024 by 768, and that will set this board to this size like this. And you can move your board wherever you want on the canvas, wherever it makes it easier for you to work on it as well. By default a board will have a fill color that's white. So I can change that. If I want to make that a different color, I can change it to a different color or I can remove that fill color entirely. Making it transparent and the color of the canvas will show through to the board.
You can rename your boards by double clicking on the board name here, naming it... I don't know... my new board, or you can rename it in the layers list over here. I can also copy a link directly to my board, which is really useful. If you're working with someone else and you want them to be able to open your file and jump directly to that board, I can right click and here I have an option to copy link, which will copy the link to my board, which I can paste and share with anyone else. You can delete a board by just selecting it, and you can either use the delete option here or as I will backspace.
So in the left panel we have this layers section and the layers are shown down here. Layers are essentially a list of every object you have on your canvas in order from the layer at the top, the top of the list is at the front and the layer at the lower down the list is at the back. If I select this layers page, you can see this example here... so on this board, this layers board I have here, I have this little avatar. And it has a lot of different objects on the avatar that make up the avatar, and I've labeled all of these. So these are all just paths and shapes, and you can rename them by double clicking on the layer. And maybe I'm going to call this spectacles.
Now, you can't actually see the spectacles in the avatar right now because the spectacles layer is at the bottom. And also this avatar's looking a bit freaky because it doesn't have any pupils in the eyeballs, and that's because the pupils are very low down in the layer list. So I can drag the pupil's shape up the layer list and position it above the eyeballs in the layer list, which will then. Make sure that you can see those pupils above the eyeballs and it looks like a normal face now.
And I can do the same with the spectacles, so I can select the spectacles object. You see, when I hover over the spectacles object in the layers list, it shows me an outline of that shape on the canvas, even though it's not currently visible in the design. But I could select that and drag that further up. So I guess I want to put it above the nose. And there we go. You can see that we have the spectacles in our layers list. If we are working with a lot of layers, which you often are, you might want to search to find a particular layer, and you can do that by hitting the search button and then say, I wanted to look for a shadow, and it would bring up all of the objects that have that name.
Another really helpful feature you can use if you hit the search button and use this filter here. You can actually filter your layers by their type. So you can filter by boards, groups, masks, components, texts, images, and shapes. And this is a very useful way if you want to be able to say, select all of the text that you have available to you. You can just do that and then only text will show up... all of these are the same. So if I go back to this structure board and say, I want to select all of the texts that are object here, and I filter. And I go to texts. There you can see I have the option to easily select each of the names that I have going on here.
Now, organizing your file and naming your layers is very important. I've already done all of this here because that's how I am, and I'm very organized with my files. Sometimes you'll get a file and it will look something like this. Now, the pages aren't named, so I don't really know... I can tell by kind of looking, okay, well this is, the boards are really far apart as well. And maybe I want to organize it to make it easier for the future me when I come to this. But also if you're collaborating with anyone, it's kind of good practice to share a well organized file with them so that they can easily understand the thinking behind your design and easily find their way around.
So I might want to move these boards, I'm actually gonna could drag the board over here. So these are a bit closer together, and I can see a little better what I'm doing now. What's on this second page? The second page has some sort of just objects that are reused in this design here. So I'm going to call this, these aren't components yet, and components is something we'll get into later, but I'll just call this components because these are component parts that make up the design. And I'm going to name the board that as well.
The canvas color is different on both of these. I'm just going to make that a nice dark color, make it a bit easier on the eyes with the rest of the dark mode that I have the Penpot interface in. And I'm going to do the same for this page. Now, this page, I'm going to call this mockups because this is the mock up that I've got, and I've got two quotes here. So I've got a Melvin Kranzberg quote, and I've got a Kaleidos quote. So I'm going to name the boards after those as well. So I'm going to call this one Kranzberg and I'll call this one Kaleidos.
So I'm getting a little bit more organized now if I look inside of this Kranzberg board. So this is just called board, this layer, and it has a flex layout applied to it. That's kind of okay, but I'm gonna call it quote because it's a board that's showing a quote and I'll be able to copy and paste this for another repeatable quote, which is quite handy. And here you can see I've got a layer that's just for this little speech mark or quote mark, and it's a text layer. And I'm actually gonna label that speech mark to make it easier to find it, because if I'm going to search for that layer, it'll be much easier if I call it something, a good keyword that everyone can understand rather than just having that little quote mark in the text, which is hard to find, hard to work out what character that is. If you want to type it just makes it easier.
Now the text itself is in another board, and this again has a flex layout applied to it. We'll go into those a little later, and so I'm going to call this text, and inside of that I have the actual text and I think that's fine to keep those like that. It's quite easy to read. The board is a lot bigger than the quote, and that's for no particular reason. So I'm just going to tidy that up by making it a little similar in shape.
And we'll do the same for this Kaleidos board then just to move that... a little better. And this is also a quote, I could call it pink quote. It's a pink quote compared to this one, which is more of a gray quote if I wanted. So again, this will be a speech mark and I'm just double clicking the layers to rename those layers. And this is the text. And again, these are just the text items that make it easy to read, and I'm gonna resize that board so that it's a little closer to the shape itself. And we can do the same thing with the components if we wanted. In fact, this is actually, the text is named after the style of the text. And so I don't really have a problem keeping those like that, but I'm gonna rename this one speech mark.
It's basically all about being able to share your intentions for your design and what everything is at a glance. And this is not just good practice if you're working with other people, but even if just for yourself, when you come back to this file in like a week or a month's time and you've forgotten how you are working on it, just makes it much easier to pick up where you left off. And it's just organizing your files like this, that will make them much easier for you and for other people to collaborate with you in the future.
10:46 min
You can read more about file organization in the Penpot User Guide:
The demo files feature the examples from the video on organizing your file. Download the .penpot file and import the file into Penpot to try it out for yourself.
