You asked for it, you got it! More info on https://penpot.app/layout

Today we bring you our first Flexlayout 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 opensource 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 selfhosted. The tool works with open web standards (SVG) avoiding vendor lockin 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'>https://github.com/penpot

Follow us:
* Twitter:   / penpotapp   ​​
* Instagram:   / penpot.app  
* Github: https://github.com/penpot'>https://github.com/penpot
* Mastodon: https://fosstodon.org/@penpot/​
* LinkedIn:   / 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