![Penpot](/img/default-banner.jpg)
- 162
- 1 851 924
Penpot
Spain
Registrace 16. 06. 2020
Penpot is the Free Open-Source Design Tool for Design & Code Collaboration.
Penpot allows true collaboration between designers and developers thanks to features like CSS Grid, Flex Layout and the Code Inspect tab. Create stunning designs, interactive prototypes, design systems at scale, while devs enjoy ready-to-use code and make their workflow easy and fast.
It’s the only one that can be web-based or self-hosted. The tool works with open web standards (SVG, CSS and HTML) giving you ownership of your files.
- Penpot Community -
community.penpot.app
Design: penpot.app
Help: help.penpot.app
Contribute: github.com/penpot
* X: penpotapp
* Github: github.com/penpot
* Mastodon: fosstodon.org/@penpot/
* LinkedIn: www.linkedin.com/company/penpotdesign
* Instagram: penpot.app
Penpot: Design as code.
Penpot allows true collaboration between designers and developers thanks to features like CSS Grid, Flex Layout and the Code Inspect tab. Create stunning designs, interactive prototypes, design systems at scale, while devs enjoy ready-to-use code and make their workflow easy and fast.
It’s the only one that can be web-based or self-hosted. The tool works with open web standards (SVG, CSS and HTML) giving you ownership of your files.
- Penpot Community -
community.penpot.app
Design: penpot.app
Help: help.penpot.app
Contribute: github.com/penpot
* X: penpotapp
* Github: github.com/penpot
* Mastodon: fosstodon.org/@penpot/
* LinkedIn: www.linkedin.com/company/penpotdesign
* Instagram: penpot.app
Penpot: Design as code.
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.
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
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)
Hands-On series is great - thank you
Thanks Laura for sharing. Awesome:)
Thanks Laura. Very Useful.
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!!!😚
This is crazy! Better than Figma
Adorabile! Grazie.
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!
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*
Nice work
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)?
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 😅
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!
Excited to find out about finding Penpot. Ready to use something other than Figma.
I cannot import simple svg from Inkscape. Do you know how to fix this?
I recommend you to drop an email to support@penpot.app with a screen recording to look into the issue.
Good ❤
Hoping component variants are being worked on 😥
What's the difference between this app and figma?
Please add plugins aswell, it would help a lot and would be a huge jump
Work in progress 🤗 community.penpot.app/t/5-hands-on-use-cases-for-the-upcoming-plugin-system/5659
@@Penpot alright thanks but please make tutorials asap. We need like a full course like of 8 hours of course
@@sixty-nineIn the meantime, check out our Penpot Hands-On demos to dive right in. www.youtube.com/@Penpot/streams
@@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
We will still have the spaghetti board with complex stuff but really impressed with the prototyping features. Thanks a lot!
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
Thanks for your suggestions!
@@Penpot when will I see these implemented though
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!
@@Penpot thank you, I wish the best to you guys
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.
Our main goal is performance, and we hope to have this perfect very soon!
@@Penpot Thank you so much, you are the best!
@@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
Already using penpot since its inception as penpot for personal projects, and tutoring UI design but need a local instalable version though.
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!
Thanks for sharing 👍
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?
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
nice work thanks for sharing
It would be great to have an open-source web design tool that is as user-friendly as this one.
Bruh what. Penpot is literally it XD
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. ❤
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.
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.
Nice video but you must address the performance 😫!
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.
@@Penpot Thank you so much. Nice work so far, team!
Boom.
And still without backdrop blur 💀 How should anyone make modern designs without that. Github issue inactive since one year.
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!
So excited 🔥🔥🔥
And they say the greatest marketing compain between competitors are Coke and pepsi😂😂😂❤️. Loved it.
hahaha, thank you
Easy, but seems tedious! Dear lord help me keep up 🙏
i want to see the elements go to another column/row if i scale the board...
What about scaling from desktop to Mobile? That is not working in my opinion?
great
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
Right now we're looking for a developer to improve the desktop app! We hope we can give you good news soon!
Keep creating content please
Yes!!!
Awesome tool
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.
Great job guys.. Love the app. You have my full support. 🔥
Thank you!
You would have to know the old UI to see anything great about the new UI... so show the difference(s)!
Definitely, that would show it clearly. Thanks!
Thanks for the great product. It's always exciting to see new players coming to the scene! Go Penpot!🙂
Thank you! Penpot = team + community commitment
لهعهانذ
What is the best way to learn how to create environments like the one you were working in with this video?
Try our templates. There's a new one called Basic layouts template that can help you learn Grid Layout. penpot.app/libraries-templates
Do you guys have a desktop app for Macos or Windows?
Right now we're looking for a developer to improve the desktop app! We hope we can give you good news soon!
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
It's on its way 🙂 : community.penpot.app/t/faq-what-is-in-penpot-s-roadmap-for-2023/61
@@Penpot Great!
penpot is most good looking design tool i have ever seen
🙌Thanks!
@@Penpot i would contribute to penpot when i have good enough laptop to run it locally
why use ''group'' and not a component? thanks!
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!