Your designs into code in seconds | Hands-on demo, Aug 21st

[Paula]

From Penpot design to production-ready code—live in seconds!

Whether you’re a designer looking to better support devs or a developer aiming to speed up your workflow—this demo is for you.

Locofy Lightning plugin with Locofy | Penpot Hands-On Demo.

They we’ll show you how to use Locofy plugin and turns Penpot designs into clean, frontend code for React, HTML/CSS, Angular, Next.js, Gatsby, & Vue with Locofy Lightning plugin in a matter of seconds.

Join @LauraKalbag, designer, developer, and educator at Penpot, on Aug 21 for the next Hands-on Demo! This time she will be accompanied by two special guests: @diacritica, CEO at Penpot, and Raymond Panganiban, Head of Design at Locofy.

Event details

Date: Thursday, Aug 21st

Time: UTC 2-3 PM (Convert to your local timezone with ZoneStamp)

Stream on: PeerTube, YouTube, or LinkedIn

You’ll learn how to

• Structure a Penpot design file so it’s dev-friendly from the start

• Instantly convert designs into production-ready code with Locofy

• Follow best practices that make collaboration between design & dev a breeze

In case you missed it, rewatch all sessions from the Hands-on Demo series.

[Paula]

Do you have any questions that need answering? Throw them here and we’ll reply during the live stream.

[LauraKalbag]

Thank you everyone for joining us live! Here’s my design file that I shared during the demo. Raymond kindly helped me with feedback and improvements on how to make it work well with Locofy.

Download the design file from Google drive (19MB, sorry!)

It’s a big file because of the libraries and images, so give it a minute to upload

[LauraKalbag]

And if you are curious about my design tokens and breakpoints demo… you can find the discussion and demo file here: Is it possible to create breakpoints modes like in figma? - #6 by azazy

[LauraKalbag]

Following up on some Penpot-related questions/feedback we missed in the live:

Dennis Krijgsman​​ would be nice if font awesome would be integrated

You can get all the Font Awesome icons from the excellent Iconify Penpot plugin:

Dennis Krijgsman ​​is it already possible to give elements own css class names?

Yes, you can do this with the fabulous Semantic Tagger Penpot plugin: