# Wireframing: New Penpot Hands-on Demo!

**URL:** <https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230>\
**Category:** Events and Announcements\
**Tags:** design\
**Created:** [August 8, 2024, 10:43am UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230 "2024-08-08T10:43:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\
**Post date:** [August 8, 2024, 10:43am UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/1 "2024-08-08T10:43:30Z")

</div>

Looking to level up your wireframing skills in Penpot?

Join the new **Penpot Hands-on Demo on Aug. 27th!**

[![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/5/52faa26a78358db4b5615f30e7fa644f97857c93.jpeg "Penpot Hands-on - Wireframing") ](https://www.youtube.com/watch?v=BVJaiwaN5aA)

Laura Kalbag, Design and Developer educator at Penpot, will demonstrate **how to create wireframes for web and app designs** super easily with Penpot templates, and answer your questions about wireframing.

- **Date** : Tuesday, August 27th 2024

- **Time** : 4 - 5 PM (CEST) 7- 8 AM (PDT) 10 AM (ET) 7:30 - 8:30 PM (IST)

- **Save the date** and watch it on [YouTube](https://email.penpot.app/e/c/eyJlIjoxNTk2NjIsImVtYWlsX2lkIjoiZXhhbXBsZSIsImhyZWYiOiJodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PUJWSmFpd2FONWFBXHUwMDI2dXRtX2NhbXBhaWduPUhhbmRzLW9uKyUyMzIlM0ErV2lyZWZyYW1lc1x1MDAyNnV0bV9jb250ZW50PUhhbmRzLW9uKyUyMzIlM0ErV2lyZWZyYW1pbmdcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJ0IjoxNzIyOTM4NTUwfQ/c02be11a9ce16d2fa7d5f077ca66ae9c4e5836a748663c1f6540f3f91b70044e) or [LinkedIn](https://email.penpot.app/e/c/eyJlIjoxNTk2NjIsImVtYWlsX2lkIjoiZXhhbXBsZSIsImhyZWYiOiJodHRwczovL3d3dy5saW5rZWRpbi5jb20vZXZlbnRzLzcyMjQ3MjIwNzQyOTA4MjMxNjgvY29tbWVudHMvP3V0bV9jYW1wYWlnbj1IYW5kcy1vbislMjMyJTNBK1dpcmVmcmFtZXNcdTAwMjZ1dG1fY29udGVudD1IYW5kcy1vbislMjMyJTNBK1dpcmVmcmFtaW5nXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwidCI6MTcyMjkzODU1MH0/f9c6467234e2ffbad4dfe23e5bd7197253d3bac62bb865c9cb56fe5eff25fbb4).

She’ll cover what a wireframe is, how to use libraries and templates, and how to create quick wireframes with components. She’ll also explain how to build clickable wireframe prototypes and more.

**Do you already have a question about wireframing at Penpot?** Leave it here, in the comments section below, or ask it live on Tuesday, August 27th.

Get started quickly with wireframes using [Laura’s guide](https://email.penpot.app/e/c/eyJlIjoxNTk2NjIsImVtYWlsX2lkIjoiZXhhbXBsZSIsImhyZWYiOiJodHRwczovL3BlbnBvdC5hcHAvYmxvZy90dXRvcmlhbC1jcmVhdGluZy13aXJlZnJhbWVzLXdpdGgtcGVucG90Lz91dG1fY2FtcGFpZ249SGFuZHMtb24rJTIzMiUzQStXaXJlZnJhbWVzXHUwMDI2dXRtX2NvbnRlbnQ9SGFuZHMtb24rJTIzMiUzQStXaXJlZnJhbWluZ1x1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsInQiOjE3MjI5Mzg1NTB9/53abef3458432a2062c3358c3702b024ea867eb3202c26f8328c2936aa463f2c) on designing, presenting, and sharing with Penpot and our Wireframing Kit library.

🌟 This episode is part of an exciting brand-new series of live demos that will help you get the grips of Penpot! In our first live session, Laura walked us through all the key points for getting [started with Penpot prototypes.](https://email.penpot.app/e/c/eyJlIjoxNTk2NjIsImVtYWlsX2lkIjoiZXhhbXBsZSIsImhyZWYiOiJodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PUR6MVJMM3RQQXlJXHUwMDI2dXRtX2NhbXBhaWduPUhhbmRzLW9uKyUyMzIlM0ErV2lyZWZyYW1lc1x1MDAyNnV0bV9jb250ZW50PUhhbmRzLW9uKyUyMzIlM0ErV2lyZWZyYW1pbmdcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJ0IjoxNzIyOTM4NTUwfQ/1d53432dbfb374746a1385e046c66c73911e424f59cfe5e202cfd20f49131619)

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [August 27, 2024, 3:12pm UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/2 "2024-08-27T15:12:40Z")

</div>

Thank you everyone who joined us for the live stream!

If you want to check out the file I worked on during the demo, you can download it here:  
[Hands-on Wireframing Example.penpot](https://community.penpot.app/uploads/short-url/aQRRgoPzfYfIPVSswZFphcY5Ixj.penpot) (6.8 MB)

You can find the Minimalist Wireframing Kit on the [Libraries and Templates page](https://penpot.app/libraries-templates) or [download the kit’s file directly from this link](https://github.com/penpot/penpot-files/raw/main/minimalist-wireframing-kit.penpot).

---

<div class="post-metadata">

**Author:** ![godoicami](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/godoicami/32/4678_2.png) [@godoicami](https://community.penpot.app/u/godoicami)\
**Post date:** [October 8, 2024, 1:27am UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/3 "2024-10-08T01:27:01Z")

</div>

Very useful tutorial for starters. Thank you, Laura!

I’d apreciate if you go foward to a “Level 2” (or 3?) on using Flex or Grid layout when designing a full website page which demands different components and aligments on sections and/or columns. I’ve tried a while ago and it was a complete disaster 😅

A webpage like this would fit as a great example:

> **[Penpot Blog](https://penpot.app/blog/)**
>
> Join the conversation on Design and Code collaboration and Open Source.

May we have a hands-on file of it to check the settings?

---

<div class="post-metadata">

**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\
**Post date:** [October 8, 2024, 5:07am UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/4 "2024-10-08T05:07:27Z")

</div>

Hi @godoicami!

Last week Laura showed how Grid and Flex layout work and shared this file that you may find useful: [Introduction to CSS Grid & Flex Layout: Hands-on Demo! - #10 by LauraKalbag](https://community.penpot.app/t/introduction-to-css-grid-flex-layout-hands-on-demo/6588/10)

We’ll probably launch a more advance (level 2 or 3) Grid & Flex layotus Hands On Demo in the future. : )

In the meantime, here are some additional resources you can take a look at:

- Creating responsive CSS Grid Layouts in Penpot [[Tutorial](https://penpot.app/blog/tutorial-how-to-create-responsive-css-grid-layouts-in-penpot/)]
- How to create CSS Flex Layouts in Penpot [[Tutorial](https://penpot.app/blog/tutorial-css-flex-layouts-in-penpot/)]
- Learning Center guides [[Guide and templates](https://penpot.app/learning-center#flexible_layouts)]

Thanks!

---

<div class="post-metadata">

**Author:** ![godoicami](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/godoicami/32/4678_2.png) [@godoicami](https://community.penpot.app/u/godoicami)\
**Post date:** [October 8, 2024, 2:23pm UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/5 "2024-10-08T14:23:59Z")

</div>

Lol. A just realized that I sent a comment to the wrong forum. I had jus watched the “Introduction to Flex and CSS Grid Layouts | Penpot Hands-On Demo” and it was a respond to it.

I’ll be happy to watch a tutorial for a more advanced use =)

Thanks y’all!

---

<div class="post-metadata">

**Author:** ![Elena\_Alcalde\_Rueda](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/elena_alcalde_rueda/32/115_2.png) [@Elena\_Alcalde\_Rueda](https://community.penpot.app/u/Elena_Alcalde_Rueda)\
**Post date:** [October 9, 2024, 5:37am UTC](https://community.penpot.app/t/wireframing-new-penpot-hands-on-demo/6230/6 "2024-10-09T05:37:49Z")

</div>

Hi! I figured that’s what happened, no worries about you posting here. 🙂 The upcoming hands-on demos are [Color palettes and libraries](https://www.youtube.com/watch?v=rd6Uexp3uHs), on Oct 30th, and an introduction to the Design system by the end of November. The advanced layouts session isn’t planned yet, but stay tuned!
