What If Figma Was Better For Developers? (Penpot)

I didn't like when Figma made "dev mode inspector" a paid only feature even for individuals. Penpot is even better for developers, has native CSS Grid and Flex support, and is free and open source software.

0:00 Intro
2:11 Boards
3:58 Inspect / Dev Mode
7:27 CSS Flexbox
15:17 CSS Grid (Amazing!)
19:00 Self Host With Docker

Follow me for updates on new videos or projects:

[aseemlalfakawma]

You're the main reason I have a job now cause I watched your WP, jQuery tutorials 10 or so years ago. Just wanted to drop in and say thank you. I am suprised you're still making videos till this date cause I remember you taking a hiatus some time back. Good luck and thanks a lot Brad.

[codex]

I've watched a lot of tutorials for Penpot, but this is the one that made things click into place for me. As a dev that mostly does backend work, and an indepth knowledge of how browsers parse CSS I've been struggling understanding the thought pattern of a designer. Thanks a lot, it's so much easier than the other tutorials made it seem.

[OJGamingYT]

I had tried PenPot for all of about 2 seconds before deciding I didn't like it. Maybe because it felt a little too different from Figma for me... BUT after watching you do stuff so simply, it's like something snapped in me and now PenPot makes total sense! I love CSS Grid over Flex, but tend to only use Flex because trying to remember how grid works is actually impossible 😂 so I'm glad this has simplified it here.

The only thing I wish it did (and maybe it will in the future or does now and is just hidden somewhere) is to give components or component items classes, and then that way when you go to export the code, it'll draw from that class. I think this would solve the issue of the code it gives kind of being useless at times because of how it renders it in the canvas.

[PedroPisandelli]

This is such a great app. I'm always talking to Devs and UX/UI designers to work together, but not like "I do the design, and you code it… and that's it!". NO! I believe we have to talk (at least) the "basic language" of each other so we can work truly as a team, creating things that are doable but not boring. CSS had evolved a lot and there are many features available that helps us to create things more easily than ever. The most teammates know about it, the more we can have a smooth workflow to create great things. Thanks for this material!

[petruciucur]

An excellent tool that helps web developers focused more on php and mysql like me.

[neontuts]

Thanks for sharing. It's an awesome tool that improved DX(Developer Experience).

[frankiefab]

Perfect review! I will be trying Penpot

[daniilomello]

Could you create a video about getting a job as WordPress developer or being a freelance selling website services?

[clangsison]

great Penpot intro/workflow, thank you!

[ivanbarta]

The last time I used Penpot was 2 years ago. Now I have a reason to try again.

[_maurodf]

To me seems a lot how FSE interface should be :D Joined in Pen Pot, i have to give a try! Thanks a lot

[jugibur]

Thanks Brad, I will try it out! I wish we could have more relative values like em for all designs. And seeing that they even output the browser default CSS values (like "flex-wrap: nowrap; flex-direction: row") is a bit disappointing. I wonder why they didn't clean that up.

[alexroy]

Amazing. Is there any plan of "Nextjs" course on udemy?

[markwhitted]

Brad,
Are there basically “design” and “dev” “modes” like Figma? What I’m thinking is, could a designer use the kinds of tools THEY are used to to create the DESIGN and then the developer take that design and go into a “dev mode” to get access to all of the CSS features?

[cafelutsa_]

Figma was wonderful for developers, and I'm saying this as someone who designed in Figma and then coded 100% of the designs, but they got greedy, introduced the developer mode (that integrates wonderfully with vscode but it so unaffordable for a single dev), and then got rid of the CSS properties panel when you would click on an element while using the prototype mode.

[hayasa]

most of the things you said are similar to Plasmic, a visual to code open source web app. Can you do a review comparison?

[papanzi]

i've tried this tool and i must say the idea is nice, it's brilliant. But there are some things that i just cannot get over, for example there is no way to add a specific border (border-left, border-right etc etc). The tool is nice ofc but it has sadly no use for real production if they are missing features like this.

I've tried Penpot but for doing real, usable designs it's not there quite yet but i'll definitely check it out in future again because it looks like a promising product.

Sadly, currently there is just not any design and prototyping tool better than figma. There's just not period and that's kinda sad.

[Fels-lihw]

Bro i feel like I'm stuck in an endless loop trying to learn the basics of JS, despite spending so many hours for over 2 months now, i feel like I'm going nowhere.. do you have any tips on what I should do to move forward? 😢

[innocentnzuza]

Yes that you so much. I am leaving Figma

[EROSNERdesign]

why can't you export figma to xcode!!!! wtf! no a plugin, built into figma.