跳过导航

嵌入 Sketch 文档

上次更新于 2025 年 1 月 23 日
2 分钟阅读

通过嵌入,您可以在 Notion、GitHub 或 Jira 等平台上上下文中共享您的作品,甚至可以在个人网站或博客上发布您的设计。 这意味着您可以共享您的文档、画板和原型,而无需向您的工作区发送单独的邀请。

在嵌入文档之前,请确保工作区外部的人员可以访问该文档。 为此,您需要管理文档的共享设置,并向文档链接授予查看权限。

  1. 选择标题为 所有人 的选项卡。
  2. 将第一个选项设置为任何拥有链接的人员可以查看文档
  3. 启用检查和下载选项。
  4. 单击复制公共链接以获取嵌入文档所需的链接。
An image showing how to give viewing permissions to the documents link.

使用 Web 应用程序中的共享设置设置文档嵌入到其他平台中的权限(2025 年 1 月)

嵌入的工作原理

有几种嵌入 Sketch 文档的方法

  • 您可以复制文档、画板或原型的链接,并将其直接粘贴到任何支持 oEmbed 的网页或文档中,例如 NotionMedium
  • 或者,您可以使用像 iFramely 这样的工具,从同一个链接生成 HTML 代码片段。 然后,您需要将此代码段粘贴到网页的 HTML 文档中。

注意: 通过嵌入,只会显示您的文档、画板或原型的最新更新。 要显示文档的先前版本,您需要先复制该版本的链接,然后再嵌入它。

像 Notion 和 Medium 这样的平台允许您通过复制文档的链接并将其粘贴到您希望其出现的页面或文档中来嵌入内容。 例如,将您的链接复制并粘贴到 Notion 文档中,您的画板将出现在该文档中,就像您在浏览器中的 Web 应用程序中查看它一样。

复制文档的链接。 您可以从 Mac 应用程序的工作区窗口或 Web 应用程序中浏览器地址栏 复制文档的链接

将文档的链接粘贴到您希望其出现的网页或文档中。

这是在 Notion 中嵌入 Sketch 文档的样子。

使用 HTML 代码片段嵌入文档

要在任何其他类型的网页中嵌入您的 Sketch 文档,您需要为您的链接创建一个 HTML 代码片段。 这是一个您当前正在阅读的页面的 HTML 代码段的示例

<div class="iframely-embed">
<div class="iframely-responsive" style="padding-bottom: 50%; padding-top: 120px;">
<a href="/docs/data/#creating-a-text-data-source"
data-iframely-url="//cdn.iframe.ly/AULvNVA"></a></div></div>
<script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

要生成 HTML 代码片段,您可以使用像 iFramely 这样的工具。 使用 iFramely,只需将您的文档链接复制到标有“在此处粘贴链接”的字段中,然后按检查按钮。

获得代码段后,按复制代码按钮复制它。 然后,您可以将代码段粘贴到您希望文档、画板或原型出现的页面的 HTML 文档中。 不要忘记将其粘贴在文档的 html <body> </body> 标签之间。