新功能:智慧動畫 — 讓您的原型動起來。 深入瞭解

跳過導覽

嵌入 Sketch 文件

最後更新日期:2023 年 7 月 28 日
閱讀時間:2 分鐘

透過嵌入功能,您可以在 Notion、GitHub 或 Jira 等平台上分享您的作品,甚至可以在個人網站或部落格上發佈您的設計。這表示您可以分享您的文件、畫板和原型,而不必向您的工作區成員發送個別邀請。

在嵌入文件之前,請確保工作區以外的人員可以存取該文件。 為此,您需要管理文件的分享設定,並授予文件的連結檢視權限。

  1. 開啟「公開」旁的存取權下拉式選單。
  2. 將公開存取層級設定為「檢視」。
  3. 啟用「可下載和檢查」選項。
  4. 按一下「複製連結」以取得嵌入文件所需的連結。
An image showing how to give viewing permissions to the documents link.

使用網頁應用程式中的分享設定,設定要嵌入其他平台的文件的權限 (2022 年 7 月)

嵌入的工作原理

有幾種方法可以嵌入您的 Sketch 文件

  • 您可以複製文件、畫板或原型的連結,並直接將其貼到任何支援 oEmbed 的網頁或文件中,例如 NotionMedium
  • 或者,您可以使用 iFramely 之類的工具,從同一個連結產生 HTML 程式碼片段。然後,您需要將此程式碼片段貼到網頁的 HTML 文件中。

注意事項:嵌入時,只會顯示您的文件、畫板或原型稿的最新版本。若要顯示文件的先前版本,您需要在嵌入之前複製該版本的連結。

像是 Notion 和 Medium 等平台允許您透過複製文件連結並貼到您想要顯示的頁面或文件中來嵌入內容。例如,將您的連結複製貼上到 Notion 文件中,您的畫板就會顯示在該文件中,就像您在瀏覽器中的網頁應用程式中查看它一樣。

複製您的文件連結。您可以在 Mac 應用程式的工作區視窗中,或在網頁應用程式中從瀏覽器的網址列複製文件連結

將您的文件連結貼上到您想要顯示它的網頁或文件中。

以下是將 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> 標籤之間。