在线协作,开源的设计和原型创作平台:penpot

penpot:面向团队,设计自由- 精选真开源,释放新价值。

image

概览

Penpot 是一款专为跨职能团队量身定制的开源设计软件,与行业领先的 Figma 齐名,提供了一个强大而灵活的在线设计解决方案。其最大的亮点在于,用户不仅可以免费享用其云端服务,还能通过 Docker 轻松实现私有化部署,确保数据安全与自主控制。

背靠实力企业持续研发,Penpot 自诞生以来经历了多年的迭代与优化,保持着稳定的版本更新,确保用户始终能够获取最新功能与技术支持。作为首个真正意义上服务于跨领域团队的开源设计及原型制作平台,Penpot 打破了传统设计工具的局限,实现了设计与开发团队间的无缝协作,极大地提升了工作效率。

核心特色概览:

  • 跨领域协同的优化体验:Penpot 精心设计了工作流程,确保设计与开发团队能够在一个平台上流畅对接,减少沟通成本,避免了传统设计到开发过程中繁琐的交接环节,让创意与实现更加紧密相连。

  • 广泛兼容的多平台支持:得益于Web技术,Penpot 可在任何现代浏览器上流畅运行,无论是Windows、macOS还是Linux用户,都能享受到一致且高质量的设计体验,无需担心操作系统差异带来的限制。

  • 拥抱开放标准的前瞻设计:选择SVG作为核心文件格式,不仅保证了设计作品的高质量输出与可编辑性,还促进了与其他矢量编辑工具的兼容性,方便设计资源的复用与共享,降低了技术门槛,提升了团队协作的灵活性。

image


探索Penpot

  • 画板

画板跟同类设计软件的画布功能差不多,并具有固定的边缘。你可以根据你的需要,选择一个特定的屏幕或打印用的尺寸。

  1. **创建画板:**点击工具栏中 “移动” 箭头正下方的第一个方形图标。点击并拖动箭头来创建一个自定义尺寸的画板。你也可以在 “设计属性” 边栏选择包揽设备最常用分辨率和标准打印尺寸的预设模板。

  2. **选择和移动画板:**点击画板的名称或没有图层的区域。当边框变成绿色时,代表着你选择成功了。一旦选择了,按住 “Shift” 键,然后点击并拖动画板来移动它。

  3. **设置画板为缩略图:**选择一个画板并点击右键。在菜单上,选择 “设置为缩略图”。选定的画板将作为文件缩略图显示在仪表板的卡片上。

image

  • 色盘

色盘可以帮你省去寻找取色器的功夫,直接在视区中选择想要的颜色。如果想切换到另一个已存颜色库,可以在菜单操作。

  1. **显示/隐藏色盘:**有3种方法可以做到这一点:从导航栏左上方的主菜单中选择,点击工具栏上的色盘按钮(图中圈起来的),或在取色器上使用色盘启动功能。

  2. **色盘菜单:**点击色盘左边的3个小点就可以打开菜单。在那里,你可以在已存颜色库之间、在大和小的缩略图尺寸之间自由切换。

  3. **添加颜色:**若要填充颜色,先选择图层形状并从调色板中点选所需的颜色。若要将颜色添加在笔划上,在点击图层的同时按 “Alt” 键。

image

  • 组件

组件指一件或一组可以在用户档案中重复使用的对象。组件被分为主组件和组件副本。由于用户档案中使用的所有组件副本都是链接的,对主组件所做的任何改变都将反映在所有组件副本中。

另外,也可以为组件副本的一些特别改动创建自定义选项,允许副本保留这些独特的变化,同时亦与主组件保持同步。

  1. **创建组件:**点击并拖动你的光标,选择一个或一组对象。在你的选择上点击右键,从对象菜单中选择 “创建组件”。

  2. **为组件创建活页夹:**首先创建一个组件。然后,以这个方式重新命名该组件:“活页夹名称/组件名称”,例如“Buttons/Button-1”。

  3. **更新主组件:**如果你想把你在组件副本中所作的改动应用到主组件上,在组件副本上点击右键,选择 “更新主组件”。

  4. **自定义选项:**自定义选项的组件副本会在图层列表中用 “*” 标示。若想令主组件的变动影响到组件副本,你可以通过右击副本并选择 “重置自定义选项” 来进行重置。

image

  • 网格

网格帮助你以几何方式排列内容。 Penpot有三种类型的网格:正方形、列和行。

  • **添加网格:**你可以在一个画板上创建网格。首先,选择画板。在右侧的边栏,选择 “网格和布局”,然后点击 “+” 来添加一个网格。你可以根据你的需要增加网格的数量。

  • **隐藏和删除网格:**在 “网格和布局” 下列出了你现有的网格。将鼠标悬停在一个网格列上可以看到一个眼睛图标以及旁边的 “-” 图标。如要隐藏网格,点击眼睛。如要删除,点击 “-”。

  • 原型设计

你可以通过连接画板来建立互动性原型。这些原型可以帮助你了解用户将如何使用你的产品。

  1. **连接画板:**首先,打开一个至少有两个画板的档案。然后,点开原型模式选择一个对象(可以是形状/画板/对象组)作为互动的触发器。从选定的对象拖动鼠标至目标画板以创建关联。这将自动创建一个流程起点。你可以通过点击原型卷标上的播放按钮来测试你原型的运行。

  2. **固定物件:**选择一个对象并打开右边的设计侧栏。在限制条件部分里,选择 “滑动时固定”。当你在视图模式下滑动屏幕时,对象将被固定在原处。

image

  • 评论

你可以使用评论来与团队成员沟通并给予意见。

  1. **添加评论:**先点击工作区工具栏上的评论图标(图中圈起来的)。然后,选择你想留下评论的地方。在你写完评论后,选择 “发布” 便能留下评论。

  2. **回复评论:**点击某个评论(显示为含数字的圆圈),然后在弹出的评论窗口底部的文本框中写下你的回复。

  3. **将评论线程标示为已读:**点击评论弹出式窗口的右上方的复选框,评论便会从你的未读评论通知中消失。

image


信息

截至发稿概况如下:

  • 软件地址:https://github.com/penpot/penpot

  • 软件协议:MPL 2.0

  • 编程语言

语言占比
Clojure71.7%
JavaScript19.9%
SCSS6.4%
HTML0.9%%
Shell0.4%
Java0.3%
Other0.4%
  • 收藏数量:27.9K

Penpot 不仅是一个设计工具,更是一个旨在促进团队间高效协作、提升设计与开发流程整合度的综合性平台。鉴于设计工作跨平台操作的普遍性,优化跨平台兼容性,确保在不同操作系统、浏览器乃至移动设备上均能展现出一致且优质的用户体验,是另一个重要课题。这不仅需要对现有技术栈进行细致的调整与测试,还涉及到对新兴技术标准的跟踪与采纳,确保PenPot能够与时俱进,适应多元化的工作环境。

热烈欢迎各位在评论区分享交流心得与见解!!!


声明:本文为辣码甄源原创,转载请标注"辣码甄源原创首发"并附带原文链接。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt与MySQL连接

QT连接Mysql数据库(详细成功版)-CSD N博客 我的MySQL是64位的,所以我的Qt的套件也需要是64位的 遇到的问题: (available drivers中已经有QMYSQL QMYSQL3,还是not loaded) QSqlDatabase: QMYS…

SQL注入-基础知识

目录 前言 一,SQL注入是什么 二,SQL注入产生的条件 三,学习环境介绍 四、SQL注入原理 五,SQL中常用的函数 六,关于Mysql数据库 前言 在网络安全领域中,sql注入是一个无法被忽视的关键点&#xff0c…

安卓 app icon大小 安卓app界面尺寸大小

移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的…

【C++】STL — List的接口讲解 +详细模拟实现

前言: 本章我们将学习STL中另一个重要的类模板list… list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。list的底层是带头双向循环链表结构,双向链表中每个元素存储在互不相关的独立节点中&#xf…

Conntroller内存马详解(2)

流程分析 获取context 第一种:getCurrentWebApplicationContext() // getCurrentWebApplicationContext方法获得的是一个XmlWebApplicationContext实例类型的Root WebApplicationContext。WebApplicationContext context ContextLoader.getCurrentWebApplication…

docker部署nginx并实现https

文章目录 docker部署nginx并实现https1、服务器环境2、安装docker3、准备证书4、准备nginx配置文件和dockerfile文件5、创建nginx镜像与容器6、验证访问 docker部署nginx并实现https 1、服务器环境 [rootliuyanfen12 ~]#systemctl stop firewalld [rootliuyanfen12 ~]#setenf…

Flutter笔记:美工设计.导出视频到RIVE

Flutter笔记 美工设计.导出视频到RIVE - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28…

RabbitMQ之顺序消费

什么是顺序消费 例如:业务上产生者发送三条消息, 分别是对同一条数据的增加、修改、删除操作, 如果没有保证顺序消费,执行顺序可能变成删除、修改、增加,这就乱了。 如何保证顺序性 一般我们讨论如何保证消息的顺序性&…

【Linux】进程的隔离和控制:namespace 隔离、cgroup 控制

文章目录 五、namespace 隔离dd -- 读取、转换并输出数据mkfs -- 格式化文件系统df -- 显示文件系统磁盘使用情况mount -- 加载文件系统到指定的加载点unshare -- 创建子进程,同时与父程序不共享namespace一个 demo 六、cgroup(Control Group) 相关命令pidstat -- 监…

【LeetCode刷题记录】230. 二叉搜索树中第K小的元素

230 二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 个最小元素(从 1 开始计数)。 示例 1: 输入:root [3,1,4,null,2], k 1 输出&#xff1…

2024年深圳杯东三省联赛数模竞赛A题代码改进-更加合理的结果

4月下旬深圳杯开赛后第二天就推出了完整版的论文,经过长达半个月大家再售后群的讨论分析,我们又重新对之前思路下写的代码进行了改进。本次改进的结果,我们特地参考了网上一些常见的火箭及其相关的级别分离高度:(我们的…

c语言刷题——输出图案

1.输出用“*”组成的X形图案 题目:请打印用“*”组成的X形图案 描述: 多组输入,一个整数(2~20),表示输出的行数,也表示组成“X”的反斜线和正斜线的长度。 输出描述: 针对每行输…

【C语言】指针篇- 深度解析Sizeof和Strlen:热门面试题探究(5/5)

🌈个人主页:是店小二呀 🌈C语言笔记专栏:C语言笔记 🌈C笔记专栏: C笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…

零基础学习数据库SQL语句之查询表中数据的DQL语句

是用来查询数据库表的记录的语句 在SQL语句中占有90%以上 也是最为复杂的操作 最为繁琐的操作 DQL语句很重要很重要 初始化数据库和表 USE dduo;create table tb_emp(id int unsigned primary key auto_increment comment ID,username varchar(20) not null unique comment…

大语言模型中的第一性原理:Scaling laws

大语言模型的尺度定律在大语言模型的训练过程中起到了非常重要的作用。即使读者不参与大语言模型的训练过程,但了解大语言模型的尺度定律仍然是很重要的,因为它能帮助我们更好的理解未来大语言模型的发展路径。 1. 什么是尺度定律 尺度定律&#xff08…

stamps做sbas-insar,时序沉降图怎么画?

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

【跟我学RISC-V】(二)RISC-V的基础知识学习与汇编练习

写在前面: 这篇文章是跟我学RISC-V的第二期,是第一期的延续,第一期主要是带大家了解一下什么是RISC-V,是比较大体、宽泛的概念。这一期主要是讲一些基础知识,然后进行RISC-V汇编语言与c语言的编程。在第一期里我们搭建了好几个环…

WPF之绑定验证(错误模板使用)

1,前言: 默认情况下,WPF XAML 中使用的绑定并未开启绑定验证,这样导致用户在UI上对绑定的属性进行赋值时即使因不符合规范内部已抛出异常(此情况仅限WPF中的数据绑定操作),也被程序默认忽略&…

4.【Orangepi Zero2】Linux定时器(signal、setitimer),软件PWM驱动舵机(SG90)

Linux定时器(signal、setitimer),软件PWM驱动舵机(SG90) signalsetitimer示例 软件PWM驱动舵机(SG90) signal 详情请看Linux 3.进程间通信(shmget shmat shmdt shmctl 共享内存、si…

【计算机网络】循环冗余校验:Cyclic Redundancy Check

1. 任务目标 利用循环冗余校验(CRC)检测错误。 循环冗余校验(英语:Cyclic redundancy check,通称 CRC)是一种根据网上数据包或计算机文件等数据产生简短固定位数校验码的一种散列函数,主要用来…