Flex Layout has become a game-changer in the realm of responsive design, and Penpot has answered the call for this highly anticipated feature.
In this tutorial, our wonderful colleagues: @Ester, designer at Penpot, and @Eva_Marco, developer at Penpot, showcase the practical application of Flex Layout through a real case of a flowers app. Whether you’re a designer or developer, they help you understand how Flex Layout empowers both worlds and revolutionizes the way we approach layout based on CSS web standards.
Watch the video tutorial on Flex Layout.
The nature of this new Penpot’s functionality allows seamless, simpler and fastest workflow between designers and developers. Designers can work with much more efficient ways to lay out, align, and distribute space among items in a container. And developers will easily get straightforward specifications that are ready for code to build flexible layouts that adapt to different screen sizes and devices. The workflow between designers and developers is much easier and faster!
In this video, Eva and Ester show you how to create a board and organize all elements within; the fantastic wrap feature that offers many different layout options; the management of the space among elements; absolute position and lastly how Eva translates all of Ester’s designs into code. A hands-on tutorial with lots of practical examples to getting familiar with Penpot’s flex layout.
Ready to dive into the world of Flex Layout?
Explore more about Flex Layout and unlock the true potential of responsive design with Penpot — download the playground template that Runroom has created for us.
Other tutorials
Explore flex layout further with these other tutorials:
