Sketches can be embedded as <iframe>s!


#1

Hi friends,

After reading Hillel’s awesome formally specifying UIs blog post last week, we realized that it’d be handy to be able to embed sketches as iframes.

That way, if you have a blog or website, you can include the sketch directly as an interactive diagram or prototype. We’ve just added support for this, and it’s real easy. Here’s what you need to do:

  1. Copy the URL of your favorite sketch. E.g., Hillel’s sketch URL is: https://sketch.systems/hwayne/sketch/afd226edd1643d2367d5f90fa24bd4c4

  2. Use this URL in an <iframe> tag. For example:

<iframe src="https://sketch.systems/hwayne/sketch/afd226edd1643d2367d5f90fa24bd4c4"
        frameborder="no"
        width="100%"
        height="300">
</iframe>
  1. (optional) If you want, add #prototype to the end of the URL to embed your prototype rather than the diagram.

Then the diagram will be embedded in an interactive way, right there in your post. It’ll look something like this:

You can see a full example on this codepen.

And, of course, if you do write a cool blog post with Sketch.systems please let us know by posting about it on the forum or emailing me!