00:00:00This is Penpot, an open-source design tool that competes with the likes of Figma.
00:00:05Now, yeah, at first it looks like Figma, but it doesn't behave anything like it.
00:00:10Because under the hood, it's using real CSS, not something you have to convert later.
00:00:15And that changes the handoff problem in a big way.
00:00:18Let me show you what I mean.
00:00:20Penpot is a browser-based UI design and prototyping tool.
00:00:29On the surface, yeah, it sounds like Figma or Sketch.
00:00:32But really, here's the major difference.
00:00:35Penpot is 100% open-source and it's built on real web standards.
00:00:40SVG, CSS Flexbox, Grid, and HTML.
00:00:43So instead of designing inside something you have to decode and destructor later,
00:00:49you're already closer to how the web actually works.
00:00:52You can self-host it with Docker in one command,
00:00:54which is what I'll do in this video, as that's what I'm all about.
00:00:58Open-source versions of tools and seeing how they compare.
00:01:01Now with Penpot, designers still get components, layouts, prototypes.
00:01:06But devs get the part that actually matters, output that looks like real code.
00:01:11There's no weird middle layer going on, there's no guessing what's happening.
00:01:14And it's free.
00:01:15Unlimited files, unlimited collaborators, that's why people care about this.
00:01:20If you enjoy open-source tools and coding tips that speed up your workflow,
00:01:23be sure to subscribe to the channel.
00:01:25We have videos coming out all the time.
00:01:27Now Penpot's a design tool.
00:01:28So why should you care, especially if you're a dev?
00:01:31Because this fixes a very specific pain.
00:01:34The pain of handing off a project or converting design into real code.
00:01:39Penpot makes design feel native to the web.
00:01:42So when you inspect something you're not guessing, you're reading it.
00:01:46Let me show you.
00:01:48All right, quick demo time here, people.
00:01:50This is running live on my self-hosted Penpot instance.
00:01:54I spun this up with a single Docker Compose up command using the official
00:01:58Docker Compose file we just configured.
00:02:00This was huge.
00:02:02So it took some time to spin this up, but now that it's up and going, it works great.
00:02:07And we get a nice landing page here, clean look where I can create a new project.
00:02:12Now let's actually build something, just a simple card, nothing fancy.
00:02:16Just a container, set it to a flexbox, add some padding.
00:02:21I'll drop in a title, some text, and a button.
00:02:24Maybe add some more here, another card, I can copy paste.
00:02:28I'll do some quick edits.
00:02:30We'll switch into inspect mode.
00:02:32And this is the important part.
00:02:33You get clean structure in the actual CSS, flexbox properties, spacing, layout.
00:02:39Not a rough translation, it's something you already understand.
00:02:42You can copy this and drop it straight into your project.
00:02:46You've also got variants, tokens, prototype flows, and export as SPG.
00:02:51That's the big thing here.
00:02:52This removes a ton of friction for
00:02:54dev teams, especially when you own the entire stack yourself.
00:02:58Now let's talk about the part where most devs get skeptical.
00:03:02At first, this sounds like, cool, another design tool.
00:03:06But the difference is not how it looks, it's how it works.
00:03:09Figma simulates layouts.
00:03:12Autolayer is inspired by flexbox, but you still end up translating all this in your
00:03:16head.
00:03:17Penpot starts much closer to actual CSS, so
00:03:21there's less mental conversion between design and code.
00:03:25Then there's Lockit, right?
00:03:26Figma uses proprietary files.
00:03:29We have pricing seat models.
00:03:31Penpot, open source, so you can self host it.
00:03:34Your data stays in SVG, CSS, and JSON.
00:03:38The handoff is different too because in Figma it feels like an extra layer, right?
00:03:42Dev mode, plugins, extra steps.
00:03:45In Penpot, it's just built right in.
00:03:47The inspect view is already closer to what we actually need.
00:03:50And to be fair, Figma is great.
00:03:53I use it, it's huge, it's a polished ecosystem.
00:03:56But Penpot is clearly built with devs in mind from the get go.
00:04:00So what do devs actually like about this?
00:04:02Well, the biggest thing I've said, right?
00:04:04It's simple, the handoff problem gets smaller.
00:04:07That's huge for us.
00:04:08You're not reverse engineering layouts anymore.
00:04:11You're reading something that maps directly into CSS.
00:04:15That shows up in design tokens too.
00:04:18Colors, spacing, typography, they're structured in a way that feels closer to
00:04:22how you already think in code.
00:04:24And self hosting is a big deal for some teams.
00:04:27If you care about privacy, internal tools, CI/CD, all of this matters, right?
00:04:33But open source, it's not perfect, no tool is perfect, even Figma, right?
00:04:37But Penpot can struggle with really large files.
00:04:40The plugin ecosystem is a lot smaller.
00:04:43And if you're deep into Figma, then there's going to be somewhat of a learning curve,
00:04:47but honestly, it's super simple to pick up because it's a different way of thinking.
00:04:51So yeah, less polished in some areas, but a much smaller gap between design and
00:04:56development, which honestly is what a lot of us are after.
00:04:59Now, is it worth using?
00:05:01I think so.
00:05:02It was a lot of fun.
00:05:02I enjoy tools like this.
00:05:03So for a lot of you devs, yeah.
00:05:06If you're working on side projects or anything dev heavy, this makes sense,
00:05:10especially if you care about saving money, right?
00:05:12You're building an MVP, you're building something like this,
00:05:14you're trying to avoid lock-in, and
00:05:16you want to get designs that translate cleanly into code.
00:05:19Now, if you're in a big company with massive design systems,
00:05:23you're already built around Figma.
00:05:24So you're probably not going to switch to this, at least not overnight, but
00:05:28that's not really the point.
00:05:29Penpot doesn't need to replace everything to be useful.
00:05:31For a lot of teams, for a lot of you, it covers most of what you need,
00:05:35it makes development faster.
00:05:36And that's why more devs are starting to actually try it.
00:05:39It cuts down all that hand-off time that it takes to take a design into code.
00:05:45If you want to try it, it's easy.
00:05:46Go over to Penpot app, use the cloud version, or do what I'm doing.
00:05:50Self-host it with Docker if you want more control just like here.
00:05:54If you enjoy open source tools and coding tips like this,
00:05:57be sure to subscribe to the Better Stack channel.
00:05:59We'll see you in another video.