Penpot Tutorial: Master Flex Layout & Responsive Design

Описание: In this tutorial, you will learn:
✅ How to activate and configure Flex Layout in Penpot.
✅ The difference between "Space Between," "Space Around," and "Center."
✅ How to use "Wrap" to handle content on smaller screens.
✅ Responsive Design: Converting a static design into a fluid mobile app.
✅ Understanding Constraints (Left, Right, Center) for tablets/iPads.
✅ Mastering Z-Index to control layer priority.


Happy New Year! 🎉

It’s been a minute, but we are back with a resolution to be consistent this year. Today, we are diving deep into Penpot to tackle one of the most important skills in UI design: Responsive Layouts.

If you are coming from Figma or XD, you know how crucial Auto Layout is.

In this video, I’ll show you how to use Penpot’s Flex Layout to make your designs scalable, dynamic, and ready for any screen size; from mobile to tablet to desktop.

We will start with the basics using simple shapes, explain how spacing and wrapping work, and then jump into a real-world example fixing a broken Podcast App UI. Plus, stick around for the end where I explain the Z-Index (stacking order).

⏱️ Timestamps:

0:00 - Intro & New Year’s Resolution
1:00 - What is Flex Layout? (Penpot’s Auto Layout)
1:55 - Flex Layout Basics: Working with Circles
3:40 - Controlling Gap and Spacing (28px)
4:30 - Justify Content: Space Between vs. Space Around
7:00 - Understanding "Wrap" functionality
9:15 - Real World Example: Fixing a Podcast App UI
12:15 - Using Constraints for Tablet/Desktop scaling
17:00 - Z-Index Explained (Priority & Stacking)
19:50 - Why use Penpot? (Free & Open Source)
20:30 - Future Videos: AI in Penpot & SaaS Design


💬 Let’s Connect:
www.linkedin.com/in/thedesigneranasahmed
www.instagram.com/anasahmed.design

If you have questions about Penpot or want to request a specific tutorial, drop a comment below!

Don't forget to Like & Subscribe for more UI/UX tutorials!

#Penpot #UIDesign #ResponsiveDesign #FlexLayout #WebDesign #OpenSource #FigmaAlternative #UX #Tutorial