开发工具

在 Penpot 中，你可以检查设计以获取测量值、查看属性、导出资产并获取可用于生产的代码。

检查设计

你可以在查看模式和工作区中激活检查模式。

在查看模式中

(视频略)

前往在查看模式中检查设计部分，了解如何在查看模式中激活检查模式。

在工作区中

(视频略)

在工作区中，选择右侧边栏中的 Inspect 标签页以进入检查模式。

检查模式提供了一个更安全的只读模式，因此开发者可以在工作区中工作，而不用担心破坏东西 ;)

获取距离和测量值

你可以轻松获取一个图层与其他图层或画板边缘之间的测量值和距离。

要获取距离：

• 点击一个图层，或在图层面板中选择它。
• 将鼠标悬停在其他图层上，以查看它们与所选图层之间的距离。
• 将鼠标悬停在画板上的空白区域或画板周围区域，以查看该图层到画板边缘的距离。

(视频略)

获取属性信息

在信息面板中，你可以看到关于图层样式和内容的规格说明。不同类型的图层可以拥有不同的属性集合。

(视频略)

复制属性信息

你可以通过按下悬停时显示在右侧的复制按钮，复制某个属性的值或整组属性。例如，你可以复制所有布局属性，也可以只复制宽度。

(视频略)

从图层复制 CSS 属性

要从图层复制 CSS 属性：

1. 选择一个或多个图层。
2. 右键点击以显示图层菜单。
3. 如果你只想获取所选图层的 CSS 属性，请按 Copy/Paste as... > Copy as CSS。
4. 如果你想获取所选图层以及所有包含图层的 CSS 属性，请按 Copy/Paste as... > Copy as CSS (nested layers)。

获取代码

按下代码标签页以获取实际的代码片段。选择一个图层，即可获得可直接使用的标记代码（SVG 和 HTML）以及样式代码（目前仅支持 CSS，但未来会支持更多）。

(视频略)

导出资产

导出选项位于信息面板底部。在工作区中设置的相同导出预设，也会在查看模式检查中可用。可以在代码模式中添加新的导出预设，但它们不会被持久保存。阅读更多关于导出资产的信息。