Learn how to use Penpot with step-by-step tutorials created by the Penpot team. Explore core features, workflows, and best practices for designing and collaborating in open-source.
Curated by: Penpot (95 videos)
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: https://penpot.app/blog/creating-interactive-prototypes-with-penpot/ 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: https://penpot.app/libraries-templates Read a step-by-step tutorial for creating interactive prototypes with Penpot on our blog: https://penpot.app/blog/creating-interactive-prototypes-with-penpot/ 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: 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: https://twitter.com/penpotapp *LinkedIn: https://www.linkedin.com/company/penpotdesign *Instagram: https://www.instagram.com/penpot.app/ *Github: https://github.com/penpot Penpot: Design as code.