What If Figma Was Better For Developers? (Penpot)

Learn more about Penpot's Flex and Grid support here penpot.app/design/layout?utm_...
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:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 19

  • @OJGamingYT
    @OJGamingYT2 күн бұрын

    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.

  • @LearnWebCode

    @LearnWebCode

    2 күн бұрын

    Glad it was helpful! I'm the same way; I prefer grid over flex in most scenarios even if it's just 1 row, but for any kind of complexity of counting and placing based on grid lines... it becomes rocket science in my brain; so glad to have Penpot for those situations. I hear you on the class names. I think if you name the layers Penpot will use the layer name in the classes / selectors, but still, I think getting immediately usable paste'able code from the export feature is hard because like you mentioned how it renders to the canvas. And I'm not sure there's a way to get that perfect because the software still lets designers drag and drop and position things "absolutely" instead of doing things exclusively with flex and grid like I did in the video. Maybe it's good that it's almost an unsolvable issue; it's extra bonus job security lol.

  • @daniilomello
    @daniilomello2 күн бұрын

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

  • @ivanbarta2821
    @ivanbarta28212 күн бұрын

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

  • @LearnWebCode

    @LearnWebCode

    2 күн бұрын

    I've been enjoying it. I did run into some performance issues in Safari, but in Chrome it's silky smooth.

  • @petruciucur
    @petruciucurКүн бұрын

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

  • @_maurodf
    @_maurodf2 күн бұрын

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

  • @neontuts5637
    @neontuts5637Күн бұрын

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

  • @tevfik7
    @tevfik7Күн бұрын

    Designers will take over our jobs :)

  • @stepanovps
    @stepanovps2 күн бұрын

    Penpot is the future!

  • @andreigrigoras9367
    @andreigrigoras93672 күн бұрын

    Great knowledge as always !

  • @alexroy4235
    @alexroy42352 күн бұрын

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

  • @LearnWebCode

    @LearnWebCode

    2 күн бұрын

    Yes! Next is my "next" new course, but I've been focusing on updating all of my existing courses first. When I get caught up, Next.js is the next new course I wan to release on Udemy & Teachable.

  • @leocondoric.2391
    @leocondoric.23912 күн бұрын

    Ok, l'll try it

  • @techietoons
    @techietoons2 күн бұрын

    First

  • @Fels-li9hw
    @Fels-li9hw14 сағат бұрын

    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? 😢

  • @LearnWebCode

    @LearnWebCode

    8 сағат бұрын

    I do have a tip because I've been there myself. I'd stop trying to learn the basics or "make sure you have the technical fundamentals" down because that could be a never ending never "good enough" task. I'd focus on building a usable web app for the next month or so. But here's the important part; it can't be one from a tutorial or course, but one that is your own idea that's different from any tutorial you've seen. This way, you'll feel ownership over the project, and you'll be problem-solving solutions to your app instead of "troubleshooting tutorials" - instead of frustration you'll be building confidence. I've taken some amazing courses over the years, and they're like a road map, which is necessary, but all of my actual confidence building comes when I finish the course and go build something by myself. Keep a notes / text file where you keep track of which features you still need to build, which experiments you need to try, which bugs you need to fix, and just keep working on the project as you get time. Eventually you'll finish it, and seeing the working finished project is like physical evidence that tells imposter syndrome to be quiet; that what you know is "enough" and that you built something worthwhile with your code knowledge.

  • @Fels-li9hw

    @Fels-li9hw

    5 сағат бұрын

    @@LearnWebCode thanks a lot for the info 😊