Today, I invite you to discover with me a design tool that some of you may already know: Penpot.
If the name doesn’t mean anything to you, don’t worry, I’m going to start from the beginning and show you why it has become a must-have for many designers and developers.
The tool presents itself as a free and open-source solution that you can self-host, but which is also accessible online via your browser. Designed to help create designs for apps, websites, and more, it proves to be an extremely intuitive tool. With just a few clicks, you place your design elements, buttons, images, and other components, then let Penpot generate the prototype rendering and even the CSS code for you. Yes, directly from CSS code to integrate into your web projects without necessarily needing to master all the CSS parameters.
One of the big recent updates to Penpot is its support for “flex layout”. For those unfamiliar with the term, flex layout (or flexbox) is a CSS standard that allows elements to automatically adapt to the size of the screen or window. Imagine a button whose text changes: instead of overflowing, with flexbox, the button enlarges. Penpot allows you to create responsive designs that adapt to all screen sizes.
Obviously, to help you discover all this in detail, I have put together a very detailed tutorial video for Flex Layout, so that you can fully understand how it works and then use it in your own website or mobile application projects. I hope that pleases you!
