More about Penpot 2.0 release?
Dev Diaries
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2F64bd12740229bfd826ceec7af314616e.png&q=75)
Penpot 2.0: Design and Code Collaboration on another level.
Penpot brings unique and brand new features: CSS Grid Layout, advanced Components and much more to scale your product designs!
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2Ffe5273fd7da0078e49c0db3409071a86.png&q=75)
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2Ff24c7ef581c1f1db0ebd97262fcb1186.jpg&q=75)
What's new?
CSS Grid Layout
Use columns and rows to distribute elements in a responsive way. Make your developer's work easier and faster. A step further in interface layout!
Download and learn CSS Grid Layout
New Components System
A most powerful systematic way to reuse elements across your projects. Design at scale - work faster and maintain consistency.
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2F76f4fccc06ae78b3b710830a32366da2.jpg&q=75)
Redesigned UI
Penpot's new UI offers a smoother, more intuitive and agile navigation. Improved accessibility best practices.
Discover our beautiful UI
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2F59a5ff35121e73bca91ed3e5e0dad7a9.jpg&q=75)
HTML Markup Code
Get HTML in the inspect tab. Images are treated as element fills so their aspect ratio remains consistent when resized—ideal for flexible designs!
What's coming up next?
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2Ffe5273fd7da0078e49c0db3409071a86.png&q=75)
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2Ff24c7ef581c1f1db0ebd97262fcb1186.jpg&q=75)
![](https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2F64bd12740229bfd826ceec7af314616e.png&q=75)