Embed live design preview iframes in any web page

Insert scalable design previews of Sketch, Adobe XD, Photoshop, Illustrator, and Figma designs in HTML to illustrate your design system, styleguides, or case studies.

Learn more

Pan and zoom in on designs up to 1000%

Thanks to Avocode rendering your designs will remain crisp when you move around them or zoom.

Easily embed any design file format

Embed designs made in Sketch, Adobe XD, Figma, Photoshop, or Illustrator in high resolution.

Document all your design components

With embedded symbol previews your team can always access the latest design version from one place.

How to embed design iframes on your website?

  1. Open your HTML code.
  2. Upload any design file to Avocode.
  3. Pick a design screen you wish to embed in your code.
  4. Click on SHARE to generate a link and make sure it’s public. Copy the link.
  5. Go to stage-embed.avocode.com
  6. Paste the link and hit Get embed.
  7. Copy the iframe code and paste it to your HTML code - somewhere inside your <body> tag.
  8. Save your code and reload the page.
  9. Hit the play button on the embeded frame to pan and zoom in up to 1000% without loosing the crispy resolution.
  10. Double-click in the middle of the zooming button to re-center the design.
  11. Click on Full screen to show the design in full screen mode.
  12. Click on Comments to switch to Avocode Comment mode on this artboard.
  13. When you update the design in Avocode, the live preview will auto-updated and always show you the latest version.

Start adding live design previews to your website

Try Avocode for free and keep all your design file in one place. Easily share designs, invite developers to inspect and export assets and collect visual feedback from clients.

See more tools you can connect with Avocode.