Penpot 2.0 unveiled! 👉 CSS Grid Layout and Components on their way

While we’re on the road to Penpot 2.0 we’re all hyped about what’s on the horizon.

In this demo, @diacritica takes us on a tour of the mind-blowing feature CSS Grid Layout!

If you’re not familiar with grid layout in CSS and you wonder why this new super awesome feature could be, just imagine designing in a grid that a developer can translate into code right away without variations in your design. That’d be cool, right! Then you should be as excited as we are about Grid Layout.

Watch it on Youtube or Peertube.

Pablo’s going to show you how easily you can copy CSS or HTML code from Penpot inspect code tab, and just like magic… boom! Penpot generates a pixel-perfect coding out instantly.

But wait, there’s more! This video also gives you a hint of yet another awesome feature coming up on this new release: a complete full revamp of Components that will allow you to work so much better on your design systems.

With this set of improvements, the whole Penpot experience will be so much enjoyable and will make you feel right at home.

Stay tuned for this big release and tell the others—the more, the merrier!

14 Likes

Watched and shared this one. Very impressive. Grid is amazing, I wish some more details and demos about the revised / upgraded components would be presented. Its kinda hard to make out how they work and what is possible. UI looks waaay better, congrats for that too.

I will be using Penpot way more in 2024. My primary interest is in integrating it in design education process. We use figma now, and its not very comforting to have all the student work archived in a proprietary format. So we are looking into a selfhosted instance, perhaps, hopefully for the next academic year.

PS where are you with implementing tokens/css variables?

3 Likes

Hi @thisbit ! Our plans is to share much more on the new components v2 on the week of Jan 8th.
As for tokens/css variables, I’ve asked our friends at Tokens Studio to prepare something for January and show how they’re building native support for that in Penpot!

I love your use case, btw, “design education” is something very dear to us (some of the team are design teachers too) and we want to make sure everyone is able to get professional design skills with an open source/open standards design & prototype tool so they really own their craft and work.
Looking forward to a fantastic 2024!

2 Likes

Yes I beleive including OSS in education is productive for adoption too, as these are future professionals.

Totally agree @thisbit ! Bringing OSS and OSS design into education will get students from all sorts of backgrounds (not just tech) involved, building diverse communities and creating awesome tools. It’s on our radar for the near future.

Totally, I do not teach in the tech context at all. I teach at Art Academy, Design majors (BA, MA), specifically in “interactive media design” which is app, and web design most of the time. We use figma for some 5-7 years now, and I would love to own the access to student design.

There are arguments to kep with figma, since it is an “industry standard” so jobs ask for it. However there are many arguments for Penpot as well, such as not tying students for a closed system, having on premise tooling etc.

I am thinking of a way to incoroprate penpot to education. Waiting for components to land, to see if I can start soon.

3 Likes

… what is the new deadline? :slight_smile:

Hahahaha! Next week. Actually, the tutorial is already recorded but I’ll be recording some cool content on Monday so I’d say next Tuesday.

4 Likes

… counting backwards :slight_smile: in anticipation

Hey Penpot… now’s your time! We need a real alternative to figma after this news… https://archive.is/2024.01.30-211456/https://www.bloomberg.com/news/articles/2024-01-30/adobe-gives-up-on-xd-after-figma-deal-collapse

IMO, though, you NEED an import feature for XD file migration. Figma doesn’t have that (at least not without a paid addon). If you make that happen, it’ll put penpot in a very unique position.

3 Likes

The revised Components look solid :muscle:
I am eager to give Penpot another try as soon as 2.0 is launched!

3 Likes

There is BIGGEST issue with the fonts. It is impossible to share or import design file madden with custom fonts. Nor PenPot displays you an error about missing font, nor it recognizes it even if it is preinstalled.
This is the biggest set back which doesn’t allow to use it in between teams and other designers. I would recommend to concentrate on such hot fixes, as all of CSS futures do not have any sense, if developer will see default Arial, when it should be Roboto font :slight_smile:

Thanks for pointing this out, @RytisG . We identified it and it’s already on our radar. We included in this user story: Taiga

1 Like

Been watching the substantial progress in Taiga.io - very excited about how enabling this upcoming release will be.

2 Likes

Hey @HeyTC then you’ll happy to learn about our early access environment!

Loved the cyclist metaphor!

2 Likes

More than happy. The performance improvement is significant. The UI enrichments are very sharp and precise. It’s going to be such a pleasure to work with this. Looking forward to spending more time exploring the new features.

1 Like

Has the app been improved for image rendering? The issue with slowdown when multiple hi tes images are imported. This makes the app highly unusable for me, hence my hesitation using penpot for anything significant.