Penpot, design freedom for teams
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Ruiz-Múzquiz, Pablo
Penpot (formerly UXBOX) is an Open Source online design & prototyping platform with the aim of bringing the whole team to the design process. Penpot is multiplatform (web based) and based on open standards (SVG). The platform provides a set of tools meant not only for designers but also for developers and stakeholders. Design, prototype, feedback system, handoff specifications and low-code among them. We will share our vision, Penpot’s current state and our next challenges about the project. We will also perform a demo and hope to contribute to the already open channel between FOSS and Design.
 Take 23. No, I was kidding. Okay, so let's do this. Welcome to the talk on Penpot. It's my pleasure to be back on FOSDEM, whether it's Face to Face or online, to give you a nice follow-up on what we've been doing throughout 2020. At the time, it was not called Penpot. That was something we decided a few months ago. Initially, the code name was UXBox. What we wanted to do is to bring to free and open source ecosystem a professional platform for designers and creative people to be able to do all sort of prototyping and design. Particularly meant for digital products, like interfaces or any sort of design that is meant to then be printed or interacted with, if it's an app or a website or whatever. Our idea is there are too many proprietary tools out there that do a fine job. It's tempting to decide that since the open source arena doesn't provide me as a designer with a tool that I can use professionally and work together with other members of my team in a diverse and cross-functional team, I'll make an exception. While other people are using all sorts of open source tools, I'll have to admit and concede that I need to use, whether it's Sketch or FICMA or Envision. We decided, no way, we're going to make sure that we have a proper outstanding super professional platform, the likes of perhaps Blender in 3D modeling, but for prototyping and design. So a year has passed and now we're ready to announce what we promised. We promised back then that we would be giving you sort of an alpha or a 1.0 or MVP, whatever you want to call it, the first public release that you can work with. You can trust that it's actually stable and has a lot of features and of course it still has to do, we have a huge roadmap ahead, but you can already enjoy and be productive with, which is critical for that first impression. Should I be able to use this or would I like to depend on this tool? We wanted a resounding yes on that first impression. That's a tough yes, because when do you stop actually developing a tool for that 1.0 that has to give you that feeling of a finished product and still a lot of potential. We think we have achieved that. Actually we did some extra work, we didn't think we were able to do in this time and also the pandemic, so all in all I think we are in a quite great moment. I'm going to share the screen now for you to enjoy. I'm going to do a commentary voice. I'm going to show you a quick demo while I tell. This is Pembot, so welcome to 1.0. This is for a pre-recorded session. That was Juan, one of the lead designers and founders of Pembot. He's going to offer an alternative design of the Forstem website. Just an example, what would we do? Let's contribute to Forstem, even if it's just an exercise, probably futile, but it's just something that you can relate to. This is a very Forstem-oriented presentation as you can already feel. Here what you're seeing is we have the canvas. Canvas comes with grids and alignment and all sorts of tools and objects that you can add. Of course you can add text, there's a lot of things going on here. Images, the Forstem 21 there, is not a text obviously. What Juan is doing is very quickly using the grid system and the intelligent alignment system and all the proportions and sizes and widths and everything. Pembot is helping him to see whether things are aligned or the appropriate relationship or the ratio. Now he's using the free tool like paths to draw shapes. You can see your left all the layers. Some of them he will probably be renaming. It's not path 4 or path 3, but it's actually a proper unique name because it has an entity. Here he's using that, color management, the translucency, opacity, shadowing. I think he actually rotated some stuff, reported the radios there. Now he's just imported from his image library, the Forstem logo, multiple selection and drag and drop movement. He's switching between visible grid and hidden grid, so he always has a one click away view of what's going on, how it's going to look. We wanted to make sure that people coming to Pembot would feel that all the useful suspects in terms of user patterns were there. The learning curve is really not steep. There's some familiarity with other tools that people use. We think it's very important that people feel productive from day one, particularly designers do value their ideas, their assumptions, their imagination really is able to be fleshed out rather quickly. The tool is an extension of themselves sometimes. They might feel frustrated if they cannot conceive something at the speed of their imagination. We make sure that Pembot, even if we have some own ideas on how things should work as a prototyping and design tool, we wanted to make sure people found themselves in familiar territory. The super minute interactions that make a difference, like the way I'm using the mouse, the reaction, the feedback of the tool is exactly what I would expect. We hope that you find Pembot very much as an extension of your own hand or body or mind. Here you see we have a lot of text transformation, duplicate objects with all its internal layers to speed up some work. Typography and text in general was a challenge because remember we are using SVG. SVG is our storage. SVG is a standard, it's an open standard, it's a pretty strong standard, but it's not being used by the competition, by all the platforms. They are using their proprietary formats. We decided that we wanted to pursue open standards also in files and formats and storage. So we are using SVG, but that came with its own challenges and one of them was definitely text management. So we had to come with very smart workarounds to still use SVG and have all the potential and capabilities of HTML and CSS. You've seen here how well we've felt. I think we managed to do some text wrapping and all that. It's really not that easy when you're using SVG. So this is of course not the speed at which Juan typically works. He's slowing things down a bit. This is one when I was worth of work, I speed at about six seconds I think. But he's doing this for the first time, he's just doing a nice forced-in website. He's really productive. He developed Pempot so he knows how to use all the little options. But he's also quite exquisite. At the moment we can say that Pempot team is using now Pempot for development design Pempot itself. So things that we are not showing here is the design system support for Pempot. So you can actually have files and canvas, you know, assets that can be then have this ripple effect that you change one thing, one definition, one color, one property in one item. But since that is considered a main component, the parent one, all the children will immediately be affected as long as you want it to be. Pempot will always tell you, hey, the parent item has changed and you are using these inheritance in this design. Would you like those changes to be applied here? So you know what's going on. Here you can see some gradients, color management, not only the color picker, but the color management. We're really, really proud of how fast and easy to use this. We wanted to make sure that every time you make any small change, you see all the different ratios and proportions being shown to you. So you get that second. So here is the, yeah, now he's duplicated a canvas. This is for the about page. So he mostly now has to get rid of stuff. So multiple selection, delete, bam, gone. And he will now add some, you see, very, you know, out of contextual dialogues, of course, the moment you select the tool, you get those extra dialogues that are relevant only for that tool. Sometimes you see, you see at the bottom, the color palette. We borrowed that idea from the great tool that it's in scape, which is a different kind of beats, you know, multi-purpose, victor, victorial platform. You can do a lot of stuff with the escape. And one of the things we like the most is the way they handle the color palette. And that color product actually grows. It is somehow keeping track of all the colors that you're using in case you want to just again go back and say, I like the purple. Thank you for now. That's the prototyping. So of course, we want to make sure that you can do this interactive prototyping with links and I click, I click again and show. And I want to show you here one of the things that we're most proud of all the code around the, you know, all the properties around any, any element. But of course, also the CSS and the SVG. Everything here, everything you've seen is actually code. We're not translating. We're not doing anything like some, yeah, some translation into SVG or CSS. This is native, native storage. You know, this is, this is our choice. This is our agenda. This is how we lobby for open standards. We're using SVG and CSS as an easy translation. After that, we're going to show you comments, you know, we're slowing things down a bit. So you get notifications for comments. We need to have this stuff because it's, it's, it's all about teamwork and workflows and conversation. And this is pretty, you know, this is standard in the, in the industry at the moment. So you can navigate through all the comments. And also if you go to the prototype and activate comments, you can see also, you know, overlaid the comments and you can interact and do stuff also on prototype level, which is very typical for stakeholders. This will be the multi-user. And this is going to actually be the last part of the demo or the Surrealized demo. Here you can see three users at the top. You see three icons. And so three people are working here together, although you only see two at the moment. That's one and Andy. And from one's perspective, he's working, he's doing, he's aware of Andy's presence. And also he's aware of what he's doing more or less. I mean, things are in a way a bit transactional. So the moment that Andy, you know, clicks, enter or just whatever is when, when you actually see that, that change applied to the, to the shared canvas. Okay. So this was pretty much what I wanted to show you in terms of the platform. You cannot have that without team collaboration. And that means private management and all the things that come with permissions and inviting people and having shared drafts and all that. So I didn't show you that because that is a challenge to do, to, to make it right. But, you know, the exciting stuff lies, lies in the, in the canvas and the prototype and the low code and the common system and the multi user simultaneous multi real time user thing. We just released this, you know, it's a few days after we actually released 1.0. We want to, we wanted to launch the official Pemport on premise Docker image. This is important for us because everything is, is so versus the service at the moment. We want to, yeah, of course, provide services, but we want people to download this and use it locally. They want in the laptops or in their, in their service or whatever. And we want to continue to develop features to bridge the existing gap between established design apps like, yeah, the ones I already mentioned, because we want to make less and less likely that someone will dismiss Penport upon first use. So for us, it's very important that particularly designers that the first impression should be good enough for them to say, okay, I'm going to continue to trust this for some days and see how it goes. We want to also very privately, you know, which pursue some migration migration success stories from the competition. Yeah, so we want to, to hear from people saying I was using Figma and I'm using Pemport. I'm very glad that I did because blah, blah, blah, you know, please tell us and share those stories. Any migration is going to be good for the open source ecosystem and, and the community to know about those, those stories. So that would be great. So we try and pursue those migration success stories. We want to work on SVG import so that you can edit any SVG you're importing from other tools and do it like it's really very modular. And so, and that's a challenge to accept SVG from other tools, you know, SVG sometimes gets messy depending on the tool. We want to add Boolean operations with, you know, across elements. We want to have some sort of file management also. We want to also be able to import files from competitors like Figma files or Sketch files and see we can do some transformation and import that with, you know, acceptable loss of information. We also want to, you saw the prototype, the interactive prototype where you were linking items to paints and things. And then you have the typical click and then you go, you go there. That's fine. But we want to give more, more advanced interactions. And, and also we want to work on Tiger and Pempot integrations. So this is, this is Tiger. Well, actually, this is two screens of Tiger. And this is, this is the Kanban with zoom out, very compact and expanded. This is basically this is Tiger six. We also released this a few days ago. Tiger is all about agile project management is open source. We've been doing this for, for a few years now. And we feel that they make, I mean, we are the developers of Tiger, we are the developers and creators of Pempot. So it made sense that we would have some sort of bundle some integration. We haven't, I mean, there's some low hanging fruit in terms of features and integrations like I will close an issue while I was in Pompempot. Or I will create a new design through a new user story on Tiger, you know, things like that. Those are pretty simple and straightforward. We want to think more creatively because we think it's all about the process, the workflow and team collaboration. And we think those two tools suit a match together really nicely. So yeah, this is Tiger six. You probably already heard about this, but you can, you can go to Tiger.io and check this out. This is the spring. This is the scrum. And, you know, also different zoom levels for spring task port that they will be the screens for during a sprint. So if you didn't know about Tiger, go and check it. Integration with Git repositories so that every design, every SVG code that you have, it's also being synchronized with a Git repository so you can go back and forth, Git repository, Pompempot. Perhaps you want to edit the SVG on the Git repository and you see the new color popping up on the Pompempot interface, you know. And of course, related to that actively manage community contributions because we feel a lot of plugins and ideas will come from the community. And that is that's probably, you know, going to take the rest of the year. And that's it. So call to action. There's two things we would like to ask you. One, just try it out and pass what an article or view tells what we think, you know, spread the word if you feel like it. You can send a DMAIL, you know, we want to know your opinion on this. And also the second thing, trying it out, writing about it, sharing about Pompempot would be what do you want us to develop, you know, or what do you think you could contribute, you know, whether it's features or assets, because we feel it's going to be also a lot of open source design stuff, just assets like creativity, like logos, shapes, icons, you know, with all the SVG love or, or bitmap, you know. And so we will like to know what do you think, you know, what should be doing next. And we need to know from you, we will actively, you know, doing polls and all that, but feel free to tell us how a roadmap should look like in the foreseeable future. So this was it, you know, thank you very much for your time. I hope you like what we've developed over the this year. We continue to work full time, you know, full speed, really, really exciting year ahead. Thank you very much. Thank you for some.
 Take 23.  No, I was kidding.  Okay, so let's do this.  Welcome to the talk on Penpot.  It's my pleasure to be back on FOSDEM,  whether it's Face to Face or online,  to give you a nice follow-up  on what we've been doing throughout 2020.  At the time, it was not called Penpot.  That was something we decided a few months ago.  Initially, the code name was UXBox.  What we wanted to do is to bring to free and open source ecosystem  a professional platform for designers  and creative people to be able to do all sort of prototyping and design.  Particularly meant for digital products,  like interfaces or any sort of design that is meant to then be printed  or interacted with, if it's an app or a website or whatever.  Our idea is there are too many proprietary tools out there that do a fine job.  It's tempting to decide that since the open source arena doesn't provide me as a designer  with a tool that I can use professionally  and work together with other members of my team in a diverse and cross-functional team,  I'll make an exception.  While other people are using all sorts of open source tools,  I'll have to admit and concede that I need to use,  whether it's Sketch or FICMA or Envision.  We decided, no way, we're going to make sure that we have a proper outstanding  super professional platform, the likes of perhaps Blender in 3D modeling,  but for prototyping and design.  So a year has passed and now we're ready to announce what we promised.  We promised back then that we would be giving you sort of an alpha or a 1.0 or MVP,  whatever you want to call it, the first public release that you can work with.  You can trust that it's actually stable and has a lot of features  and of course it still has to do, we have a huge roadmap ahead,  but you can already enjoy and be productive with, which is critical for that first impression.  Should I be able to use this or would I like to depend on this tool?  We wanted a resounding yes on that first impression.  That's a tough yes, because when do you stop actually developing a tool for that 1.0  that has to give you that feeling of a finished product and still a lot of potential.  We think we have achieved that.  Actually we did some extra work, we didn't think we were able to do in this time  and also the pandemic, so all in all I think we are in a quite great moment.  I'm going to share the screen now for you to enjoy.  I'm going to do a commentary voice.  I'm going to show you a quick demo while I tell.  This is Pembot, so welcome to 1.0.  This is for a pre-recorded session.  That was Juan, one of the lead designers and founders of Pembot.  He's going to offer an alternative design of the Forstem website.  Just an example, what would we do?  Let's contribute to Forstem, even if it's just an exercise, probably futile,  but it's just something that you can relate to.  This is a very Forstem-oriented presentation as you can already feel.  Here what you're seeing is we have the canvas.  Canvas comes with grids and alignment and all sorts of tools and objects that you can add.  Of course you can add text, there's a lot of things going on here.  Images, the Forstem 21 there, is not a text obviously.  What Juan is doing is very quickly using the grid system and the intelligent alignment system  and all the proportions and sizes and widths and everything.  Pembot is helping him to see whether things are aligned or the appropriate relationship or the ratio.  Now he's using the free tool like paths to draw shapes.  You can see your left all the layers.  Some of them he will probably be renaming.  It's not path 4 or path 3, but it's actually a proper unique name because it has an entity.  Here he's using that, color management, the translucency, opacity, shadowing.  I think he actually rotated some stuff, reported the radios there.  Now he's just imported from his image library, the Forstem logo, multiple selection and drag and drop movement.  He's switching between visible grid and hidden grid, so he always has a one click away view of what's going on, how it's going to look.  We wanted to make sure that people coming to Pembot would feel that all the useful suspects in terms of user patterns were there.  The learning curve is really not steep.  There's some familiarity with other tools that people use.  We think it's very important that people feel productive from day one, particularly designers do value their ideas, their assumptions, their imagination really is able to be fleshed out rather quickly.  The tool is an extension of themselves sometimes.  They might feel frustrated if they cannot conceive something at the speed of their imagination.  We make sure that Pembot, even if we have some own ideas on how things should work as a prototyping and design tool, we wanted to make sure people found themselves in familiar territory.  The super minute interactions that make a difference, like the way I'm using the mouse, the reaction, the feedback of the tool is exactly what I would expect.  We hope that you find Pembot very much as an extension of your own hand or body or mind.  Here you see we have a lot of text transformation, duplicate objects with all its internal layers to speed up some work.  Typography and text in general was a challenge because remember we are using SVG.  SVG is our storage.  SVG is a standard, it's an open standard, it's a pretty strong standard, but it's not being used by the competition, by all the platforms.  They are using their proprietary formats.  We decided that we wanted to pursue open standards also in files and formats and storage.  So we are using SVG, but that came with its own challenges and one of them was definitely text management.  So we had to come with very smart workarounds to still use SVG and have all the potential and capabilities of HTML and CSS.  You've seen here how well we've felt.  I think we managed to do some text wrapping and all that.  It's really not that easy when you're using SVG.  So this is of course not the speed at which Juan typically works.  He's slowing things down a bit.  This is one when I was worth of work, I speed at about six seconds I think.  But he's doing this for the first time, he's just doing a nice forced-in website.  He's really productive.  He developed Pempot so he knows how to use all the little options.  But he's also quite exquisite.  At the moment we can say that Pempot team is using now Pempot for development design Pempot itself.  So things that we are not showing here is the design system support for Pempot.  So you can actually have files and canvas, you know, assets that can be then have this ripple effect that you change one thing, one definition, one color, one property in one item.  But since that is considered a main component, the parent one, all the children will immediately be affected as long as you want it to be.  Pempot will always tell you, hey, the parent item has changed and you are using these inheritance in this design.  Would you like those changes to be applied here?  So you know what's going on.  Here you can see some gradients, color management, not only the color picker, but the color management.  We're really, really proud of how fast and easy to use this.  We wanted to make sure that every time you make any small change, you see all the different ratios and proportions being shown to you.  So you get that second.  So here is the, yeah, now he's duplicated a canvas.  This is for the about page.  So he mostly now has to get rid of stuff.  So multiple selection, delete, bam, gone.  And he will now add some, you see, very, you know, out of contextual dialogues, of course, the moment you select the tool, you get those extra dialogues that are relevant only for that tool.  Sometimes you see, you see at the bottom, the color palette.  We borrowed that idea from the great tool that it's in scape, which is a different kind of beats, you know, multi-purpose, victor, victorial platform.  You can do a lot of stuff with the escape.  And one of the things we like the most is the way they handle the color palette.  And that color product actually grows.  It is somehow keeping track of all the colors that you're using in case you want to just again go back and say, I like the purple.  Thank you for now.  That's the prototyping.  So of course, we want to make sure that you can do this interactive prototyping with links and I click, I click again and show.  And I want to show you here one of the things that we're most proud of all the code around the, you know, all the properties around any, any element.  But of course, also the CSS and the SVG.  Everything here, everything you've seen is actually code.  We're not translating.  We're not doing anything like some, yeah, some translation into SVG or CSS.  This is native, native storage.  You know, this is, this is our choice.  This is our agenda.  This is how we lobby for open standards.  We're using SVG and CSS as an easy translation.  After that, we're going to show you comments, you know, we're slowing things down a bit.  So you get notifications for comments.  We need to have this stuff because it's, it's, it's all about teamwork and workflows and conversation.  And this is pretty, you know, this is standard in the, in the industry at the moment.  So you can navigate through all the comments.  And also if you go to the prototype and activate comments, you can see also, you know, overlaid the comments and you can interact and do stuff also on prototype level, which is very typical for stakeholders.  This will be the multi-user.  And this is going to actually be the last part of the demo or the Surrealized demo.  Here you can see three users at the top.  You see three icons.  And so three people are working here together, although you only see two at the moment.  That's one and Andy.  And from one's perspective, he's working, he's doing, he's aware of Andy's presence.  And also he's aware of what he's doing more or less.  I mean, things are in a way a bit transactional.  So the moment that Andy, you know, clicks, enter or just whatever is when, when you actually see that, that change applied to the, to the shared canvas.  Okay.  So this was pretty much what I wanted to show you in terms of the platform.  You cannot have that without team collaboration.  And that means private management and all the things that come with permissions and inviting people and having shared drafts and all that.  So I didn't show you that because that is a challenge to do, to, to make it right.  But, you know, the exciting stuff lies, lies in the, in the canvas and the prototype and the low code and the common system and the multi user simultaneous multi real time user thing.  We just released this, you know, it's a few days after we actually released 1.0.  We want to, we wanted to launch the official Pemport on premise Docker image.  This is important for us because everything is, is so versus the service at the moment.  We want to, yeah, of course, provide services, but we want people to download this and use it locally.  They want in the laptops or in their, in their service or whatever.  And we want to continue to develop features to bridge the existing gap between established design apps like, yeah, the ones I already mentioned, because we want to make less and less likely that someone will dismiss Penport upon first use.  So for us, it's very important that particularly designers that the first impression should be good enough for them to say, okay, I'm going to continue to trust this for some days and see how it goes.  We want to also very privately, you know, which pursue some migration migration success stories from the competition.  Yeah, so we want to, to hear from people saying I was using Figma and I'm using Pemport.  I'm very glad that I did because blah, blah, blah, you know, please tell us and share those stories.  Any migration is going to be good for the open source ecosystem and, and the community to know about those, those stories.  So that would be great.  So we try and pursue those migration success stories.  We want to work on SVG import so that you can edit any SVG you're importing from other tools and do it like it's really very modular.  And so, and that's a challenge to accept SVG from other tools, you know, SVG sometimes gets messy depending on the tool.  We want to add Boolean operations with, you know, across elements.  We want to have some sort of file management also.  We want to also be able to import files from competitors like Figma files or Sketch files and see we can do some transformation and import that with, you know, acceptable loss of information.  We also want to, you saw the prototype, the interactive prototype where you were linking items to paints and things.  And then you have the typical click and then you go, you go there.  That's fine. But we want to give more, more advanced interactions.  And, and also we want to work on Tiger and Pempot integrations.  So this is, this is Tiger.  Well, actually, this is two screens of Tiger.  And this is, this is the Kanban with zoom out, very compact and expanded.  This is basically this is Tiger six.  We also released this a few days ago.  Tiger is all about agile project management is open source.  We've been doing this for, for a few years now.  And we feel that they make, I mean, we are the developers of Tiger, we are the developers and creators of Pempot.  So it made sense that we would have some sort of bundle some integration.  We haven't, I mean, there's some low hanging fruit in terms of features and integrations like I will close an issue while I was in Pompempot.  Or I will create a new design through a new user story on Tiger, you know, things like that.  Those are pretty simple and straightforward.  We want to think more creatively because we think it's all about the process, the workflow and team collaboration.  And we think those two tools suit a match together really nicely.  So yeah, this is Tiger six.  You probably already heard about this, but you can, you can go to Tiger.io and check this out.  This is the spring.  This is the scrum.  And, you know, also different zoom levels for spring task port that they will be the screens for during a sprint.  So if you didn't know about Tiger, go and check it.  Integration with Git repositories so that every design, every SVG code that you have, it's also being synchronized with a Git repository so you can go back and forth, Git repository, Pompempot.  Perhaps you want to edit the SVG on the Git repository and you see the new color popping up on the Pompempot interface, you know.  And of course, related to that actively manage community contributions because we feel a lot of plugins and ideas will come from the community.  And that is that's probably, you know, going to take the rest of the year.  And that's it.  So call to action.  There's two things we would like to ask you.  One, just try it out and pass what an article or view tells what we think, you know, spread the word if you feel like it.  You can send a DMAIL, you know, we want to know your opinion on this.  And also the second thing, trying it out, writing about it, sharing about Pompempot would be what do you want us to develop, you know, or what do you think you could contribute, you know, whether it's features or assets, because we feel it's going to be also a lot of open source design stuff,  just assets like creativity, like logos, shapes, icons, you know, with all the SVG love or, or bitmap, you know.  And so we will like to know what do you think, you know, what should be doing next.  And we need to know from you, we will actively, you know, doing polls and all that, but feel free to tell us how a roadmap should look like in the foreseeable future.  So this was it, you know, thank you very much for your time.  I hope you like what we've developed over the this year.  We continue to work full time, you know, full speed, really, really exciting year ahead.  Thank you very much. Thank you for some.
penpot_design_freedom_for_teams_0_179.png penpot_design_freedom_for_teams_180_4751.png penpot_design_freedom_for_teams_4752_5447.png penpot_design_freedom_for_teams_5448_9743.png penpot_design_freedom_for_teams_9744_10475.png penpot_design_freedom_for_teams_10476_10667.png penpot_design_freedom_for_teams_10668_10967.png penpot_design_freedom_for_teams_10968_12803.png penpot_design_freedom_for_teams_12804_13823.png penpot_design_freedom_for_teams_13824_13883.png penpot_design_freedom_for_teams_13884_14003.png penpot_design_freedom_for_teams_14004_14819.png penpot_design_freedom_for_teams_14820_15623.png penpot_design_freedom_for_teams_15624_15983.png penpot_design_freedom_for_teams_15984_16367.png penpot_design_freedom_for_teams_16368_16463.png penpot_design_freedom_for_teams_16464_17075.png penpot_design_freedom_for_teams_17076_17195.png penpot_design_freedom_for_teams_17196_17267.png penpot_design_freedom_for_teams_17268_18095.png penpot_design_freedom_for_teams_18096_18383.png penpot_design_freedom_for_teams_18384_18659.png penpot_design_freedom_for_teams_18660_19199.png penpot_design_freedom_for_teams_19200_20435.png penpot_design_freedom_for_teams_20436_25031.png penpot_design_freedom_for_teams_25032_25355.png penpot_design_freedom_for_teams_25356_26951.png penpot_design_freedom_for_teams_26952_30256.png