Best way to create slides/presentations with Penpot?

Hi! I’ve watched @diacritica use Penpot for his slides/presentations a couple of times already and I’d like to do the same :slight_smile:

After failing to find some quickstart documentation, I did a very quick test and added 2 boards to the same page, and now in the View mode I can navigate between them using arrows. Progress!

However, I found a couple of annoyances:

  • The board I created second appears first. I suspect the reason for it is that the View mode sorts the boards from top to bottom as they appear in the Layers panel, and creating a new Board places it on top. But I’m not sure if this understanding is correct. What’s the best way to go about it? (And I hope it’s not "create the slides backwards…!)
  • The good news is that “pasting” an empty board places it at the bottom of the panel, so I think I sort of solved the previous problem. However, if I repeatedly Cmd+V, it nests the boards one inside the other, which is probably not what I want. The workflow that seems to work is Cmd+V, click on an empty area of the Workspace, then repeat. Is there a better way?

Happy to learn tips and tricks from the Penpot community :pray:

1 Like

Hello Juan! It is great to have you here.

The default order that is shown on the presentation mode is the order of layers. You can just drag and drop it to change the order:

image

Another thing that can help you create a presentation is to use our Penpot slides template.
image

2 Likes

This template is gold. Thanks a lot @carolina.portugal ! :raised_hands:

1 Like

After creating the slides, is there a way to “publish” them somehow? Either by sharing a public link to a read-only version of the project, or exporting all the frames to a PDF of sorts (it’s fine if the answer is “no”, I guess I can take the SVG and manipulate it locally)

Hello @astrojuanlu, both option are possible. To share your presentation, you can go to the view mode:
image

After you can “Share prototype link”

sharing

For more details on the view more you can check here: 12· View mode

To export as a PDF, you can select on the left to corner the 3 dots:
image

You will have the option to select which boards you want to export:

2 Likes

Brilliant :heart:

I have to say, this was the first time I had to use Penpot for something serious and I absolutely loved it. I found a couple of small bugs in the UI, but honestly I stress-tested the system so much. You’re doing something amazing folks.

Looking forward to giving 2.0 a go!

2 Likes

For presentations I definitely prefer the “share prototype link”. Protip here @astrojuanlu If you want to use animated gifs (memes or other stuff) Chrome suffers from some bugs that prevent them to actually loop. Make sure to use Mozilla Firefox while presenting those! I have a link where I can track whether the browser supports “animated gifs within an SVG” here https://codepen.io/bsonntag/pen/vYGJZwo?editors=1000 If it works, then Penpot can also show animated gifs for those presentations. I use them a lot to showcase new features on Penpot

4 Likes

Thanks for the extra tips! On Firefox I found Penpot to be a bit laggy, it was working fine on Safari (admittedly I made the slides too big in pixel size).

I installed Chromium especially for using Penpot, as I also noticed the performances were better than in Firefox (which is my every day browser).

It’s also good practice to avoid installing any useless browser plugins and limit the amount of tabs you have opened.

I also noticed sometimes if the browser’s been opened for a long time (or for a day), hitting F5 to refresh the canvas helps (and it takes a few seconds).