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) Pinned projects 7) User area 8) Comments notification 9) Create project 1) 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. 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.
  7. 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 :)
  8. Comments notifications: Here you will be able to see if you have unread comments inside the files of the team.
  9. Create project: Create as many projects as you need to organize your designs.
  10. 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 artboards that will help you to create pages and exportation units.

Workspace

1) Main menu 2) Users 3) File status 4) Zoom 5) View mode 6) Toolbar 7) Layers panel 8) Assets panel 9) History panel 1) Palettes panel 1) Prototype mode 1) Object properties

  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 sapping, 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. Zoom: Zoom options and shortcuts information.
  5. View mode: The view mode button launches a presentation with the artboards. See more about what you can do at the view mode.
  6. Toolbar: The toolbar is the place where you will find the tools to quick and easily create the different types of objects: Artboard, rectangle, ellipse, text, graphic, path, free drawing and comments. More about objects
  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. 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
  10. Palettes panel: The colors palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. More about palettes
  11. Prototype mode: Penpot allows you to prototype interactions connecting artboards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another artboard. 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
  12. Object properties: At the Design panel 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

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 code mode where you can get objects specifications and code snippets. More about the View mode

View mode

1) Frames view toggle 2) Frames counter 3) Play mode 4) Comments mode 5) Code mode 6) Interactions settings 7) Share link 8) Edit file (back to workspace) 9) Zoom 9) Fullscreen mode

  1. Artboards toggle: Opening the frames view displays a list of the artboards with thumbnails that provide a graphic overview of the file.
  2. Artboards counter: Artboards count and current position.
  3. Play mode: Default presentation mode where you can also play with interactions.
  4. Comments mode: Comments mode shows comments inside artboards and allows users to reply or add new ones.
  5. Code mode: At code mode 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 Code mode
  6. Interactions settings: Select whether to highlight interactions active areas on click, all the time or not at all. More about interaction settings
  7. Share link: Create a shareable link 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.
  8. Edit file: Go back to the workspace.
  9. Zoom: Zoom options and shortcuts information.
  10. Fullscreen mode: Activate or deactivate browser fullscreen mode.