使用 Penpot 进行开源设计协作

当一个设计师团队共同进行一个项目时，最重要的目标之一就是一致性。无论您是出于企业形象还是仅仅为了视觉凝聚力而需要一致的外观，页面和屏幕的外观和布局在任何给定的项目中都必须合理地相似。作为一名独立艺术家，做到这一点已经很困难了，而随着贡献者的增加，情况变得更加复杂。当设计团队的几个模型必须经过客户批准、可访问性专家签字，然后由程序员团队翻译时，这变成了一项艰巨的任务。有了合适的工具，这一切都变得困难但可管理，而完成这项工作的开源工具就是 Penpot。

Penpot 是一个在线设计工作区，设计师可以在其中创建或导入图形元素、创建模型，并与客户和协作者共享这些模型。它是开源的，并且依赖于像 SVG 这样的开放格式，这意味着您的贡献者在他们用来贡献资产的工具方面有很多选择。要试用 Penpot，请访问 Penpot.app 并创建一个帐户。

Penpot 入门

登录后，您将看到项目页面。这里有一些演示文件，旨在为您提供 Penpot 界面的概述。Penpot 中的一个项目可以有多个页面。在页面面板中选择一个页面以查看。

图片来源：

（Seth Kenlon，CC BY-SA 4.0）

Penpot 中的页面不像现实世界中的页面。Penpot 页面是一个无限画布。中键单击并拖动以移动画布。

要放大和缩小，请按键盘上的 Ctrl 键，然后使用鼠标滚轮或在您使用的触控板或平板电脑上执行等效操作。

缩放是一个特别有用的约定，因为 Penpot 通常用于设计旨在滚动而不是分页的屏幕内容。

创建画板

无限画布意味着您可以使用同一个工作区来显示同一页面类型的几种不同选项。您可以设计浅色和深色主题、移动和桌面版本，以及每个版本的几个不同迭代。因为一切都在画布上，所以您需要一种方法来定义设计的区域，而在设计应用程序的术语中，这称为画板。画板是一个容器（在 CSS 术语中，可以将其视为 div），用于模型。它是当有人要求查看您的设计想法时您将展示的画布部分。

要创建画板，请单击左侧工具栏中的“画板”图标，或者只需按键盘上的 A 键。

图片来源：

^{（Seth Kenlon，CC BY-SA 4.0）}

在画布上单击并拖动以创建画板。如果您正在为特定的屏幕或页面尺寸进行设计，则可以使用画板来表示它。如果您需要非常具体的尺寸，可以在 Penpot 界面右侧的属性面板中调整画板的尺寸。

图片来源：

^{（Seth Kenlon，CC BY-SA 4.0）}

您也可以在文本字段中执行基本数学运算。例如，如果您知道您的设计尺寸为 1920 x 1080，但您需要允许向下滚动相当于五个屏幕的高度，请输入 1080*5 作为高度，Penpot 会将其转换为 5400。

在 Penpot 中绘图

Penpot 主要使用 SVG（可缩放矢量图形）作为其设计元素。SVG 是一种结构化且开放的格式，Web 开发人员可以轻松地将其转换为代码。由于此功能，在 Penpot 中绘图就像在 Inkscape 中绘图一样容易，同样重要的是，它很容易对齐、复制、重用和导出以在任何其他应用程序中使用。

图片来源：

^{（Seth Kenlon，CC BY-SA 4.0）}

在 Penpot 中，您可以使用以下绘图工具

• 矩形 (R)：绘制矩形，并在属性面板中调整圆角和填充
• 椭圆 (E)：绘制椭圆和圆形
• 文本 (T)：创建文本元素
• 图像 (Shift+K)：导入位图图像
• 曲线 (Shift+C)：带有贝塞尔曲线的钢笔
• 路径 (P)：钢笔工具

您可以在界面右侧的属性面板中调整所有设计元素。大多数可以调整的内容也映射到 CSS 属性，因此在某种程度上，您是在图形界面中为 Web 设计，这意味着开发团队可以更轻松地准确地将设计转换为实现。

资源

确保设计一致性的最简单方法之一是重用资源。设计师必须绘制基本相同的按钮的次数越少，忘记圆角或尺寸错误的机率就越少。构建一个设计元素库，并使这些元素成为设计师的词汇表。

为您的项目创建组件库非常容易。设计完一个元素后，右键单击它，然后选择创建组件。该项目将添加到您项目的资源库中。

图片来源：

^{（Seth Kenlon，CC BY-SA 4.0）}

您可以通过按键盘上的 Alt+I 键或单击界面左下角的“资源”图标来访问您的资源库。

图片来源：

^{（Seth Kenlon，CC BY-SA 4.0）}

评论和反馈

健康的反馈循环对于协作至关重要，提供异步反馈的一种方式是评论 (C) 工具。使用评论工具，项目协作者可以在工作区中的任何位置安全地发布问题和意见。评论是线程式的，因此对话在一个评论块内进行，并且当问题得到解决后，可以删除评论线程。

原型

交互式媒体的设计与杂志广告或广告牌的设计不同。事物会根据观看者的选择和应用程序状态而变化。为了捕捉您的设计在用户交互时可能经历的不同状态，您可以构建原型，无需任何编码。

原型允许您将任何设计元素设置为触发器，以检测单击或鼠标事件，并执行诸如导航到另一个画板或打开叠加层之类的操作。您的应用程序实际上不会工作，但它看起来和行为都像在工作。

使用开源进行设计

Penpot 是一个令人惊叹且有趣的工具，不仅作为一个设计和原型平台，而且作为一个在线 SVG 插图应用程序。使用 Penpot 来模拟应用程序，以便您可以在编写代码之前了解用户交互，使用它来鼓励设计贡献，并促进团队之间的协作。

如果您想开始使用，但不确定从哪里开始，请尝试在 Penpot 中打开这个很棒的演示项目，以了解组件是如何存储和连接的。