logo

Prototyping | Penpot Hands-On Demo

time1 yr agoview95 views

Are you new to Penpot and want to learn more about prototyping? Or are you an existing user with a question about prototyping with Penpot?

In this debut episode of Penpot's Hands-On Laura Kalbag, Design and Developer Educator, show us how to create interactive prototypes with Penpot: navigation, overlays, animation, flows, and more.

Feel free to drop your questions in the comments below or our Community space: https://community.penpot.app/

Check out these useful links to help you design prototypes with Penpot:

  • The User Guide: https://help.penpot.app/user-guide/prototyping/
  • Video tutorial "How to Design Interactive Prototypes with Penpot: A Step-by-Step Guide" https://www.youtube.com/watch?v=le3SEv2ctkk
  • Templates for prototyping: https://penpot.app/libraries-templates
  • Laura Kalbag's article on how to create interactive prototypes with Penpot: https://penpot.app/blog/creating-interactive-prototypes-with-penpot/

Chapters: 00:00 Penpot Hands-on Demo intro 02:14 Prepare your designs for prototyping 12:58 Prototypoing overlays 20:25 Animating protypes 27:44 Creating prototypes flows 33:58 Sharing prototypes 37:29 Q&A Time

--

Penpot is the first open-source design and prototyping tool for Product teams.

Penpot allows a true collaboration between designers and developers thanks to features like Flex Layout and Code Inspect. It’s the only one that can be web based or self-hosted. The tool works with open web standards (SVG) avoiding vendor lock-in and giving teams absolute freedom in their designs.

You can use it for your mockups, webs, apps and any other type of UX & UI Design

Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org

Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *X: / penpotapp ​​ *LinkedIn: / penpotdesign
*Instagram: / penpot.app
*Github: https://github.com/penpot

Penpot: Design as code.

Loading comments...