使用 Penpot 组件构建设计系统
内容提要
Penpot是一个开源设计工具，旨在将设计与代码对齐。其新的组件系统允许创建可重用的构建块，促进一致性、灵活性和更容易的维护。Penpot的独特方法通过使用相同的技术和标准，使设计师和开发人员更有效地进行协作。组件可以嵌套和从外部库导入，并且重新设计的资源面板有助于组织设计系统。Penpot还支持组件配置和代码片段的导出。通过专注于真实的CSS布局和开发人员友好的设计，Penpot弥合了设计师和开发人员之间的差距。
延伸解读
组件变体与命名约定
Penpot 允许通过组件名称中的斜杠（/）来创建变体，例如将按钮命名为 Button/primary 和 Button/secondary。这种命名方式不仅便于在资源面板中组织组件，还能在实例中快速切换不同变体。变体共享相同的基本结构，但可以在颜色、尺寸或状态等特定方面有所不同，从而在保持一致性的同时提供灵活性。
嵌套组件与外部库导入
Penpot 的组件可以嵌套使用，即在一个组件内部放置其他组件，从而构建出更复杂的 UI 元素。这种嵌套方式类似于开发中的组件组合。此外，组件可以来自不同的文件甚至不同的组织，用户能够从外部库导入组件，例如 UI 套件和图标集。Penpot 维护了一个不断增长的资源列表，包括 Material Design 等大型设计系统和流行的图标库，方便团队复用现有资源。
布局调整与真实环境测试
Penpot 的组件实例允许修改 Flex 和 Grid 布局，这使设计师能够直接在工具中测试组件在不同布局场景下的表现。由于 Penpot 使用真实的 CSS 布局技术，组件在实例中的行为更接近实际开发环境。设计师可以将组件放入其他 Grid 或 Flex 布局中，观察其如何适应网站或应用的不同位置，从而提前发现并解决布局问题，减少设计与开发之间的摩擦。
代码导出与文档注释
Penpot 的组件本质上是 Web 就绪的代码，通过 Inspect 面板可以快速获取组件的布局属性、样式以及完整的代码片段。这一功能对所有用户完全免费。此外，Penpot 包含注释功能，帮助团队为组件添加文档说明。这对于维护清晰的设计系统至关重要，能确保开发人员准确理解组件的用途和用法，促进更顺畅的交接流程。
Q&A
Penpot的组件系统有什么优势？
Penpot的组件系统允许创建可重用的构建块，促进一致性、灵活性和更容易的维护。
如何在Penpot中创建组件？
在Penpot中，选择要包含的对象，然后从上下文菜单中选择“创建组件”，即可将选择的对象转换为可重用元素。
Penpot如何促进设计师与开发人员的协作？
Penpot通过使用相同的技术和标准，使设计师和开发人员能够更有效地沟通和协作，减少设计与代码之间的差距。
Penpot支持哪些组件配置功能？
Penpot支持组件的变体和覆盖，用户可以切换变体、隐藏元素、改变样式或修改组件的布局。
Penpot的资产面板有什么新设计？
Penpot的资产面板经过重新设计，便于用户访问和组织组件，支持将颜色和排版作为可重用样式存储。
Penpot如何导出组件代码？
用户可以使用Penpot的检查面板快速获取所有组件的布局属性和样式，以及完整的代码片段，方便开发人员使用。
