Today's Deep-Dive: penpot
Ep. 35

Today's Deep-Dive: penpot

Episode description

This episode highlights Penpot, an open-source design tool focused on bridging the gap between designers and developers. Traditional design tools often create disconnects, but Penpot uses web-native technologies like HTML, CSS, and SVG, so developers work directly with code instead of trying to interpret exported files.

Penpot’s Inspect tool allows developers to see the code behind designs, speeding up development and improving user engagement. Responsive design tools using Flexbox and Grid help ensure layouts look great on any screen size. Penpot also supports clickable prototypes for a more accurate preview of user interactions, reducing miscommunication.

Penpot’s design system approach provides shared libraries and templates, promoting consistency and making scaling easier. Collaboration is encouraged with unlimited team sizes and open invitations. As an open-source tool, Penpot benefits from a vibrant community contributing new features, templates, and code.

The platform also supports self-hosting for data privacy, customizable setups, and integration through APIs and webhooks. This flexibility is ideal for companies needing tight control over their workflow.

Ultimately, Penpot fosters a more open, collaborative approach to design, empowering both designers and developers to work together effectively.

Download transcript (.srt)
0:00

ever get that feeling like something's lost in translation when a design goes

0:04

from the designer to the developers. Oh yeah. All the time today,

0:07

we're taking a deep dive into pen pot. This design tool that's trying to fix that.

0:11

Yeah.

0:12

We've got a bunch of articles and reviews and it seems like pen pods getting a lot

0:16

of attention because it's got this different way of connecting design and code.

0:19

And the really cool thing is that pen pot is built on web native technologies.

0:23

Okay. So designs are made using, you know,

0:27

those familiar web languages like CSS SVG and HTML instead of like weird

0:32

proprietary formats. Right.

0:33

So developers aren't stuck trying to figure out some crazy export file.

0:37

They're actually looking at the code, the same code they'll be using.

0:41

So no more throwing the design over the fence.

0:43

It's like designers and developers are like speaking the same language right from

0:48

the start. Exactly. Yeah. And when they share a language like that, well,

0:52

you know, it changes things. Yeah.

0:54

Like one of the best things about pen pot is the inspect tool developers can

0:58

literally inspect the design and see the code underneath makes going from design

1:03

to development way smoother. That makes a lot of sense. Yeah.

1:07

I was reading about this company. I won't say who,

1:09

but they said that when they redesigned their website using pen pot,

1:13

their development time got cut by something like 20%. Wow.

1:18

Just cause developers didn't have to waste time translating designs and get this

1:24

they also said they got like a 15% bump in user engagement.

1:29

That's awesome.

1:30

They said it was because the designers and developers were working together

1:32

better.

1:33

That's a perfect example of how using pen pot, you know, gets you actual results

1:37

and it's not just about being faster. When designers and developers work closer,

1:41

you usually end up with something better,

1:43

something that really reflects the original design.

1:45

It looks like pen pie has a bunch of features that help people work together

1:49

too. Like I was looking at their responsive design tools,

1:52

the ones that use Flexbox and grid. Web developers know all about those,

1:55

but for anyone who doesn't, could you give us a quick explanation?

1:59

Like explain it to us like we're five years old. What are those things?

2:02

And why do they matter? Sure. Imagine you're putting pictures on a wall.

2:06

Flexbox and grid are like sets of rules for arranging those pictures in different

2:11

ways. It depends on, you know, how big the wall is and the shape in web design,

2:16

you use them. So the layout adjusts to different screen sizes. Okay.

2:20

So your websites look good, whether you're on a tiny phone or a huge desktop.

2:24

That's a really good way to explain it. Thanks.

2:26

So pen pods giving designers tools to make layouts that are responsive right from

2:31

the start.

2:31

So developers get designs that are already perfect for the web. Exactly.

2:36

It's all starting to click for me now. And there's more for designers.

2:40

Pen pot has really cool prototyping features.

2:42

They can make clickable prototypes that like simulate what the user will actually

2:47

do. Cool. It helps everyone get on the same page from the beginning and avoid

2:51

those. Wait, it wasn't supposed to work like that moments later on.

2:55

Makes sense. So pen plots, not just about getting rid of the handoff,

2:58

it's about making the whole design process more collaborative and iterative

3:03

where everybody's involved right from the get go.

3:06

You got it. And it goes even deeper.

3:08

Pen pots built around this idea of a shared design system using libraries and

3:13

templates.

3:14

Think of it like a central place where designers and developers can get pre-made

3:18

design elements and code snippets that make sure everything stays consistent.

3:22

And it makes it easier to scale things across different projects.

3:26

That sounds like a huge time saver,

3:28

especially for bigger teams or companies with like tons of products. Oh yeah,

3:33

absolutely. And you know, speaking of teams,

3:35

one of the things that makes pen pots stand out is how much they focus on

3:39

collaboration and making it easy for people to use. How so? Well,

3:43

there's no limit on team size and they're totally open about invitations.

3:47

So anyone can join.

3:48

I have to say a design tool that actually wants people to work together and

3:51

break down those walls. That's pretty refreshing. I know. Right.

3:54

And then you've got this whole community thing going on because you know,

3:57

pen pots open source, right?

3:59

There's this amazing community of designers and developers all contributing.

4:02

They're building libraries, making templates,

4:05

and even writing code to make pen pot even better. Wow.

4:07

It's like this huge brainstorming session where anyone can join in.

4:11

That's awesome. I even read about this pen pot fest thing where designers and

4:15

developers from all over the world meet up. Yeah.

4:17

Pen pot fest do like share ideas and network.

4:20

It really shows what this project is all about. You know,

4:23

it's more than just a tool.

4:25

It's this whole movement towards working together more openly.

4:29

I'm also seeing a lot of good things people are saying online from both

4:33

designers and developers about how pen pot has changed the way they work.

4:38

Oh yeah, for sure.

4:39

I found this quote from a developer, Brett Haymaker.

4:42

He was saying that pen pot felt really intuitive to work with, especially,

4:46

you know, the CSS stuff.

4:47

He said the controls just made sense to him as a developer.

4:50

Like it matched how he already thought about styling.

4:53

So the whole process was smoother.

4:54

And I found one from a designer rocks Angie.

4:57

She said that using pen pots grid system actually made her a better designer.

5:02

Interesting. How so?

5:04

She said it kind of forced her to think about layouts in a more structured way

5:08

using actual CSS grid.

5:10

It keeps her designs honest, she said,

5:13

because what she designs is exactly what developers will see.

5:16

Those are great examples of how pen pot is really closing that gap,

5:20

but it's not just about making things easier.

5:23

There's also like this control you get with self-hosting.

5:26

Let's talk about that. What does self-hosting even mean here?

5:29

And why would someone want to do that?

5:31

So self-hosting basically means you can run pen pot on your own servers instead

5:35

of using their cloud platform. Okay.

5:38

And this is a big deal for, you know,

5:40

organizations that are really strict about security and data privacy.

5:44

They have total control over where that data goes and who can see it.

5:48

So it's like having your own private pen pot set up exactly how you need it.

5:51

Exactly. But it's not just about security. When you self-host,

5:54

you can customize things way more. Pen pot has an ATI and web hooks.

5:59

That means you can connect it to other tools you use and build custom

6:02

integrations. Hmm. For people who don't know all that tech stuff,

6:05

could you explain what APIs and web hooks are? We're getting a bit geeky now.

6:09

Think of an API, like, uh, like a waiter at a restaurant.

6:14

You tell them what you want. They go to the kitchen and bring back your food.

6:17

Okay. I like that.

6:19

A web hook is like if the kitchen could just send you a notification when your

6:23

food is ready. Got it.

6:24

So systems can talk to each other without you having to constantly check in.

6:27

So self-hosting pen pot using its API and web hooks,

6:32

it's basically like you can create your own custom design and development,

6:36

like ecosystem. Pretty much. Yeah.

6:38

And having that flexibility is a big plus for a lot of teams.

6:41

Plus you can make pen pot bigger or smaller, depending on what your team needs.

6:45

We've talked a lot about the features and you know,

6:48

all the good things about pen pot, but I'm curious about the bigger picture.

6:51

Like where do you see pen pot in the future of design?

6:54

Well, I think pen pot is part of this trend we're seeing, you know,

6:59

towards design tools that are more open and collaborative.

7:02

It's challenging that traditional way of doing things where designers and

7:07

developers are in their own little bubbles,

7:09

which often leads to like miscommunication and frustration.

7:13

Yeah, totally.

7:13

Pen pot's trying to bridge that gap by creating, you know,

7:17

a shared language so everyone understands each other better.

7:20

It's like they're building a bridge between these two worlds that have been

7:23

apart for way too long.

7:25

That's a great way to put it. And you know, when you do that,

7:27

you have the potential to make products that are more innovative and focused on

7:31

the user. When designers and developers can work together closely,

7:35

sharing ideas and making changes quickly.

7:37

That's when really amazing things can happen.

7:40

So for someone listening to us,

7:41

who's maybe feeling like inspired by what they've heard, what's the next step?

7:45

I'd say just check out pen pot. You can use it for free.

7:48

There's a ton of resources online and the community is super helpful and

7:52

welcoming. Yeah, that's a great point. Give it a shot, see if it works for you.

7:56

And who knows, maybe you'll become part of the pen pot movement too.

7:58

I love that we've all learned so much about pen pot today and I'm really excited

8:03

about what they're doing. It's inspiring to see how design and development can

8:06

work together, you know, more smoothly.

8:09

Thanks for joining me on this deep dive into pen pot until next time.

8:14

Yeah. It sounds like pen pots bringing back, you know,

8:17

the fun and creativity to design.

8:20

It is. And don't forget about that whole community thing.

8:22

Pen pots open source, so it keeps getting better, you know, thanks to all these designers

8:26

and developers from around the world who are always contributing.

8:29

That's come up a lot, you know, like pen pots more than just a tool.

8:32

It's like this community, a movement even.

8:35

Yeah, I think so. And that's what makes it so cool.

8:37

Pen pots like shaking things up, showing people that there is a different way to do

8:42

design and development, a way that's more open, more collaborative, and I think

8:46

ultimately more human.

8:48

So for someone who's been listening, who's, you know, intrigued and inspired by

8:53

what they've heard, what would you say to them?

8:55

What should they do? Just check out Pen Pot.

8:57

Go for it. It's free.

8:59

And there's like tons of resources online and the community's awesome.

9:04

Super supportive. That's a great point. Just give it a try. See how it feels.

9:07

You might just become part of the movement, too. I love that.

9:10

We've learned a lot about Pen Pot today.

9:12

I'm really excited about their vision, you know, this whole approach.

9:16

Thanks for joining me for this deep dive into Pen Pot. See you next time.

9:16

Thanks for joining me for this deep dive into Pen Pot. See you next time.