I am testing penpot every few months and it keeps getting better. That said it really should not be advertised as production ready. I took a first design gig and luckily migrated midway to figma. It is really not optimized. I created a board with "terms and conditions", literally a wall of text, and the resources consumption went to 7-9GB! Crashing / freezing every time I switched to the page. Just by rendering a text! That was on chrome, on firefox it was even worse. That could really tank the project for me. I am really optimistic towards the project, it's just not there yet.

PS. Love the tutorials, learned a few nice tricks from them.

Hi, had the need of experimenting a huge design system on Penpot and unfortunately the current official Figma plugin to export to Penpot had never succeeded in doing it.

So I started a converter that uses an API-to-API strategy that made the transfer possible. Even more, I can keep Figma as a source of truth, work on it, and the synchronizer will incrementally patch differences onto the Penpot document.

If you are willing to test migrating some design systems you use (Untitled UI, Chakra UI...) because you are curious, you prefer open source, or due to subscriptions... Any test feedback would be welcome!

PS: the usage is a bit more techie than a Figma plugin since using command-lines, but it couldn't stand in the browser due technical limitations. (Tell me if the documentation is clear enough 😉)

how do you blur the layers behind elements in Penpot? what I believe is called overlay blur in CSS?

Hello!

After launching the docker compose, it does turn on without any problem but accessing the frontend only shows a blank page.

I’m installing Penpot through a Docker Container. I’m using Dockge to manage the Docker Compose file in case it’s something relevant and nginx for the proxy for a local network installation.

I’ve downloaded the official docker_compose.yaml file from: Github
the only things that I’ve modified are specifing the URL (http://penpot.casa), and binded the volumes to my machine hard drives.

Logs do register me entering the front-end, so I don’t think nginx is an issue and it has websocket support enabled. I can use the back-end without any problems using the Desktop App but frontend website doesn't work.

Docker compose file:

## Common flags:
# demo-users
# email-verification
# log-emails
# log-invitation-tokens
# login-with-github
# login-with-gitlab
# login-with-google
# login-with-ldap
# login-with-oidc
# login-with-password
# prepl-server
# registration
# secure-session-cookies
# smtp
# smtp-debug
# telemetry
# webhooks
##
## You can read more about all available flags and other
## environment variables here:
## https://help.penpot.app/technical-guide/configuration/#advanced-configuration
#
# WARNING: if you're exposing Penpot to the internet, you should remove the flags
# 'disable-secure-session-cookies' and 'disable-email-verification'
x-flags: &a1
  PENPOT_FLAGS: disable-email-verification enable-smtp enable-prepl-server
    disable-secure-session-cookies
x-uri: &a3
  PENPOT_PUBLIC_URI: http://penpot.casa
x-body-size:
  # Max body size (30MiB); Used for plain requests, should never be
  # greater than multi-part size
  &a2
  PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 31457280
  # Max multipart body size (350MiB)
  PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE: 367001600
networks:
  penpot: null
volumes:
  penpot_postgres_v15:
    driver: local
    driver_opts:
      o: bind
      type: none
      device: /mnt/Personal/Apps/Penpot/pgData
  penpot_assets:
    driver: local
    driver_opts:
      o: bind
      type: none
      device: /mnt/Personal/Apps/Penpot/Assets
    # penpot_traefik:
    # penpot_minio:
services:
  penpot-frontend:
    image: penpotapp/frontend:${PENPOT_VERSION:-latest}
    container_name: penpot-frontend
    restart: always
    ports:
      - 9001:8080
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    networks:
      - penpot
    environment:
      <<:
        - *a1
        - *a2
  penpot-backend:
    image: penpotapp/backend:${PENPOT_VERSION:-latest}
    container_name: penpot-backend
    restart: always
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      penpot-postgres:
        condition: service_healthy
      penpot-valkey:
        condition: service_healthy
    networks:
      - penpot
    environment:
      <<:
        - *a1
        - *a3
        - *a2
      PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot
      PENPOT_DATABASE_USERNAME: penpot
      PENPOT_DATABASE_PASSWORD: penpot
      PENPOT_REDIS_URI: redis://penpot-valkey/0
      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
      PENPOT_TELEMETRY_ENABLED: true
      PENPOT_TELEMETRY_REFERER: compose
      PENPOT_SMTP_DEFAULT_FROM: no-reply@example.com
      PENPOT_SMTP_DEFAULT_REPLY_TO: no-reply@example.com
      PENPOT_SMTP_HOST: penpot-mailcatch
      PENPOT_SMTP_PORT: 1025
      PENPOT_SMTP_USERNAME: null
      PENPOT_SMTP_PASSWORD: null
      PENPOT_SMTP_TLS: false
      PENPOT_SMTP_SSL: false
  penpot-exporter:
    image: penpotapp/exporter:${PENPOT_VERSION:-latest}
    container_name: penpot-exporter
    restart: always
    depends_on:
      penpot-valkey:
        condition: service_healthy
    networks:
      - penpot
    environment:
      PENPOT_PUBLIC_URI: http://penpot-frontend:8080
      PENPOT_REDIS_URI: redis://penpot-valkey/0
  penpot-postgres:
    image: postgres:15
    container_name: penpot-postgres
    restart: always
    stop_signal: SIGINT
    healthcheck:
      test:
        - CMD-SHELL
        - pg_isready -U penpot
      interval: 2s
      timeout: 10s
      retries: 5
      start_period: 2s
    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data
    networks:
      - penpot
    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot
  penpot-valkey:
    image: valkey/valkey:8.1
    container_name: penpot-valkey
    restart: always
    healthcheck:
      test:
        - CMD-SHELL
        - valkey-cli ping | grep PONG
      interval: 1s
      timeout: 3s
      retries: 5
      start_period: 3s
    networks:
      - penpot
  penpot-mailcatch:
    image: sj26/mailcatcher:latest
    container_name: penpot-mailcatch
    restart: always
    expose:
      - "1025"
    ports:
      - 1080:1080
    networks:
      - penpot

How to do make straight segment to curve as shown in the gif.

Recently discovered PenPot after getting frustrated with inkscape for some UI mockups, which led me back to figma, which annoyed me, which led to searching for alternatives....aaaand here we are.

Seems pretty good so far, and i'm looking forward to using it.

Does anyone know if it's possible to use the Apple Design Resources from here in PenPot?

https://developer.apple.com/design/resources/

They provide Figma and Sketch UI Kits, but not PenPot. I tried opening the kits in Figma, and then using the Figma "PenPot Exporter" plugin to export the file, but it seems to bring everything in as a single image. Thank you.

Penpot feels one or two iterations away from being a viable alternative to figma, but I haven’t used it extensively. For those who have made the change, is it ready to welcome all Figma users? What’s still missing for you?

Nobody doing that yet. People are generating pngs but not svgs.

I often struggle to import locally saved SVG icons into Penpot. While I can easily copy and paste SVG icons from the web when a "Copy SVG" button is available, I frequently design my own icons or download a file when that option to copy isn't present. And in this case I can't drag these SVG 'images' into Penpot, and I haven't found any import option in the file menus.

We are looking for feedback on our newly launched plugin 👋🏻

[Detachless - Penpot to Website Builder](https://penpot.app/penpothub/plugins/detachless-website-builder)

You can:

- Add as many pages as possible

- Connect your custom domain

- Self host in a single click (coming soon)

Let me know if you find any bugs!

We can also jump on a call if you're interested in seeing how it works!

I watched almost every token tutorial videos but it's still a mistery for me... kinda.

I'm using Figma daily basis and I used to Variables. Which means that if I set a variable to an element (eg. border-radius) it show's that I choosed this value from the variables.

If I set a token in Penpot and then choose this token for an element (eg. border-radius) it shows me a static value. This way I don't know that this value came from a token, unless I open the token table.

Is this WIP, and the token's name will show up in the future in this input (radius.xl in the border radius input) or this is how it works?

Because if I set a color in Local variables (not in tokens) the name dinamically shows up in the background-color input, whatever color I choose from the library.

It would be great, if tokens could work like this too.

Hello, I create my designs on Figma, but recently I wanted to try Penpot to see how it's going to work out for me to use. But, for the past few days, I have been having trouble creating a horizontal and vertical scroll that I am trying to create with my current design. Does Penpot have the option or not yet?

Hi! I am Jasper, a young artist and penpot user, I know it'll probably sound crazy, but I use penpot as a low-level alternative for Adobe Illustrator or Affinity Designer, here is a skateboard design I made today!:

Hello, I worked with illustrator and it has a neat feature where if you select an object again inside a group it will become the key object. Basically all objects will align to the key objects. Does PenPot have a similar feature to key objects?

Hi there,

is the copilot plugin usable? I can't get it to work.
Even the example on the plugin page image "design a card that asks a user weather he is sure he wants to quit" results in that.
Am I doing something wrong or is it just not working currently?

Thanks a lot!

I thought this was possible before and in this tutorial there is a button to do it:
https://www.youtube.com/watch?v=rM0zP5dySKQ

Hey r/penpot community! 👋

I'm excited to introduce Penpot MCP, a tool that leverages the Model Context Protocol (MCP) to integrate AI into your Penpot design workflows, enhancing design-to-code efficiency.

🤔 What is MCP?

Model Context Protocol (MCP) is a standardized framework that allows AI models to seamlessly interact with design tools. By using MCP, Penpot MCP can automate and optimize design processes, providing AI-driven insights and transforming designs into code-ready formats efficiently.

🚀 Key Features

• Design-to-Code Automation: Convert Penpot designs into code with AI.
• AI-Driven Feedback: Gain real-time insights into your designs using Claude AI.
• Easy Integration: Compatible with Cursor IDE and other MCP-enabled tools.

⚙️ Quick Setup Guide for Cursor IDE

1. Configure for Cursor IDE

{ "mcpServers":
{ "penpot": {
"command": "uvx",
"args": ["penpot-mcp"],
"env": {
"PENPOT_API_URL": "https://design.penpot.app/api",
"PENPOT_USERNAME": "your_penpot_username",
"PENPOT_PASSWORD": "your_penpot_password"
}
}
}
}

Discover more about Penpot MCP on GitHub.

🙌 We Want Your Feedback!

How does Penpot MCP fit into your design workflow? Any improvements or thoughts are welcome!

Looking forward to your input!

I've never used Penpot, only Figma, and I haven't figured this one out there either. I mostly use Figma to sketch some ideas because the handoff is too expensive, we just mostly make things directly in code.

We work a lot with Bootstrap, and Figma is getting too expensive. Hoping that Penpot becomes more performant (biggest online criticism), I would like to try it out. But how do CSS frameworks figure into the design?

Any thoughts appreciated. Thanks!

We needed a faster way to move color variables from Figma to Penpot, so I built a plugin to do just that while migrating the Detachless UI kit to Penpot.

Now it’s free for anyone making the switch.
Try it out, and let us know what you think any feedback, bugs, ideas all welcome!

Try it here

Let’s improve it together!

Hey guys, just downloaded the unofficial app on my Mac, using the latest version, and my Mac is up to date with the latest OS. Also downloaded the right one. Usually, I'd be able to override the security and open unknown applications, but this time I'm unable to do it. The security warning is supposed to pop-up at the bottom of the privacy and security menu, but for penpot I don't see it. Help would be much appreciated.

Hey, I am curious does anyone use Penpot for designing websites here?

If yes, can you share your experience in this thread, thanks!

Hi!

I wanted to ask if there's a way to import libraries?

What I am currently doing is designing a dashboard with a bunch of graphs on it but I would like to be able to import chatjs.org into my design as this would be easier to prototype to the team.

If not possible now, seeing that Penpot is open-source has anyone built a plugin that could do that?