PenPot Tutorial - The Open Source UI/UX Design App

-- Today, I'm going to introduce you all to an open source UI/UX design and prototyping app called PenPot. It's 100% browser based, and it's 100% free. They've been around for a little while, but recently came on everyone's radar with the news of Adobe purchasing Figma. Does this mean that you have to switch? Not at all, but I figured I would introduce this app. At the time of uploading this video, it does lack several key features (auto-layout, component states, plugins, etc..), but the team is working hard to integrate said features.

0:00 - Introduction
1:59 - Learn UI/UX Today
2:45 - UI Overview
5:02 - Starting the Design
11:52 - Creating a Navigation
16:08 - Creating a Headline
16:40 - Card Design
24:28 - Call to Actions
28:11 - Secondary Page
29:34 - Prototyping
30:41 - Final Project
31:46 - Conclusion

Let's get started!

#penpot #uiux #figmalternative

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

What are your thoughts on the Adobe / Figma acquisition? I think no matter what happens, we'll all be a-ok. ;)

[tamgaming]

14:36 is possible to change components, but you have to use the main-folder of the component, not the first item of the component group "Home", then you can change everything. Very simple.
14:50 is the same. Because the components are in a group folder, you get into the main group by double clicking, and if you click again you get into the single item. Dont know were the problem. Near all SW works in the same way, even Figma.
16:03 you can clearly see on the left side, you copied the complete component folder. Means you made 5x component folder with only 1 single item inside. Sorry, but i think more and more it was the first time you ever worked with this software, otherwise i cant explain this mistakes.
26:36 you have to use constraints. Its the same you use in web development. So you fix the text on the button and can so say how the text should stay to the button. Same if you want to have the button on the place when you make the webpage mobile ready. Then you have to use the constraints.
27:22 You should make a Asset of the Button, so you can use it later again, and it looks the same, instead of deleting it what i saw.
Gary, i am normal a huge fan of your channel, but this time you have to go back to school 🙂*joking*

[WeirdSnakeGal]

Thankfully there will always be awesome people developing new software that we can use instead of Adobe.

[tamis]

Lunacy has been my go to since I am a freelancer - if I need to collaborate, Penpot will be my choice!. I ditched Adobe 4 yrs ago for Affinity Designer, Affinity Publisher, & Affinity Photo - best choice I ever made!!!!

[luciusrex]

thank you so much for covering this! i dont have funds for figma so this was a huuuuge thing for me. thank you!! ❤️❤️ keep it up!!

[osaroadade]

I would like to make a clarification here Gary, open source doesn't automatically mean free. This one might be, but open source means that the code is not proprietary, but instead is open to the public and oftentimes built by the public.

[BS-grbi]

One thing that PenPot have and Figma don't which is for me essential for prototyping is ability to make multiple actions for same trigger. For example you want something to be triggered when you click on button, but also you want something else to be triggered on same click. The most common thing we need for prototyping and 20 billion dollar software don't have it but open source PenPot does :)

[_Spacecraft]

26:40 you can set the vertical alignment of the text inside it's container, then it'll stay centered as it's container and parent container change size.

[darkbluebossa]

You are fast, Gary! I only heard about Penpot the day Adobe bought Figma and am very curious to try

[crogersmedia]

Pro tip #3:
To get the text to vertically align inside your button, stretch the height of the text box to match the button rectangle (exactly like you did to make it center horizontally), and set the text alignment to middle (icons next to the text center buttons). This will now be aligned properly in the vertical direction in the middle of your button when you resize.

[StarcoreLabs]

Thank you for a great intro to PenPot. You rock!

[yoman]

Figma is being developed since 2012. PenPot only since 2018. So, give PenPot 6 more years and imagine where they would be!

[mamimaral]

I think I will close my eyes, take a deep breath, and pretend like PenPot is the new Figma...

[DaveCollison]

You can get fine-grain zoom control by holding Space, then holding CTRL or CMD, and click-dragging your mouse up and down

[dekker_]

Great tutorial / review. Helped me get started. Thanks!

[crogersmedia]

Pro tip #2:
You can create gradients in Inkscape with as many stops as you like, then import them into Penpot as SVGs.

[sto]

7:51 - You add another gradient by clicking on the fill additional parameter on the right. Thanks for this great course. Hope there are more of it. 27:17 - lmao

[TheVioArtsofficial]

it seems a bit more "easy to start". At the other hand it could be to easy in the long run, sure all the grids, and autolayout stuff in figma isnt easy the first time, but in the end you have clearly structured webdesigns with some constraints and dependencies which are working perfectly together. Im not sure about, but yeah still nice tool and impressive for the short time of 5 years :)

Edit: I visited the website of penpot, you can host it by yourself... thats INSANE !

[bang-bangtv]

26:36 align vertical middle next to the text alignement options

[raughboy]

PenPot is just what i need. I will use it to make new ui for veyon. Veyon has some things i don't really need and lack things i need so what i had in mind will be based on veyon but use something different. Besides you can also selfhost PenPot so it's not web app exclusive.