开源原型设计工具Penpot

Penpot是一个现代化、开源的协同设计平台，专为跨职能团队打造，提供了强大的在线设计和原型制作功能。

以下是对Penpot的详细介绍：

一、平台特点

1. 开源与免费：Penpot是一个完全免费且开放源代码的项目，允许社区贡献和定制，用户还可以选择将其部署到自己的服务器上，确保数据的安全与自主控制。
2. 跨平台与兼容性：Penpot基于Web技术构建，不依赖于特定的操作系统，可在任何现代浏览器上流畅运行，支持Windows、macOS和Linux等操作系统。此外，它还选择了SVG作为核心文件格式，保证了设计作品的高质量输出与可编辑性，并促进了与其他矢量编辑工具的兼容性。
3. 多用户协作：支持多用户实时查看和编辑项目，团队成员可以共同创建、分享和迭代设计项目，提高工作效率并简化工作流程。

二、核心功能

1. 设计工具集：内置矢量绘图工具，支持形状、文本、图像操作，以及自定义颜色和样式，满足设计师的各种需求。
2. 原型设计：允许用户创建交互式原型，设置页面间跳转，预览并分享给团队或客户，以便更好地测试和验证设计想法。
3. 资产库：管理重复使用的元素，如图标、照片和图形，保持设计的一致性，并提升团队协作的效率。
4. 版本控制：跟踪项目的每个更改，并允许用户轻松回滚到以前的状态，确保设计项目的稳定性和可追溯性。
5. 权限管理：提供精细的权限控制功能，允许管理员设置团队成员的角色和访问级别，保护敏感信息。

三、技术优势

1. 技术栈：Penpot采用了React、Puppeteer、Node.js和MongoDB等现代技术栈，确保了平台的性能和稳定性。同时，它还提供了GraphQL API，方便与其他工具和服务集成。
2. 微服务架构：遵循微服务架构原则，使各个组件能够独立开发和扩展，保证了系统的可维护性和伸缩性。
3. 隐私与安全：所有数据都经过加密传输，保护用户的创意不受侵犯。

四、应用场景

Penpot广泛应用于产品设计、UI/UX设计、网站开发等领域。它可以帮助团队实现设计与开发之间的无缝协作，减少沟通成本，提高项目的整体效率和质量。

五、本地部署

1、下载yml文件

https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

version: "3.8"
networks:
  penpot:
volumes:
  penpot_postgres_v15:
  penpot_assets:
services:
  penpot-frontend:
    image: "penpotapp/frontend:latest"
    restart: always
    ports:
      - 9001:80
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    networks:
      - penpot
    labels:
      - "traefik.enable=true"
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password

  penpot-backend:
    image: "penpotapp/backend:latest"
    restart: always

    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis
    networks:
      - penpot
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification enable-smtp enable-prepl-server
      # - PENPOT_PREPL_HOST=0.0.0.0
      - PENPOT_PUBLIC_URI=http://localhost:9001
      - PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
      - PENPOT_DATABASE_USERNAME=penpot
      - PENPOT_DATABASE_PASSWORD=penpot
      - PENPOT_REDIS_URI=redis://penpot-redis/0
      - PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
      - PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets
      - PENPOT_TELEMETRY_ENABLED=true
      - 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=
      - PENPOT_SMTP_PASSWORD=
      - PENPOT_SMTP_TLS=false
      - PENPOT_SMTP_SSL=false
  penpot-exporter:
    image: "penpotapp/exporter:latest"
    restart: always
    networks:
      - penpot

    environment:
      # Don't touch it; this uses internal docker network to
      # communicate with the frontend.
      - PENPOT_PUBLIC_URI=http://penpot-frontend

      ## Redis is used for the websockets notifications.
      - PENPOT_REDIS_URI=redis://penpot-redis/0

  penpot-postgres:
    image: "postgres:15"
    restart: always
    stop_signal: SIGINT
    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-redis:
    image: redis:7
    restart: always
    networks:
      - penpot

  penpot-mailcatch:
    image: sj26/mailcatcher:latest
    restart: always
    expose:
      - '1025'
    ports:
      - "1080:1080"
    networks:
      - penpot

 打开终端或命令提示符，切换到包含docker-compose.yaml文件的目录，然后运行以下命令来启动Penpot服务：

docker-compose -p penpot -f docker-compose.yaml up -d

• 在浏览器中输入http://localhost:9001（或者你在docker-compose.yaml文件中设置的端口号），即可访问Penpot的Web界面。

 

六、社区与生态

Penpot拥有一个活跃的开源社区，用户可以在其中分享经验、交流心得，并参与到平台的开发和改进中来。此外，Penpot还提供了丰富的文档和教程资源，帮助用户快速上手并充分利用平台的功能。

综上所述，Penpot是一个功能强大、易于集成且注重隐私安全的开源协同设计平台。它为跨职能团队提供了高效的在线设计和原型制作解决方案，有助于提升团队协作效率并推动项目的成功实施。