No video

PenPot Tutorial - The Open Source UI/UX Design App

bit.ly/3QY080g 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- 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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 105

  • @DesignCourse
    @DesignCourse Жыл бұрын

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

  • @ahammadalipk

    @ahammadalipk

    Жыл бұрын

    I don’t think it is a good news for sure. No matter what they are saying or what promise they gives, at the end of the it is a proprietary and they will screw up things when they want

  • @GraveRave

    @GraveRave

    Жыл бұрын

    I honestly don't know. But have you tried Lunacy it's similar to Penpot.

  • @codernerd7076

    @codernerd7076

    Жыл бұрын

    Please install our Adobe spyware that takes a ton of your system resources to keep using Figma... please upgrade to pro version to use this feature

  • @febryandartansyah

    @febryandartansyah

    Жыл бұрын

    I don't think is good. Well u know like Macromedia in the past, and etc.

  • @GoldenVulpes

    @GoldenVulpes

    Жыл бұрын

    I think everyone is being a bit dramatic about the whole thing haha. So many startups goals are to be bought out so I think this is great for the creator. I think Adobe is going to retire Xd and use some features from xd in figma

  • @WeirdSnakeGal
    @WeirdSnakeGal Жыл бұрын

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

  • @osaroadade
    @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.

  • @DesignCourse

    @DesignCourse

    Жыл бұрын

    yep, I caught myself after watching the video making that mistake. ;)

  • @Garcia1rojo

    @Garcia1rojo

    Жыл бұрын

    @@DesignCourse kzread.info/dash/bejne/eXqV2smCe6eflLA.html You should take a look at this tool for figma, it exports responsive web pages

  • @sto2779

    @sto2779

    Жыл бұрын

    You do realize open source = 100% free? I have never seen any paid open source software other than dev support or epic features never required by the average open source user. Gotta thank the Dev for making the UI similar to Figma. This means the courses on Figma can be related to Penpot.

  • @MairinDuffy

    @MairinDuffy

    Жыл бұрын

    it is free, free as in freedom not as in beer.

  • @alexandredaubricourt5741

    @alexandredaubricourt5741

    Жыл бұрын

    You can have proprietary/licensed open source code.. Open source just means that the source code is.. yep, open.

  • @tamgaming9861
    @tamgaming9861 Жыл бұрын

    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*

  • @tamis5908
    @tamis5908 Жыл бұрын

    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!!!!

  • @NazzarenoGiannelliCG

    @NazzarenoGiannelliCG

    Жыл бұрын

    Does Lunacy jave the same features as Figma or is it more like Illustrator? I didn't know about it, but looking at the official website it looks cool!

  • @tamis5908

    @tamis5908

    Жыл бұрын

    @@NazzarenoGiannelliCG I haven't 'used Figma OR Luncy much - I'm a former web design instructor, so am used to going straight to coding in html with placeholder boxes and such. But to me, both Figma and Lunacy are like the portions of Illustrator a web designer uses. Illustrator does more, but how much of that "more" does the average web designer need? Not much. I think the interfaces of Lunacy and Figma are almost identical. Nice thing about Lunacy is you can work either on or offline...I typically work offline as I don't have the need to collaborate much. But I'm seriously impressed w/Lunacy. BTW, I've used Illustrator and Photoshop for a long time - absolutely HATED the interface, and found Illustrator layering and effects applied totally non-intuitive - I love the power of Lunacy with the simplicity of the intuitive interface. I think if you have a project you're prototyping, you can probably learn a huge amount of how to work with Lunacy over the course of a weekend. Find a couple of tutorials in the vicinity of an hour or so that show in real time how to do a mock up, then have a go at doing your own project mockup. I've found the best (and almost only) Lunacy tutorials are on their own youtube channel - icons8.com. Here's one that'll take about 45 min. from them. Have fun exploring it! ;-) kzread.info/dash/bejne/mGGBztR8ob3LeLQ.html BTW, here's a link to their own playlist of 62 vids on Lunacy: kzread.info/head/PL7NuoYuwcraA_VP2hY22d-C3DGi1qHM5Y

  • @adada1st

    @adada1st

    Жыл бұрын

    @@tamis5908 Thank you for the Input! 🙂

  • @mamimaral9503
    @mamimaral9503 Жыл бұрын

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

  • @tonyvito5062

    @tonyvito5062

    Жыл бұрын

    it is indeed in the future it will destroy Figma I've been workin with Penpot lately and I'm really satisfied as Gary mentioned the only issue rn in PenPot is the plugins and micro interactions and they are workin on it

  • @NazzarenoGiannelliCG

    @NazzarenoGiannelliCG

    Жыл бұрын

    @@tonyvito5062 are variants and overflow behaviours present in Penpot like in Figma? Because I wasn't able to find corresponding features during the days I tested Penpot.

  • @AashayAgrawal

    @AashayAgrawal

    Жыл бұрын

    @@tonyvito5062 I think it will improve overtime as it is open source and people gonna to contribute more and more to make it better.

  • @Trashpanda_404

    @Trashpanda_404

    3 ай бұрын

    Yeah another $15 a month subscription is getting harder to swallow when you wanna work on just your stuff for your business, and you’re not a designer.

  • @yoman9446
    @yoman9446 Жыл бұрын

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

  • @tsoueid

    @tsoueid

    Жыл бұрын

    And then Adobe buys it

  • @scept3r.studios

    @scept3r.studios

    Жыл бұрын

    @@tsoueid ugh, what a horrible nightmare

  • @AmineGdoura

    @AmineGdoura

    Жыл бұрын

    @@tsoueid It's open source, which means anyone can copy the code and take it home. So don't worry

  • @BS-gr3bi
    @BS-gr3bi Жыл бұрын

    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 :)

  • @eklerrr

    @eklerrr

    Жыл бұрын

    Opensource is showing.again and again its power I am so excited that people are opening eyes on things on software development Lets hope people with pay with downloads and donations to their favourite opensource projects more and more

  • @katscandance

    @katscandance

    Жыл бұрын

    Budget went to giving free ice cream away

  • @randoguy7488

    @randoguy7488

    Жыл бұрын

    If you want more in-depth prototypes then use Axure. I find it a bit silly shooting down Figma based on one single feature. Speaking of features, Penpot doesn't have AutoLayout nor live collaboration, things that are much more useful and needed for UI/UX software.

  • @darkbluebossa
    @darkbluebossa Жыл бұрын

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

  • @StarcoreLabs
    @StarcoreLabs Жыл бұрын

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

  • @crogersmedia
    @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.

  • @DaveCollison
    @DaveCollison Жыл бұрын

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

  • @_Spacecraft
    @_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.

  • @KaiBuskirk
    @KaiBuskirk Жыл бұрын

    Great Hair! #SupportOpenSource!

  • @crogersmedia
    @crogersmedia Жыл бұрын

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

  • @TsukimiAsep
    @TsukimiAsepАй бұрын

    3:50 why mine there's no toolbar :(?? please help.

  • @creativedaz
    @creativedaz Жыл бұрын

    Awe, the hidden gem got revealed. 🥰

  • @drbjr8223
    @drbjr8223 Жыл бұрын

    They get auto layout and a few other things working it would be awesome!

  • @sto2779
    @sto2779 Жыл бұрын

    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

  • @mrashbryant
    @mrashbryant6 ай бұрын

    I've just opened PenPot for the first time and while it seems very evolved in its features, some are lacking or make little sense. The BIG one for me is component state. Creating 'simple' hover effects seems really hard/odd with overlays and gets messy really quick (I could be missing something and please say if I am). The other is components like this video describes at 14:30 updating the text styles do not update other states. The way 'around' this I think is to create a typography asset style and apply that style to the buttons text. Then changing that updates the other components that use that style. Like I say I maybe doing it wrong and I hope that I am and that someone can point me at the write way to do these things, as right now it is stopping me making the switch from Figma (which I have only just jumped to from Adobe XD).

  • @TheVioArtsofficial
    @TheVioArtsofficial7 ай бұрын

    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 !

  • @viniciuschinen1689
    @viniciuschinen1689 Жыл бұрын

    I knew you going to make a video about penpot since adobe bought figma.

  • @k1ll3rkoala
    @k1ll3rkoala Жыл бұрын

    As a broke Ass, I've been using penpot for like 2 years. I love it. But I've also never paid for the bigger named packages. So I don't know what I'm missing.

  • @roshan4ever
    @roshan4ever Жыл бұрын

    Not polished but will do. Apart from PenPot, one another option is "Lunacy", which has both web-app as well as a desktop app.

  • @bang-bangtv6091
    @bang-bangtv6091 Жыл бұрын

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

  • @maximumcockage6503
    @maximumcockage6503 Жыл бұрын

    Hey Gary I had an idea for a video that I haven't seen any prominent design/coding KZread channels do yet. Instead of just teaching people things that would land them a job or how to make projects from scratch, teach them to enhance their internet browsing experience and use javascript/css for personal use by teaching people how to use userscripts from Tampermonkey/Greasemonkey or stylesheets from Stylish or make their own extensions. There's tons of sites out there that I've personally done this on and am sure other people would like to learn how to enhance their browsing pleasures. Like make themselves a dark mode for Udemy. Or make arrow key binds for a book or manga reading site. Or add a loop button to KZread mobile. Or just customize a site they enjoy using and show off your design skills. Or even just remove annoying elements from a website that is otherwise fun to use. Or how to grab elements that generate random letters and characters in them with Attribute selectors to customize a CSS page that the elements change on reload (Udemy/Instagram/Facebook) There's plenty of things out there where designers made poor decisions that users might want to enhance upon. It would be helpful to people learning this as a hobby and not as a job.

  • @clout8270
    @clout8270 Жыл бұрын

    With Adobe acquiring Figma I might actually be forced to take this into consideration lmao

  • @digwillhachi
    @digwillhachi Жыл бұрын

    Have a look at Lunacy next please.

  • @Irfandeva
    @Irfandeva Жыл бұрын

    Please, take a look at lunacy.

  • @crogersmedia
    @crogersmedia Жыл бұрын

    Pro tip #1: If you want smooth zooming, you can hold middle mouse button and ctrl, and move the mouse up and down for a much better zoom experience.

  • @pranjal8425

    @pranjal8425

    7 ай бұрын

    hf, that was amazin, I just tried it.

  • @SaifBrahim
    @SaifBrahim Жыл бұрын

    I think Launcay is a better alternative to figma, Adobe xd and sketch. And more stable available on mac, Windows and Linux

  • @0x007A

    @0x007A

    Жыл бұрын

    Lunacy is NOT open source and based on the comments from the founder of the project there is no intention to open source it. So Lunacy is just another Figma and the development team has visions of acquisition dancing in their heads. Trading one proprietary application for another is a fool's errand.

  • @asfet_aura
    @asfet_aura Жыл бұрын

    How to create another board that is sub board ?? I'm so confused

  • @ianthehunter3532
    @ianthehunter3532 Жыл бұрын

    Thanks!

  • @rezwansaki
    @rezwansaki Жыл бұрын

    wow. nice app. thanks for this

  • @morriskuria6595
    @morriskuria6595 Жыл бұрын

    They will definitely improve on it but generally a good app

  • @patlecat
    @patlecat Жыл бұрын

    What about #Lunacy? Might be good too.

  • @DerLuukee
    @DerLuukee Жыл бұрын

    I wonder which app the PenPot creators use(d) to prototype PenPot 😁

  • @badcatdesign

    @badcatdesign

    Жыл бұрын

    LOL - And which did Figma use? Every app builds upon the experiences of the ones that came before, no?

  • @alexandredaubricourt5741

    @alexandredaubricourt5741

    Жыл бұрын

    Lookup at the UI I'd say none

  • @Thebald_ibm
    @Thebald_ibm Жыл бұрын

    Which other software do you think is good for prototyping?

  • @katscandance

    @katscandance

    Жыл бұрын

    Potpie

  • @CuriousBehruz
    @CuriousBehruz Жыл бұрын

    Adobe bought Figma, and we use PenPot.

  • @NangilJunior
    @NangilJunior Жыл бұрын

    Autolayout is the new resource from this software.

  • @BlubNuge
    @BlubNuge Жыл бұрын

    Is it possible to Design a portfolio in Figma, Adobe xd, etc. and connect it to a domain or are those simply Design tools that you would have to then translate into HTML, CSS, and Javascript in order to create an actual website?

  • @DesignCourse

    @DesignCourse

    Жыл бұрын

    Yes, they're just design tools. However, there are some Figma plug-ins (and XD I believe), that convert the designs to html/css with a few clicks. Do they produce the best results? No. But if you need something quick and easy, sure..

  • @zzzyyyxxx

    @zzzyyyxxx

    Жыл бұрын

    Use Framer if you want to design and build sites, it's specifically made for that purpose

  • @jm-fm4ok
    @jm-fm4ok Жыл бұрын

    I like v much this app

  • @taylorjackson3691
    @taylorjackson3691 Жыл бұрын

    This looks promising...To be honest, I don't like using Figma even before the buyout.

  • @Mike-qu6fp
    @Mike-qu6fp Жыл бұрын

    Do a video roasting TheVerge redesign plz.

  • @AlianeAbdelouahab
    @AlianeAbdelouahab Жыл бұрын

    Open source community have always hated when some tool is bought some big brands, so check this comment after a year, you will have PenPot will already have matured in a rocket speed, because community always like freedom !

  • @yoman9446
    @yoman9446 Жыл бұрын

    now we're talking 😎

  • @jcmediauganda
    @jcmediauganda Жыл бұрын

    version, standard is more than sufficient

  • @andeederek9338
    @andeederek9338 Жыл бұрын

    I'm gonna be a contrarian and ask what's wrong with adobe buying Figma if figma is still free? isn't adobe XD also free?

  • @DesignCourse

    @DesignCourse

    Жыл бұрын

    XD is not free anymore. I believe Adobe will only keep Figma free for students and educators in the future. Also, XD will be shut down in time. I'm 99% certain of this.

  • @LuminousWhispers11

    @LuminousWhispers11

    Жыл бұрын

    I mean. If I was a businessman and I acquired one of the my main competitors on the market. I would either merge it with a product, use it for ideas, or replace my existing product with it while integrating my own business model.

  • @andeederek9338

    @andeederek9338

    Жыл бұрын

    @@DesignCourse Oh, now I hate adobe. Now I see why

  • @adada1st

    @adada1st

    Жыл бұрын

    @@LuminousWhispers11 And that's exactly what Adobe did with Macromedia.

  • @LuminousWhispers11

    @LuminousWhispers11

    Жыл бұрын

    @@adada1st Yeah, and they love their pricing.

  • @s1nistr433
    @s1nistr433 Жыл бұрын

    The best open source alternative to Figma is a notebook and pencil

  • @snakepliskin2432
    @snakepliskin2432 Жыл бұрын

    If the tools you work with are free eventually you'll be working for free

  • @Phobo55
    @Phobo55 Жыл бұрын

    adobe 👎

  • @DesignCourse

    @DesignCourse

    Жыл бұрын

    I'm not gonna lie, I'm still an Adobe fanboi. I use too many of their products to crap on them. ;)

  • @Phobo55

    @Phobo55

    Жыл бұрын

    @@DesignCourse they have great products, but they're just too greedy, they're probably gonna destroy Figma chances are they won't like community plugins (because they are free).

  • @tonyvito5062
    @tonyvito5062 Жыл бұрын

    PenPot gonna destroy Figma for sure , Adobe gonna cry day and night 🤣🤣🤣🤣

  • @fiveshorts
    @fiveshorts Жыл бұрын

    Pen pot. Waste of time.