The interface

The Penpot interface has three main areas: the Dashboard, the Workspace and the View mode. Lets take a look at their composition and main features.

Dashboard

The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.

Dashboard

1) Teams 2) Search files 3) Projects 4) Drafts 5) Shared Libraries 6) Custom fonts 7) Pinned projects 8) User area 9) Comments notification 10) Create project 11) File card

  1. Teams: A team allows you to collaborate with other penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.
  2. Search: If you are looking for a specific file just type its title at the search box.
  3. Projects: A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.
  4. Drafts: The drafts section is where you can find the design files that are not inside any project.
  5. Shared Libraries: In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets.
  6. Custom fonts: If you have purchased or personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.
  7. Pinned projects: If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them show at the sidebar.
  8. User area: This must be you! Change your profile, password or change the language from the settings. You can also find here a way to leave us feedback. We’d love to read your thoughts :)
  9. Comments notifications: Here you will be able to see if you have unread comments inside the files of the team.
  10. Create project: Create as many projects as you need to organize your designs.
  11. File card: Basic information about a file at plain sight. How it looks like, last update or if it’s added as a Shared Library. You can rename or delete a file. A lot of more options coming soon.

Workspace

The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside boards that will help you to create pages and exportation units.

Workspace

1) Main menu 2) Users 3) File status 4) History panel 5) Zoom 6) View mode 7) Layers panel 8) Assets panel 9) Toolbar 10) Typography palette 11) Color palette 12) Rules 13) Design properties 14) Prototype mode 15) Viewport

  1. Main menu: At the file main menu you are able to tweak your workspace configuration. Manage visibility for grids, rules, panels. Enable or disable snapping, dynamic alignment. Add or remove the file as Shared Library. There’s also a link to the feedback options.
  2. Users: You can see how many users are working in the file at the same time.
  3. File status: Information about the file saving state. Know if last changes are saved or if there is a problem.
  4. History panel: The history panel keeps track of the latest changes on an opened file. You can do undo/redo to walk the changes and expand each one of them to get detailed information. More about history
  5. Zoom: Zoom options and shortcuts information.
  6. View mode: The view mode button launches a presentation with the boards. See more about what you can do at the view mode.
  7. Layers panel: The layers panel allows you to see and manage the layers and pages of a file. A file can have as many pages as you need. Each page has its own viewport (the almost infinite area where you actually create your designs) with its own layers. You can create, delete or reorder your pages at your needs. More about layers
  8. Assets panel: Each file has a default library (File Library) where that allows to store elements and styles that are likely to be reused. That includes components, graphics, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.
  9. Toolbar: The toolbar is the place where you will find the tools to quick and easily create the different types of objects: Board, rectangle, ellipse, text, graphic, path, free drawing and comments. More about objects
  10. Color palette: The color palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. More about the color palette.
  11. Typography palette: The Typography palette allows you to always have the typographie styles at plain sight. Use the menu to easily switch between libraries.
  12. Rules: Sometimes you need coordinates to design. You can also drag guides from the rules.
  13. Design properties: At the Design properties sidebar you can find and edit the properties of a selected shape. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...). More about styling
  14. Prototype mode: Penpot allows you to prototype interactions connecting boards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another board. You’ll be able to see the interactive prototype in action in the view mode (access by clicking the play button at the top right). More about prototyping
  15. Viewport: An infinite canvas to design without limits.

View mode

Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have a handoff mode where you can get objects specifications and code snippets. More about the View mode

View mode

1) Pages selector 2) Boards selector 3) Boards counter 4) Play mode 5) Comments mode 6) Handoff 7) Interactions settings 8) Zoom options 9) Full screen 10) Share prototype options 11) Edit file 12) Reset prototype 13) Navigation button

  1. Pages selector: Navigate through the pages of a file. If is a shareable link this can be configured.
  2. Boards selector: Frames selector displays a list of the boards with thumbnails that provide a graphic overview of the file.
  3. Boards counter: Boards count and current position.
  4. Play mode: Default presentation mode where you can also play with interactions.
  5. Comments mode: Comments mode shows comments inside Boards and allows users to reply or add new ones.
  6. Handoff: At the Handoff you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup. More about Handoff
  7. Interactions settings: Select whether to highlight interactions active areas on click, all the time or not at all. More about interaction settings
  8. Zoom: Zoom options and info about their shortcuts.
  9. Fullscreen mode: Activate or deactivate browser fullscreen mode.
  10. Share link: Create shareable links of the view mode to send it so developers, other designers or stakeholders can view the designs and access the code specifications regardless being at your team or even logged at Penpot.
  11. Edit file: Opens file edition at the design workspace.
  12. Reset prototype: Goes to the first board of the prototype.
  13. Navigation button: Forward and backwards buttons.