新增:智能动画 — 为您的原型带来动感。 了解更多

跳过导航

嵌入 Sketch 文档

上次更新于 2023 年 7 月 28 日
阅读时间:2 分钟

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

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

  1. 打开公开旁边的下拉访问菜单。
  2. 将公开访问级别设置为查看
  3. 启用可以下载和检查选项。
  4. 点击复制链接以获取您需要嵌入文档的链接。
An image showing how to give viewing permissions to the documents link.

使用 Web 应用程序中的共享设置将文档的权限设置为嵌入其他平台(2022 年 7 月)

嵌入的工作原理

有两种方法可以嵌入您的 Sketch 文档

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

注意:使用嵌入时,只会显示您文档、画板或原型的最新更新。要显示文档的先前版本,您需要在嵌入之前复制该版本的链接。

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

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

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

以下是将 Sketch 文档嵌入 Notion 的样子。

使用 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>标记之间。