Sketch 100 — Everything new in 3 minutes. Learn more

Sketch 100 — Everything new in 3 minutes. Learn more
Skip Navigation
Documentation Sharing and collaborating Sharing and viewing documents Embedding Sketch documents

Embedding Sketch documents

Last updated on 28 Jul 2023
2 min read

With embeds, you can share your work in context on platforms like Notion, GitHub or Jira — or even publish your designs on a personal website or blog. That means you can share your documents, Artboards and prototypes without having to send out individual invitations to your Workspace.

Before you embed a document, make sure it’s accessible to people outside of your Workspace. To do this, you’ll need to manage your document’s share settings and give viewing permissions to the document’s link.

  1. Open the drop-down access menu next to Public.
  2. Set the public access level to View
  3. Enable the Can download and inspect option.
  4. Click Copy Link to get the link you need to embed the document.
An image showing how to give viewing permissions to the documents link.

Setting the permissions for a document to be embedded in other platforms using the Share settings in the web app (July 2022)

How embeds work

There are a couple of ways to embed your Sketch documents:

  • You can copy the link to your document, Artboard or prototype and paste it directly into any web page or document that supports oEmbed, such as Notion or Medium.
  • Alternatively, you can generate a HTML snippet from that same link using a tool like iFramely. You then need to paste this snippet into your web page’s HTML document.

Note: With embeds, only the latest update of your document, Artboard, or prototype will display. To display previous versions of a document, you will need to copy the link to that version before embedding it.

Platforms like Notion and Medium allow you to embed content by copying your document’s link and pasting it into the page or document where you want it to appear. Copy and paste your link into a Notion document, for example, and your Artboard will appear in that document as if you were viewing it in the web app in your browser.

Copy your document’s link. You can copy a document’s link from the Workspace window in the Mac app, or from your browser’s address bar in the web app.

Paste your document’s link into the web page or document where you want it to appear.

Here’s what embedding a Sketch document in Notion looks like.

Embedding documents using a HTML snippet

To embed your Sketch documents in any other type of web page, you’ll need to create a HTML snippet for your link. Here’s an example of a HTML snippet for the page you’re currently reading:

<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>

To generate a HTML snippet, you can use a tool like iFramely. With iFramely, simply copy your document’s link into the field labelled Paste a link here, then press the Check it button.

Once you have your snippet, copy it by pressing the Copy Code button. You can then paste your code snippet into the HTML document of the page where you want your document, Artboard or prototype to appear. Don’t forget to paste it between the html <body> </body> tags of your document.