How to Design Interactive Prototypes with Penpot: A Step-by-Step Guide

As UI and UX designers, we're pretty limited by how much we can convey in static visuals. Interactive prototypes are a handy way to show exactly how our designs should behave. More on prototyping here: penpot.app/blo...
Clicking through an interactive flow is valuable when demonstrating user journeys to stakeholders, handing off designs to developers, or even doing early-stage user testing.
In this tutorial, Laura introduces some of the most common interactions to use with prototypes using Penpot. Penpot is brilliant for prototyping because you can work with your existing designs, whether they're quick wireframes or high-fidelity mockups, and you don't need to be able to code to create life-like interactions.
Find the Prototype examples template in our Libraries & Templates collection: penpot.app/lib...
Read a step-by-step tutorial for creating interactive prototypes with Penpot on our blog: penpot.app/blo...
Chapters:
00:00 Intro on how to design interactive prototypes in Penpot
00:13:04 Prototype navigating between views
03:17:22 Prototype hover and active styles
05:59:01 Prototype state changes
07:43:05 Prototype overlays
09:37:00 Wrap up
---------------------------------------------------------------------------------------------------------------------------------------------------------------
Penpot is the free open-source design tool for Design & Code collaboration.
Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more.
Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect.
Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster.
Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available.
Penpot Community: community.penp...
App: design.penpot.app​​
Help: help.penpot.app​
Contribute: github.com/penpot
Penpot Fest: penpotfest.org
Follow us:
*Mastodon: fosstodon.org/...
*X: / penpotapp ​​
*LinkedIn: / penpotdesign
*Instagram: / penpot.app
*Github: github.com/penpot
Penpot: Design as code.

[@AnandaKrishnan3de]

My wife is a ui designer and she uses figma at work. I happen to sit with her sometimes and I'm impressed by the prototype and seeing the results. (We both know abt penpot already (but not using). Anyway I wanted to try it so I will be using penpot. So thanks for this video.

[@Penpot]

Thanks for your words! We hope you can join Penpot soon :)

[@maxziebell4013]

Great tutorial! Thanks, Laura... and yes, please make more of these. Greetings to you and Aral.

[@samuelrios6180]

Awesome! Would like more tutorials like these.

[@Penpot]

Yes! There will be more 😊

[@Dominik-sd3xw]

Thanks for the insights. I think I will make the switch from XD to Penpot soon.

[@NYProductions]

Now we have overlays. Cool!

[@DalaiFelinto]

Loved the tutorial

[@SitWithAnkit]

It would be great to have an open-source web design tool that is as user-friendly as this one.

[@Klusio19]

Bruh what. Penpot is literally it XD

[@salmanasdesign9751]

Thanks for the tutorial. I'm quite new to penpot.
But what about scrolling? It's the most basic interaction, but I don't get it work.

[@rafales1525]

This soft looks very prommising 😊 Any possible way to use penpod offline?

[@yasershahian3134]

Keep creating content please

[@Penpot]

Yes!!!

[@McCloud23892]

Do you guys have a desktop app for Macos or Windows?

[@Penpot]

Right now we're looking for a developer to improve the desktop app! We hope we can give you good news soon!

[@TheR00M]

why use ''group'' and not a component? thanks!

[@Penpot]

Hi! You can use either a component or a group. These designs are standalone examples so there wasn’t much need to use components. Thank you!

[@jonahilemona9823]

This is awesome

[@HeresAsvg]

Are there any plans to add smart animations? 🤔👀

[@iBen-jz5xz]

Easy, but seems tedious! Dear lord help me keep up 🙏

[@TerenceKearns]

the constant zooming and panning is too distracting.

[@Penpot]

Thanks for your feedback. We'll take it into account for next video.