开源原型设计工具Penpot

news2024/12/30 1:04:16

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2061691.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis补充

Redis事务 Redis事务的概念 Redis 事务的本质是一组命令的集合。事务支持一次执行多个命令,一个事务中所有命令都会被序列化。在事务执行过程,会按照顺序串行化执行队列中的命令,其他客户端提交的命令请求不会插入到事务执行命令序列中。 …

JAVA多线程等待唤醒机制

为什么要处理线程间通信: 当我们需要多个线程来共同完成一件任务,并且我们希望他们有规律的执行,那么多线程之间需要一些通信机制,可以协调它们的工作,以此实现多线程共同操作一份数据。 比如:线程A用来生…

Java | Leetcode Java题解之第357题统计各位数字都不同的数字个数

题目&#xff1a; 题解&#xff1a; class Solution {public int countNumbersWithUniqueDigits(int n) {if (n 0) {return 1;}if (n 1) {return 10;}int res 10, cur 9;for (int i 0; i < n - 1; i) {cur * 9 - i;res cur;}return res;} }

4-1-5 步进电机原理2(电机专项教程)

4-1-5 步进电机原理2&#xff08;电机专项教程&#xff09; 4-1-5 步进电机原理2永磁式步进电机反应式步进电机混合式步进电机混合式步进电机基本原理 4-1-5 步进电机原理2 新的步进电机分类 永磁式步进电机 目前学习的转子都是永磁铁 反应式步进电机 软磁材料易受到周围磁场…

阿里云魏子珺:阿里云Elasticsearch AI 搜索实践

作者&#xff1a;阿里云魏子珺 【AI搜索 TechDay】是 Elastic 和阿里云联合主办的 AI 技术 Meetup 系列&#xff0c;聚焦企业级 AI 搜索应用和开发者动手实践&#xff0c;旨在帮助开发者在大模型浪潮下升级 AI 搜索&#xff0c;助力业务增长。 阿里云 Elasticsearch 的 AI 搜索…

Nginx笔记(高级)

扩容 通过扩容提升整体吞吐量 单机垂直扩容&#xff1a;硬件资源增加 云服务资源增加 整机&#xff1a;IBM、浪潮、DELL、HP等CPU/主板&#xff1a;更新到主流网卡&#xff1a;10G/40G网卡磁盘&#xff1a;SAS(SCSI) HDD&#xff08;机械&#xff09;、HHD&#xff08;混合&…

OpenCV几何图像变换(5)旋转和缩放计算函数getRotationMatrix2D()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算二维旋转的仿射矩阵。 该函数计算以下矩阵&#xff1a; [ α β ( 1 − α ) ⋅ center.x − β ⋅ center.y − β α β ⋅ center.x ( …

Linux 中断处理与内核线程化——以触摸屏中断为例

文章目录 1 什么是中断&#xff1f;2 传统的中断处理模型3 内核线程与用户进程4 中断线程化的理念5 devm_request_threaded_irq 与 request_irq 的比较6 触摸屏驱动中的中断线程化参考链接封面 本文探讨了 Linux 中断处理的传统模型与中断线程化的理念&#xff0c;以及在触摸屏…

【Python】计算直角三角形的 ∠MBC

有一个直角三角形 ABC&#xff0c;其中角 B 是直角&#xff08;90&#xff09;。点 M 是斜边 AC 的中点。我们需要根据边 AB 和 BC 的长度来计算角 ∠MBC。 在直角三角形中&#xff0c;如果一个角是直角&#xff0c;那么另外两个角的和是90。由于 M 是斜边的中点&#xff0c;根…

turtle画图知识

Turtle库是Python编程语言中的一个库&#xff0c;用于创建各种类型的图形&#xff0c;包括简单圆形、线条、路径和图片。它支持多种图形类型&#xff0c;并且可以绘制出各种复杂的形状。 以下是一些基本的使用方法&#xff1a; 1. 创建一个新的Turtle对象&#xff1a; pytho…

hyperf 协程作用和相关的方法

什么是协程 协程是一种轻量级的线程&#xff0c;由用户代码来调度和管理&#xff0c;而不是由操作系统内核来进行调度&#xff0c;也就是在用户态进行 判断当前是否处于协程环境内 在一些情况下我们希望判断一些当前是否运行于协程环境内&#xff0c; 对于一些兼容协程环境与…

RK3568平台(PWM篇)PWM驱动

一.PWM基础知识 PWM 全称为 Pulse Width Modulation&#xff0c;翻译成中文为脉冲宽度调制&#xff0c;它是一种数字信号控 制模拟电路的技术&#xff0c;可以通过改变高/低电平的占空比来控制平均电压或功率,从而达到对模拟 量的控制目的。 周期(T)&#xff1a;指一个完整的…

Vue条件判断:v-if、v-else、v-else-if、v-show 指令

在程序设计中&#xff0c;条件判断是必不可少的技术。在视图中&#xff0c;经常需要通过条件判断来控制 DOM 的显示状态。Vue.js 提供了相应的指令用于实现条件判断&#xff0c;包括&#xff1a;v-if、v-else、v-else-if、v-show 指令。 1、v-if 指令 v-if 指令可以根据表达式…

机器学习 之 线性回归算法

目录 线性回归&#xff1a;理解与应用 什么是线性回归&#xff1f; 一元线性回归 正态分布的重要性 多元线性回归 实例讲解 数据准备 数据分析 构建模型 训练模型 验证模型 应用模型 代码实现 线性回归&#xff1a;理解与应用 线性回归是一种广泛使用的统计方法&…

企业高性能web服务器,原理及实例

一、Web 服务基础介绍 正常情况下的单次web服务访问流程&#xff1a; 1.1 Web 服务介绍 1993年3月2日&#xff0c;中国科学院高能物理研究所租用AT&T公司的国际卫星信道建立的接入美国SLAC国家实 验室的64K专线正式开通&#xff0c;成为我国连入Internet的第一根专线。 1…

Mycat分片-垂直拆分

目录 场景 配置 测试 全局表配置 续接上篇&#xff1a;MySQ分库分表与MyCat安装配置-CSDN博客 续接下篇&#xff1a;Mycat分片-水平拆分-CSDN博客 场景 在业务系统中, 涉及以下表结构 ,但是由于用户与订单每天都会产生大量的数据, 单台服务器的数据 存储及处理能力是有限…

0x01 GlassFish 任意文件读取漏洞复现

参考文章&#xff1a; 应用服务器glassfish任意文件读取漏洞 - SecPulse.COM | 安全脉搏 fofa 搜索使用该服务器的网站 网络空间测绘&#xff0c;网络空间安全搜索引擎&#xff0c;网络空间搜索引擎&#xff0c;安全态势感知 - FOFA网络空间测绘系统 "glassfish"&…

VUE3-nest前后端部署教程-----4.服务器linux中部署Node.js环境

一.安装分布式版本管理系统Git (Alibaba Cloud Linux 3/2、CentOS 7.x) sudo yum install git -y 二.使用Git将NVM的源码克隆到本地的~/.nvm目录下&#xff0c;并检查最新版本。 git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && gi…

仿Muduo库实现高并发服务器——Server.hpp框架的简单描述

EventLoop模块在本项目中的简单使用&#xff1a; 下面这张图 是channel模块&#xff0c;poller模块&#xff0c;TimerWheel模块&#xff0c;EventLoop模块&#xff0c;LoopThreadPool模块进行组合。便于大家对这个项目的理解&#xff0c;因为代码看起来挺复杂的。 下面这个图&…

2024河南萌新联赛第六场题解

这场的出题组是郑州大学acm实验室&#xff0c;验题组是郑州大学和郑州轻工业大学的志愿者同学们。 官方题解大部分内容是我写的&#xff0c;B题思路部分是对应的出题人自己写的&#xff0c;E题思路以及代码都是对应的出题人写的因为我不会写这个题&#xff0c;题目的题面&…