Penpot
Penpot
  • 162
  • 1 851 924
Upgrade to Penpot: the first free open source tool for UI designs, prototypes, and more!
Penpot is the free open-source design tool for Design & Code collaboration.
Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more.
Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect.
Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster.
Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available.
Penpot Community: community.penpot.app
App: design.penpot.app​​
Help: help.penpot.app​
Contribute: github.com/penpot
Penpot Fest: penpotfest.org
Follow us:
*Mastodon: fosstodon.org/@penpot/​
*X: penpotapp ​​
*LinkedIn: www.linkedin.com/company/penpotdesign
*Instagram: penpot.app
*Github: github.com/penpot
Penpot: Design as code.
zhlédnutí: 1 530

Video

Is This The Figma Alternative You've Been Waiting For?
zhlédnutí 14KPřed 2 měsíci
Unlimited design and code in one tool. Sign up for free and experience the freedom at Penpot. Penpot is the free open-source design tool for Design & Code collaboration. Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more. Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Gr...
How to Design Interactive Prototypes with Penpot: A Step-by-Step Guide
zhlédnutí 6KPřed 2 měsíci
As UI and UX designers, we're pretty limited by how much we can convey in static visuals. Interactive prototypes are a handy way to show exactly how our designs should behave. More on prototyping here: penpot.app/blog/creating-interactive-prototypes-with-penpot/ Clicking through an interactive flow is valuable when demonstrating user journeys to stakeholders, handing off designs to developers, ...
Tutorial CSS Grid Layout | Dashboards | Tutorial en español
zhlédnutí 1,1KPřed 2 měsíci
Juan nos explica en este mini tutorial, las nociones básicas de cómo usar CSS Grid Layout para dashboards en combinación con flex layout. Esta funcionalidad es una forma completamente novedosa y única que permite distribuir los elementos dentro de un layout de manera bidimensional y automática . Esta distrubución en grid tiene una implementación directa en CSS, lo que facilita y aligera el trab...
Tutorial CSS Grid Layout | Componentes agnósticos | Tutorial en español
zhlédnutí 449Před 2 měsíci
Juan nos explica en este mini tutorial cómo usar CSS Grid Layout a partir de una plantilla de espaciado de grid para CSS Grid Layout. Esta funcionalidad es una forma completamente novedosa y única que permite distribuir los elementos dentro de un layout de manera bidimensional y automática . Esta distrubución en grid tiene una implementación directa en CSS, lo que facilita y aligera el trabajo ...
Preconceived Ideas when Designing for Open Source
zhlédnutí 509Před 3 měsíci
The snippet you're watching is just a taste of the complete Open Chat With Penpot #3, with the full episode available for viewing right here: czcams.com/video/7l2FTKh2MLQ/video.html We explored how designers can make meaningful contributions to open-source projects with researchers Nimisha Vijay (user experience designer at Nextcloud) and Eriol Fox (open source product manager at Superbloom, as...
Tutorial CSS Grid Layout | Magazines | Tutorial en español
zhlédnutí 710Před 3 měsíci
Juan nos explica en este mini tutorial cómo usar CSS Grid Layout para la maquetación de una revista. Esta funcionalidad es una forma completamente novedosa y única que permite distribuir los elementos dentro de un layout de manera bidimensional y automática . Esta distrubución en grid tiene una implementación directa en CSS, lo que facilita y aligera el trabajo en la fase de desarrollo. Penpot ...
Open Chat with Penpot | Ep.03 | Designing for Open Source by Superbloom
zhlédnutí 24KPřed 3 měsíci
Can designers contribute to Open Source? How? In our latest Open Chat with Penpot episode, we explored how designers can make meaningful contributions to open-source projects with researchers Nimisha Vijay (user experience designer at Nextcloud) and Eriol Fox (open source product manager at Superbloom, as well as a PhD researcher at Newcastle University). Through a two-way interview format, we ...
Tutorial CSS Grid Layout | Tablas y formularios | Tutorial en español
zhlédnutí 685Před 4 měsíci
Juan nos explica en este mini tutorial, las nociones básicas de cómo usar CSS Grid Layout en tablas y formularios. Esta funcionalidad es una forma completamente novedosa y única que permite distribuir los elementos dentro de un layout de manera bidimensional y automática . Esta distrubución en grid tiene una implementación directa en CSS, lo que facilita y aligera el trabajo en la fase de desar...
New Penpot 2.0 release: CSS Grid Layout, Components systems and a super intuitive interface.
zhlédnutí 2KPřed 4 měsíci
New Penpot 2.0 release: CSS Grid Layout, Components systems and a super intuitive interface.
Tutorial CSS Grid Layout | Nociones básicas
zhlédnutí 1,1KPřed 4 měsíci
Tutorial CSS Grid Layout | Nociones básicas
Tutorial CSS Grid Layout | Diferencias entre Grid y Flex layout y algunos ejemplos
zhlédnutí 829Před 4 měsíci
Tutorial CSS Grid Layout | Diferencias entre Grid y Flex layout y algunos ejemplos
CSS Grid vs Flex Layout: When To Use Which
zhlédnutí 53KPřed 4 měsíci
CSS Grid vs Flex Layout: When To Use Which
Penpot 2.0 release is out now! CSS Grid Layout, Components and a new UI
zhlédnutí 32KPřed 4 měsíci
Penpot 2.0 release is out now! CSS Grid Layout, Components and a new UI
Components & Libraries Tutorial (2024)
zhlédnutí 53KPřed 4 měsíci
Components & Libraries Tutorial (2024)
Tutorial nuevos Componentes y Librerías
zhlédnutí 506Před 4 měsíci
Tutorial nuevos Componentes y Librerías
CSS Grid has revolutionized tables and forms forever 🤯
zhlédnutí 48KPřed 4 měsíci
CSS Grid has revolutionized tables and forms forever 🤯
CSS Grid Layout is Magic: Real World Use Cases for Magazines
zhlédnutí 35KPřed 4 měsíci
CSS Grid Layout is Magic: Real World Use Cases for Magazines
#1 CSS Grid Layout Tutorial: The Ultimate Guide (2024)
zhlédnutí 12KPřed 4 měsíci
#1 CSS Grid Layout Tutorial: The Ultimate Guide (2024)
The Ultimate CSS Grid Layout for Dashboards - CSS Grid 2024
zhlédnutí 20KPřed 4 měsíci
The Ultimate CSS Grid Layout for Dashboards - CSS Grid 2024
CSS Grid Layout tutorial | Basics
zhlédnutí 46KPřed 4 měsíci
CSS Grid Layout tutorial | Basics
Penpot 2.0 Sneak Peak - New UI - Toolbar
zhlédnutí 24KPřed 4 měsíci
Penpot 2.0 Sneak Peak - New UI - Toolbar
Penpot 2.0 Sneak Peak - New UI - Dark and Light themes
zhlédnutí 21KPřed 4 měsíci
Penpot 2.0 Sneak Peak - New UI - Dark and Light themes
Penpot 2.0 Sneak Peak - New UI - Dedicated panels
zhlédnutí 28KPřed 4 měsíci
Penpot 2.0 Sneak Peak - New UI - Dedicated panels
Penpot 2.0 Sneak Peak - New UI - Cognitive Load & Accessibility
zhlédnutí 30KPřed 4 měsíci
Penpot 2.0 Sneak Peak - New UI - Cognitive Load & Accessibility
Sneak peek! UI Redesign for Penpot 2.0
zhlédnutí 5KPřed 5 měsíci
Sneak peek! UI Redesign for Penpot 2.0
Components SWAP sneak peek (Penpot 2.0)
zhlédnutí 96KPřed 6 měsíci
Components SWAP sneak peek (Penpot 2.0)
Penpot 2.0 is (almost) here! - FOSDEM'24 talk by Pablo Ruiz-Múzquiz
zhlédnutí 3,6KPřed 6 měsíci
Penpot 2.0 is (almost) here! - FOSDEM'24 talk by Pablo Ruiz-Múzquiz
Components Physical Representation - sneak peek (Penpot 2.0)
zhlédnutí 109KPřed 6 měsíci
Components Physical Representation - sneak peek (Penpot 2.0)
NEW Components Annotations sneak peek (Penpot 2.0)
zhlédnutí 12KPřed 6 měsíci
NEW Components Annotations sneak peek (Penpot 2.0)

Komentáře

  • @DeanWentzel
    @DeanWentzel Před dnem

    Hands-On series is great - thank you

  • @rajuchoudhari2409
    @rajuchoudhari2409 Před dnem

    Thanks Laura for sharing. Awesome:)

  • @rajuchoudhari2409
    @rajuchoudhari2409 Před dnem

    Thanks Laura. Very Useful.

  • @norvisnorvis7592
    @norvisnorvis7592 Před 2 dny

    Penpot is amazing!!!!! As a Designer/Developer, I have finally found a prototyping tool that lets me do both at the same time. Thank You!!!😚

  • @mhkubaid
    @mhkubaid Před 2 dny

    This is crazy! Better than Figma

  • @francescopenasa5916

    Adorabile! Grazie.

  • @PaulMcKillop
    @PaulMcKillop Před 2 dny

    Laura, This Hands-On series is great. The concepts are very well covered and your delivery style is excellent. The pace is just right to follow along. You have a really pleasant, cheerful presence, and it's a joy to watch the videos. From one educator to another, this is really good stuff!

  • @pcost
    @pcost Před 3 dny

    i have been using penpot for a while and i could not recommend it enough *this is the FUTURE and it is already among us*

  • @aamiransari8885
    @aamiransari8885 Před 3 dny

    Nice work

  • @i_am_rec
    @i_am_rec Před 4 dny

    This is a great video. I wonder if you might be able to share which tool(s) you used to produce it (besides PenPot of course)?

  • @Beryesa.
    @Beryesa. Před 5 dny

    Thanks for being patient with the comments section but that's when you have more designers than developers in the target audience... which is a good thing, given it'd make it more successful around the everyday people and eventually the industry :) I'm really looking forward to the document renderer rewrite before anything myself though, components uodate was awesome but it doesn't hold up much value if you basically can't use it on ever so slightly heavy projects, which are the main case the components system solves to begin with 😅

  • @tudorcelstan
    @tudorcelstan Před 8 dny

    Hey, Penpot! 👋 I see you forgot about #solvethelag. Sadly, deleting 5 to 10 comments per video won't solve the problem and won't raise adoption. We love what you're building, but if you don't solve the lag, you're never going to even make a dent in the Prototyping Software market. Please address our concerns. Please be transparent about the software's shortcomings. Please #solvethelag so we can finally completely "Upgrade to Penpot". Cheers!

  • @BobbySmith-cy4iv
    @BobbySmith-cy4iv Před 10 dny

    Excited to find out about finding Penpot. Ready to use something other than Figma.

  • @new.kotlet
    @new.kotlet Před 16 dny

    I cannot import simple svg from Inkscape. Do you know how to fix this?

    • @Penpot
      @Penpot Před 14 dny

      I recommend you to drop an email to support@penpot.app with a screen recording to look into the issue.

  • @user-pe9di3eu6z
    @user-pe9di3eu6z Před 19 dny

    Good ❤

  • @sketchyshubham
    @sketchyshubham Před 19 dny

    Hoping component variants are being worked on 😥

  • @aleksdeveloper698
    @aleksdeveloper698 Před 20 dny

    What's the difference between this app and figma?

  • @sixty-nine
    @sixty-nine Před 25 dny

    Please add plugins aswell, it would help a lot and would be a huge jump

    • @Penpot
      @Penpot Před 24 dny

      Work in progress 🤗 community.penpot.app/t/5-hands-on-use-cases-for-the-upcoming-plugin-system/5659

    • @sixty-nine
      @sixty-nine Před 24 dny

      @@Penpot alright thanks but please make tutorials asap. We need like a full course like of 8 hours of course

    • @Penpot
      @Penpot Před 23 dny

      ​@@sixty-nineIn the meantime, check out our Penpot Hands-On demos to dive right in. www.youtube.com/@Penpot/streams

    • @sixty-nine
      @sixty-nine Před 23 dny

      @@Penpot thanks I'll watch in the meantime but a tutorial is a must for you guys. In that tutorial go over everything and make a website from scratch. Do design and stuff everything on there

  •  Před 25 dny

    We will still have the spaghetti board with complex stuff but really impressed with the prototyping features. Thanks a lot!

  • @sixty-nine
    @sixty-nine Před 26 dny

    I have so many suggestions for you guys. 1. You guys should first create a full fledged tutorial of a few hours in which everything is explained along with a website created. 2. Keep on adding new new features and one day penpot will beat figma in terms of features aswell. 3. Market yourself (i know you all are doing it by uploading new intros etc but probably make like a mockups etc and upload on Instagram aswell. Thats all, prioritise the 1 and 2 number please

    • @Penpot
      @Penpot Před 25 dny

      Thanks for your suggestions!

    • @sixty-nine
      @sixty-nine Před 25 dny

      @@Penpot when will I see these implemented though

    • @Penpot
      @Penpot Před 24 dny

      Hi@@sixty-nine ! We have a public backlog: tree.taiga.io/project/penpot/backlog. There you can find information about what is in progress (the sprints at the right side column) and what's in our plans (the main list, which is partly prioritized). Regarding other marketing actions, there's not a specific date yet. Thanks for your comments!

    • @sixty-nine
      @sixty-nine Před 24 dny

      @@Penpot thank you, I wish the best to you guys

  • @BS-gr3bi
    @BS-gr3bi Před 29 dny

    Agree performance is the most important here, it is so laggy I can not even start redoing project from Figma to Penpot, I tried it with latest version. Can't wait for new improved performance version. I hope Figma won't steal everything from us with their AI until then. I really hope devs understand this, because better performance is needed before any new feature.

    • @Penpot
      @Penpot Před 28 dny

      Our main goal is performance, and we hope to have this perfect very soon!

    • @BS-gr3bi
      @BS-gr3bi Před 28 dny

      @@Penpot Thank you so much, you are the best!

    • @kneel.downnn
      @kneel.downnn Před 5 dny

      ​@@Penpotafter upgrading(pull) to 2.1, seems smoother than before. But devs, I have tried to view cuurent version info from three dots menu but it stills says 2.0 , pls add an info segment/window with rich technical details. Correct me if I'm wrong.and we are waiting for 'animate' & 'local variables' & 'plugin/exteensions) ecosystem' feature function eagerly

  • @Abhimabi
    @Abhimabi Před 29 dny

    Already using penpot since its inception as penpot for personal projects, and tutoring UI design but need a local instalable version though.

    • @Penpot
      @Penpot Před 28 dny

      We can assure you that we have this on our list of features. We hope to offer you this functionality soon (we are already making progress). However, we have other performance priorities first. Thank you!

  • @lydiawere
    @lydiawere Před 29 dny

    Thanks for sharing 👍

  • @tekrocker
    @tekrocker Před 29 dny

    Where is the link to the Penpot file? Also, is there a link to the associated location in the Penpot Community to ask question re: this tutorial?

    • @Penpot
      @Penpot Před 29 dny

      Hi! The file is called "Hands-on example" and you can find it in Laura's comment here: community.penpot.app/t/penpot-hands-on-live-demo-prototyping/6009

  • @brightokoro7073
    @brightokoro7073 Před měsícem

    nice work thanks for sharing

  • @SitWithAnkit
    @SitWithAnkit Před měsícem

    It would be great to have an open-source web design tool that is as user-friendly as this one.

    • @Klusio19
      @Klusio19 Před 4 dny

      Bruh what. Penpot is literally it XD

  • @MaxPanic
    @MaxPanic Před měsícem

    Please listen to all the concerns. Penpot is amazing, but performance is an issue. Make it a priority to address. We also need tutorials. Though the community will likely can take care of that. ❤

    • @Penpot
      @Penpot Před 28 dny

      f there's one thing we do, it's listen to our community. Rest assured that we are very aware of the performance, and the whole team is working on it to ensure it won't be a problem for anyone.

  • @LHeathMcDonald
    @LHeathMcDonald Před měsícem

    Sadly I can't start using penpot until it supports component states and variants. Current solution is too cumbersome and not intuitive. Am I missing something? If so please help. I've watched several tutorials on the new components in 2.0 and so far I have not found a way to do this. All I want for now is the ability for hover and active states for my buttons. This should be a basic feature for any UX/UI tool. I would really like to switch from Figma, but until this feature is added I can't.

  • @danielmunoz2316
    @danielmunoz2316 Před měsícem

    Nice video but you must address the performance 😫!

    • @Penpot
      @Penpot Před 28 dny

      Yes, we are keeping an eye on it and have the whole team working on it. You will surely notice the change in a few weeks.

    • @danielmunoz2316
      @danielmunoz2316 Před 28 dny

      @@Penpot Thank you so much. Nice work so far, team!

  • @clarkmakes
    @clarkmakes Před měsícem

    Boom.

  • @rlBrave
    @rlBrave Před měsícem

    And still without backdrop blur 💀 How should anyone make modern designs without that. Github issue inactive since one year.

    • @Penpot
      @Penpot Před 28 dny

      We have had other features and bug fixes prioritized, but rest assured we will address it as soon as we can. We also hope that someone from the community could help with this while our team gets back to this matter. Thanks!

  • @simonpetrus3089
    @simonpetrus3089 Před měsícem

    So excited 🔥🔥🔥

  • @ImDean_07
    @ImDean_07 Před měsícem

    And they say the greatest marketing compain between competitors are Coke and pepsi😂😂😂❤️. Loved it.

    • @Penpot
      @Penpot Před 28 dny

      hahaha, thank you

  • @iBen-jz5xz
    @iBen-jz5xz Před měsícem

    Easy, but seems tedious! Dear lord help me keep up 🙏

  • @user-vk3tw3cu8n
    @user-vk3tw3cu8n Před měsícem

    i want to see the elements go to another column/row if i scale the board...

  • @user-vk3tw3cu8n
    @user-vk3tw3cu8n Před měsícem

    What about scaling from desktop to Mobile? That is not working in my opinion?

  • @zzyao9446
    @zzyao9446 Před měsícem

    great

  • @CarlosEduardo-qb4qw
    @CarlosEduardo-qb4qw Před měsícem

    We need a desktop app :/ And the ability to prototype some scrolls animation, these things are "holding" me from using Penpot 24/7. Great video btw

    • @Penpot
      @Penpot Před měsícem

      Right now we're looking for a developer to improve the desktop app! We hope we can give you good news soon!

  • @yasershahian3134
    @yasershahian3134 Před měsícem

    Keep creating content please

  • @yasershahian3134
    @yasershahian3134 Před měsícem

    Awesome tool

  • @eashuvalov
    @eashuvalov Před měsícem

    Hi! Thanks for the Penpot! I use Penpot as a presentation editor and I lack the flexibility to create pie charts in it. And it would be even better to have a plugin that creates simple diagrams (as in illustrator), so as not to draw them manually.

  • @devilmix85
    @devilmix85 Před měsícem

    Great job guys.. Love the app. You have my full support. 🔥

  • @BGdev305
    @BGdev305 Před měsícem

    You would have to know the old UI to see anything great about the new UI... so show the difference(s)!

    • @Penpot
      @Penpot Před měsícem

      Definitely, that would show it clearly. Thanks!

  • @yevgenypopov1221
    @yevgenypopov1221 Před měsícem

    Thanks for the great product. It's always exciting to see new players coming to the scene! Go Penpot!🙂

    • @Penpot
      @Penpot Před měsícem

      Thank you! Penpot = team + community commitment

  • @user-cl7tb5xp9d
    @user-cl7tb5xp9d Před měsícem

    لهعهانذ

  • @EricsWormPlayground
    @EricsWormPlayground Před měsícem

    What is the best way to learn how to create environments like the one you were working in with this video?

    • @Penpot
      @Penpot Před měsícem

      Try our templates. There's a new one called Basic layouts template that can help you learn Grid Layout. penpot.app/libraries-templates

  • @McCloud23892
    @McCloud23892 Před měsícem

    Do you guys have a desktop app for Macos or Windows?

    • @Penpot
      @Penpot Před měsícem

      Right now we're looking for a developer to improve the desktop app! We hope we can give you good news soon!

  • @ItsD3vil
    @ItsD3vil Před měsícem

    Hello Penpot team, please add the ability to change fonts variable it's literally the only thing that had me stop using Penpot and get back to figma

    • @Penpot
      @Penpot Před měsícem

      It's on its way 🙂 : community.penpot.app/t/faq-what-is-in-penpot-s-roadmap-for-2023/61

    • @ItsD3vil
      @ItsD3vil Před měsícem

      ​@@Penpot Great!

  • @masoom-theproudvegan7212
    @masoom-theproudvegan7212 Před měsícem

    penpot is most good looking design tool i have ever seen

    • @Penpot
      @Penpot Před měsícem

      🙌Thanks!

    • @masoom-theproudvegan7212
      @masoom-theproudvegan7212 Před měsícem

      @@Penpot i would contribute to penpot when i have good enough laptop to run it locally

  • @TheR00M
    @TheR00M Před měsícem

    why use ''group'' and not a component? thanks!

    • @Penpot
      @Penpot Před měsícem

      Hi! You can use either a component or a group. These designs are standalone examples so there wasn’t much need to use components. Thank you!