Feature Request: Export to HTML Plugin

Help us improve Penpot
1

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.

7 Likes
2

Here are more similar Figma plugins (the forum blocked me from posting the rest because I’m a new user):

3

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.

1 Like
4

@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.)

5

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.

6

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

1 Like
7

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:

  1. 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.
  2. 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.
  3. Add raster images as PNG links to our Lunacy cloud (covered by CDN).
  4. Embed other graphic content as SVGs.
8

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

1 Like
9

It would be really nice to have this. Looking forward to testing it :grinning:

1 Like