Want to learn more about prototyping with Penpot?
Laura Kalbag, our Design and Developer educator, will show how to make interactive prototypes with Penpot in a brand new live session called Penpot Hands-on.
Date: Wednesday, July 31st
Time: 4 - 5 PM (CEST) | 7- 8 AM (PDT) | 10 AM (ET) | 7:30 - 8:30 PM (IST)
Watch it on YouTube or LinkedIn
Got questions about Penpot prototyping? Share them in the comments below or ask live on Wednesday, July 31st.
The hands-on series features practical Penpot demos exploring real-life designer and developer use cases. Each webinar will focus on one topic area, with Laura demoing the best Penpot features for topical tasks and answering your questions live.
Extra: Laura has introduced some of the most common interactions for Penpot prototypes in a video tutorial and an article. She has also included a Penpot template for you to follow. Feel free to explore it!
Ps. If you click the ‘Notify Me’ bell icon on our YouTube page, you won’t miss out
5 Likes
Thank you everyone who joined the live session! If you missed it, you can catch up with the video in the previous post.
Here’s the file I used during the demo… Hands-on example.penpot (6.5 MB)… ugly scrolling example included 
If you have any more questions or ideas/requests for future hands-on sessions, please let me know!
4 Likes
Hello, my name is José Moreira, Good evening. I’m currently on a specialist technology course in multimedia product development, where one of the modules is related to Penpot. I’ve seen some of your articles where you discuss animating certain features, so I think you’re the right person to help me. I’m having trouble animating the tick marks on a list of items, and I also don’t know how to make the little ball at the bottom move. I’d be happy to pay up to €60. How can I animate these two features? I’ve attached an image so you can help me, as one of the trainers has set me this challenge of animating features like these. I’d appreciate your feedback as soon as possible.
Hi José,
Yes, plain prototyping covers most of it. Example file attached.
Ticks: make a small tick board for each checkbox. On each row: Click → Toggle overlay (its tick board, Manual position over the box, Dissolve). On each tick board: Click → Close overlay with no destination, so a second click removes it.
Slider: make one board per price that covers the whole slider (label, track, knob), and put click zones over the track. A zone opens the board of its price as an overlay. Inside an overlay, a zone opens the next price at x 0, y 0 and closes its own board.
Limits: no dragging, and the knob fades to its new place instead of sliding.
Tip: I built the example in minutes with an AI assistant that works through Penpot’s MCP server. You describe the panel and it creates the boards and all the interactions for you: Penpot MCP server
Good luck with the course!
FILE: Catálogo – prototype.penpot (93.9 KB)
