Hello! I ran across a Figma plugin that could export a project into HTML and CSS, and found other community plugins that do the same:
I would love to see a similar plugin or feature in Penpot for those of us who design websites.
Hello! I ran across a Figma plugin that could export a project into HTML and CSS, and found other community plugins that do the same:
I would love to see a similar plugin or feature in Penpot for those of us who design websites.
Here are more similar Figma plugins (the forum blocked me from posting the rest because I’m a new user):
It’s quite a popular plugin in the Figma community, would be happy to see this later on in the future in the Penpot community.
@candidexmedia: What would you like to use the plugin for? (To export the project for testing as a file, provide a code foundation for HTML code, use figma as HTML editor etc.)
For Figma, I believe it’s used to provide a code foundation for HTML code. So, someone could design a landing page on Penpot, export the board as HTML + CSS, make some changes, and host the files on a static site server like Netlify or GitHub pages. This could be useful for those who wants to quickly test website ideas, design and host landing pages, and/or have limited web development skills.
Canva has started offering a visual site creation function, but you can’t export the HTML + CSS from the app.
Personally, after having the approval of my design, I’d like to create snippets of code I then use as widgets inside of tools like Grafana for example.
Having a simple HTML and CSS export from Penpot would be super valuable
Just wanted to update this thread with an example from another design app:
Lunacy recently introduced Linked Designs, which allows to edit and update the appearance of live web pages from the design app:
Here are the steps they describe:
- Copy the link to the CSS file in Lunacy and add it to your HTML document. Stick to the CSS styles and color variables in the code.
- Write a JS script for fetching the JSON file with text content key/value pairs and a function that will output text by key values. Add texts to your HTML document using this function and respective keys.
- Add raster images as PNG links to our Lunacy cloud (covered by CDN).
- Embed other graphic content as SVGs.
Just to add as I am currently building a project workflow with figma to react, and since penpot is working on figma import, I have notice an open source repo figma-api-demo/figma-to-react at master · figma/figma-api-demo · GitHub which could maybe be useful to build something similar for penpot
It would be really nice to have this. Looking forward to testing it
I noticed the main guy at Teleport HQ (Paul Brie) mentioned Penpot in their Discord channel and how they are looking into it and that:
“The plugin is not open-source (yet). We don’t have a Penpot integration (yet).”
Which is a very very good sign as Teleport HQ is an amazing product!!
Hi, I’m also interested in having a plugin to export my design not only to HTML+CSS, but also to Bootstrap or Materialize or any other.
I have read the forum and I have not found any work in progress on this. If there is one, please let us know.
I don’t have much experience in design, but I work for a company that has a UI designer and I am a programmer with lots of experience in programming, although I have never programmed in Clojure.
So far so good.
We would like to contribute to this project with an external tool (as we can’t program it in .clj) to export a penpot board to HTML+CSS.
Maybe we can do it in PHP or C++ and then you can port it to .clj or call from penpot to PHP or the c++ executable.
Not knowing penport in deep as we have used it only for a few weeks, I think the process would be something like this:
The programming of this is fairly simple, the main workload being the creation of the definitions/transformations file. I hope you already have something done and/or you can take over that task.
We are into a project that finishes by the end of the year, so our resources will not be available after that.
Should you find this proposal interesting, please let us know.
Cheers
FYI, I was just able to get chatgpt 4 to produce reasonable looking html and css by pasting in a screenshot. I was specifically interested in the slide designs since I actually want to make slides in markdown with marp or pandoc but have some options for nicer design.