Penpot Tutorials

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)


Currently Playing: Flex Layout Tutorial | Design & Code with Penpot's unique layout feature

Flex Layout is one of Penpot’s most requested features and a total turning point in responsive design. In this video, Ester Latorre and Eva Marco explain with a real case the application of Flex Layout for both design and coding using Penpot. Explore more about Flex Layout! https://penpot.dev/layout For designers, it allows a more efficient way to lay out, align, and distribute space among items in the container. For developers, it enables them to easily get specifications to build flexible layouts that automatically adapt to different screen sizes and devices. -- 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 Design: https://penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Follow us: * Twitter: https://twitter.com/penpotapp ​​ * Instagram: https://www.instagram.com/penpot.app/ * Github: https://github.com/penpot * Mastodon: https://fosstodon.org/@penpot/​ * LinkedIn: https://www.linkedin.com/company/penpotdesign Penpot: Bring Design Freedom For Product Teams. Intro 0:00 Design the layout board: 1:45 Wrap: 4:38 Space management: 5:34 Absolute position: 10:28 Code time! 12:13 Seamless translation of Design into Code: 16:23 Download and try our Flex Layout template: 16:39


Tracks in this Playlist