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)
You asked for it, you got it! More info on https://penpot.app/layout Today we bring you our first Flex-layout tutorial Our first take on flexible and adaptable layouts brings the standard CSS Flex power to designers. You now get both productivity boost (anyone said "wrap"?) and an unprecedented integration between design and code! Penpot is the first open-source design and prototyping tool for Product teams. Penpot allows full collaboration between designers and developers for real 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: Design Freedom For Teams. ---- 0:00 Intro 0:45 Buttons 03:09 Lists 05:07 Settings 05:18 Flex Boards 05:52 Direction 06:22 Align & Justify 07:43 Gap 08:26 padding 09:14 Wrap 10:35 Align and margin 11:47 Sizing 13:08 Screens 15:58 Code