UI design with Penpot | Penpot Hands-On Demo

We’re excited to announce a new hands-on demo where we'll show a full start-to-finish UI design using Penpot. Laura Kalbag, educator, developer, and designer at Penpot, will design a complete layout from scratch in just one hour. She’ll walk through design techniques and approaches that the community has been asking about, including importing vector graphics, creating and nesting components, and using CSS Flex and Grid layouts.
New to Penpot? Start for free today! 👉 design.penpot....
00:25 - Intro
01:36 - Example UI design we’re going to create
2:23 - Identifying and creating typographies
8:35 - Picking and saving colours
12:28 - Creating the background and layout for the top navigation
15:30 - Using icons from a shared library
19:27 - Creating the layout for the left sidebar
25:24 - Identifying and creating components
32:42 - Layout for multiple components using Flex
34:28 - Negative margins
35:24 - Z index
48:48 - Adding a background image
50:30 - Grid Layout
52:55 - Adding named grid areas
59:45 - Next Hands on
----
Penpot is the first open-source design and prototyping tool for Product teams.
Penpot allows a true collaboration between designers and developers 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: community.penp...
App: design.penpot.app​​
Help: help.penpot.app​
Learning Center: penpot.app/lea...
Contribute: github.com/penpot
Penpot Fest: penpotfest.org
Follow us:
*Mastodon: fosstodon.org/...
*X: / penpotapp ​​
*LinkedIn: / penpotdesign
*Instagram: / penpot.app
*Github: github.com/penpot
Penpot: Design as code.

[@micemincer]

white background and black text looks already so much better than the original design.

[@aaronschneider1581]

This is great. Thanks for the tutorial(s)!

[@angelmesa9530]

🤩🤩!! , Is possible show us one day make UI too but with 'Gnome components' library made by
Michael Kronenberg. ? Please

[@francescopenasa5916]

For the "Recent Scenes" and "Active Devices" texts, could it be a good approach to use an absolute positioning for them (with a Z index)? Because using a negative margin makes it more difficult to align the div (board) that contains the elements later. Or is it just my wrong idea?