# Penpot 2.0, a major milestone in our journey, is now yours to explore and enjoy! **URL:** \ **Category:** Events and Announcements\ **Tags:** release, ceo\ **Created:** [April 9, 2024, 9:47am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906 "2024-04-09T09:47:52Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![diacritica](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/diacritica/32/5604_2.png) [@diacritica](https://community.penpot.app/u/diacritica)\ **Post date:** [April 9, 2024, 9:47am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/1 "2024-04-09T09:47:52Z")
As it’s often the case with major releases, they feel both like the end of a journey and the beginning of a new one. _Short clip showing all_ Let me first cover why [Penpot 2.0](https://penpot.app/penpot-2.0) is such an impactful release. Once again, we delivered on our promise to bring developers and designers closer together. **Our bold movement to build CSS Grid Layout** and enable designers to create responsive interfaces matching coding constructs was unexpected. The design tool space has changed forever. **Component Libraries have been revamped** with a new data structure to help designers and large teams build extensive design systems more modularly. The addition of component swapping as well as more flexible categorisation options provide a significant boost in productivity. We rebuilt the entire **Penpot’s UI to be sleeker, faster and more beautiful**. This will be obvious to everyone that used Penpot in the past but equally mesmerising to newcomers. Streamlining user experience means allowing for more time spent creating and collaborating at scale, which sits at the core of Penpot’s mission. ![screenshot-interaction](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/f/fd253723f560cacf66fde53bcc0977e47979431b.jpeg) _Penpot 2.0 showing an interactive prototype_ Each of these features, on its own, would have deserved a major release and yet we have another three major updates. - You can now use images as a fill property. - We added HTML generation on top of CSS and SVG. - UI theming is now a reality, starting with Light & Dark. ![workspace-light-dark](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7782534368cb5554af51ddfac92d5c2edb5ff362.png) _Dark or Light themes, we love both!_ If you want to know all the details of what comes packed with 2.0, including performance improvements and 40+ changes not covered here, head to our [Dev Diaries](https://penpot.app/dev-diaries) page. It took the team 9 months to build and ship this amazing release. We didn’t want to cut corners, we wanted to be proud of our work so you could team up and collaborate around design and code projects with no limitations or compromises. We are building our own path where concepts such as [declarative design](https://www.c11n.quest/does-declarative-design-foster-superior-collaboration-with-developers/), future-proof ownership of your work and a no-handoff mindset meet long-standing pragmatic design and coding practices. Our SaaS service at [design.penpot.app](https://design.penpot.app) was the first to roll-out 2.0 a couple of days ago and [self-host images](https://penpot.app/self-host) will follow very soon. We will always make sure that, no matter your choice, Penpot delivers the same experience. ![screenshot-code](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/f/f33808986c3a8f46b57c5f685543adbd1cf88803.jpeg) _Design-as-code is a reality with Penpot_ # What’s next? Delivering Penpot 2.0 required the product team to act almost as a sole entity so interdependencies between new features would not create bottlenecks. Post 2.0 we are shifting to an “initiatives” approach where smaller autonomous teams can ship upgrades independently. “Design tokens”, “Plugin architecture”, “AI” or “E2E testing framework” are some of them. Do you want to know everything about Penpot 2.0 and what we’re cooking up next? Do you want to learn from amazing designers and developers that are shaping the industry by driving collaboration forward? Do you want to enjoy our very own PenpotFest in Barcelona, 5-7th June? Make sure to [get your early bird tickets](https://penpotfest.org/) while they’re still available! ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 9, 2024, 11:52am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/2 "2024-04-09T11:52:07Z")
Congrats on the launch! Penpot has surely come a long way. The team has done amazing work! I’m eager to really start using it, but I still feel like there’s one feature that’s preventing me from doing so. Components really need states/variants. I know that you have a story for that in the Components 2.0 epic ([Taiga](https://tree.taiga.io/project/penpot/us/2871)), I just hope that it’s prioritized for implementation sooner than later. Thank you all for all your hard work. ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 9, 2024, 12:35pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/3 "2024-04-09T12:35:07Z")
Well, I take back what I said about component states/variants. It looks like your component system is quite unique in how it deals with variants. After watching this video ([https://www.youtube.com/watch?v=dOGu1ke9fM4](https://www.youtube.com/watch?v=dOGu1ke9fM4)), I was curious to see if what I was seeing in that tutorial, was really the case so I decided to test something. After taking a deeper dive into the component system, it seems that variants are possible. It’s a new way of thinking about components states/variants. Main components can be created from instances and then those new main components can actually inherit from the instance’s parent main component. So component inheritance can be multi-tiered, which is pretty interesting and useful as a solution for component variants. Now, in light of this, the only thing that is still needed is some kind of hover solution for prototyping _(unless it’s there and I’m missing it?)_. ---
**Author:** ![thisbit](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/thisbit/32/1773_2.png) [@thisbit](https://community.penpot.app/u/thisbit)\ **Post date:** [April 12, 2024, 5:26pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/4 "2024-04-12T17:26:16Z")
Am I missing something or is there no way to set interactions as part of the component master itslef? On more complex systems I almost exclusively use variants for states to get a more flexible system of components. But an important part of state variants is the ability to set interactions on the master, so no repetitive work on instances is needed. ---
**Author:** ![thisbit](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/thisbit/32/1773_2.png) [@thisbit](https://community.penpot.app/u/thisbit)\ **Post date:** [April 12, 2024, 5:52pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/5 "2024-04-12T17:52:16Z")
Oh, I take that back. I see it is possible. However one issue I notice is with nested components. I have a button component, that has default and hover states. Interaction is established on the component master. If I place this button on the board all works well. However If I include this button in another component, like a nav bar, then the hover effect no longer works. setup ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/d/d4858f67c9b266a4ede93d1d029b60485ec39607.png) And this is the test case. Buttons that are marked red … work as expected in terms of hover effect, but ones in the top bar do not. On the red ones hover works, but click does not. ☹ Hover is achieved with toggle overlay ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/2/2b90c3cfb85ec90d99ff6621632cb7266cab5337.png) ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 14, 2024, 4:46pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/6 "2024-04-14T16:46:15Z")
@thisbit How did you figure out hover to toggle the overlay above the button? Everything I’ve tried toggles the overlay on the board, but not in the same location as the button. I’m sure I’m missing something, but hover is currently so poorly documented in the Penpot documentation. I do think that variants/states are far too unintuitive as they are now. ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 14, 2024, 5:32pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/7 "2024-04-14T17:32:59Z")
@thisbit I ended up finding an answer here: [Problem trying to make hover effect - #3 by jdittrich](https://community.penpot.app/t/problem-trying-to-make-hover-effect/3556/3) This is definitely an incredibly awkward user experience, which I hope the team improve upon in the future. ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 14, 2024, 6:50pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/8 "2024-04-14T18:50:01Z")
I’ve managed to optimize the pattern a little so that you don’t have to have the additional states off board cluttering up the visual context, but it still feels awkward. Anyway, here’s a simple POC. You simply place the additional states below the default state. [hover-poc.penpot](https://community.penpot.app/uploads/short-url/c6MbliP3YwsmnzLvtTSm9NHCoCo.penpot) (42.6 KB) ---
**Author:** ![jcklpe](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/jcklpe/32/230_2.png) [@jcklpe](https://community.penpot.app/u/jcklpe)\ **Post date:** [April 15, 2024, 3:42am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/9 "2024-04-15T03:42:43Z")
I’m honestly having trouble following how the component variants are supposed to work watching that video. And the fact that the term “variants” or “states” isn’t used and the original ticket hasn’t been updated makes this look like a temporary hackey workaround rather than actual fully fleshed out final feature…? ---
**Author:** ![iyadh](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/iyadh/32/4891_2.png) [@iyadh](https://community.penpot.app/u/iyadh)\ **Post date:** [April 16, 2024, 3:26pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/10 "2024-04-16T15:26:19Z")
Hi, The file was helpful, but I still can’t get to replicate it in my files. Can you kindly do a quick screen recording on the matter please? I’d be grateful. Thanks in advance ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [April 16, 2024, 3:52pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/11 "2024-04-16T15:52:23Z")
@iyadh Did you also take a look at this post, which I also linked to above? That should provide you more context… [Problem trying to make hover effect - #3 by jdittrich](https://community.penpot.app/t/problem-trying-to-make-hover-effect/3556/3) ---
**Author:** ![iyadh](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/iyadh/32/4891_2.png) [@iyadh](https://community.penpot.app/u/iyadh)\ **Post date:** [April 16, 2024, 5:13pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/12 "2024-04-16T17:13:54Z")
I checked the post, but the process is still unclear. Here is how I do it (check the [video](https://www.dropbox.com/scl/fi/8tpsjztynnwb6f5247fjr/penpot-components.mp4?rlkey=mnnz3fqbjhtp4sid7dgqz3clj&dl=0) below please), Am I missing something in the process? [https://www.dropbox.com/scl/fi/8tpsjztynnwb6f5247fjr/penpot-components.mp4?rlkey=mnnz3fqbjhtp4sid7dgqz3clj&dl=1](https://www.dropbox.com/scl/fi/8tpsjztynnwb6f5247fjr/penpot-components.mp4?rlkey=mnnz3fqbjhtp4sid7dgqz3clj&dl=1) ---
**Author:** ![saurav\_joshi](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@saurav\_joshi](https://community.penpot.app/u/saurav_joshi)\ **Post date:** [April 26, 2024, 12:58pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/13 "2024-04-26T12:58:14Z")
Hi team First of all thanks for penpot 2.0 I am facing few issues with new penpot 2.0 in self hosted environment I have exported 1 artboard in svg format from penpot 2.0, not able to edit same svg again . Copy paste not working fine. Exporting all artboard in 1 pdf is also not working . Let me know if I am missing anything. ---
**Author:** ![thisbit](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/thisbit/32/1773_2.png) [@thisbit](https://community.penpot.app/u/thisbit)\ **Post date:** [May 29, 2024, 11:59am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/14 "2024-05-29T11:59:47Z")
Thanks, this is kinda almost doable for tiny projects. But yes, we need component variants with interactions inside component definitions. Like that is imo the biggest blocker for real use. ---
**Author:** ![mgregoire](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mgregoire/32/3999_2.png) [@mgregoire](https://community.penpot.app/u/mgregoire)\ **Post date:** [May 29, 2024, 12:27pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/15 "2024-05-29T12:27:12Z")
Yeah, I agree. I revisited this pattern recently to try it out for a project and it really is awkward in practice. I’m currently sticking with XD until a more fleshed out variant solution is available. ---
**Author:** ![Daniel\_Munoz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/daniel_munoz/32/5520_2.png) [@Daniel\_Munoz](https://community.penpot.app/u/Daniel_Munoz)\ **Post date:** [June 30, 2024, 12:48am UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/16 "2024-06-30T00:48:35Z")
Please address performance issues first of all! This is crucial ---
**Author:** ![diacritica](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/diacritica/32/5604_2.png) [@diacritica](https://community.penpot.app/u/diacritica)\ **Post date:** [July 10, 2024, 2:36pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/17 "2024-07-10T14:36:33Z")
We have important news on this, we’ll share all of it very soon! ---
**Author:** ![diacritica](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/diacritica/32/5604_2.png) [@diacritica](https://community.penpot.app/u/diacritica)\ **Post date:** [September 11, 2024, 2:23pm UTC](https://community.penpot.app/t/penpot-2-0-a-major-milestone-in-our-journey-is-now-yours-to-explore-and-enjoy/4906/18 "2024-09-11T14:23:42Z")
here you are [It's time for Penpot to (almost) move away from the DOM](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437)