Embed your designs and prototypes in Notion

Do you need to include live preview of Sketch, Adobe XD, Photoshop, Illustrator or Figma designs & prototypes in Notion? Just paste Avocode public links! Plus get a one-click access to design comments.

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.

Quickly switch to design comments

Each design preview carries a direct link to design specs and comments in Avocode.

Keep design documentation up to date

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

How to embed designs from Avocode in Notion?

  1. Make sure to have an active Notion account.
  2. Upload any design file to Avocode.
  3. Pick a design screen you with to embed in Notion.
  4. Click on SHARE to generate a link and make sure it’s public. Copy the link.
  5. Paste the link anywhere in Notion and select Create embed.
  6. Hit the play button on the embeded frame to pan and zoom in up to 1000% without loosing the crispy resolution.
  7. Double-click in the middle of the zooming button to re-center the design.
  8. Click on Full screen to show the design in full screen mode.
  9. Click on Comments to switch to Avocode Commend mode on this artboard.
  10. When you update the design in Avocode, the live preview will auto-update and always show you the latest version.

How to embed Sketch, Adobe XD, and Figma prototypes in Notion?

  1. Make sure to have an active Notion account
  2. Sync any Sketch, XD, or Figma design file to Avocode.
  3. Open the file and click Edit in Prototype.
  4. Create new and change current screen connections.
  5. Click on SHARE in the top right corner. Make sure the link is set as public and copy it.
  6. Paste the link anywhere in Notion and select Create embed.
  7. Adjust the size of the embed in Notion.
  8. Click anywhere in the prototype to see hotspots.
  9. Click through the prototype by clicking on the hotspots or by using the arrows on the top of the prototype.
  10. Click on Full screen to show the design in full screen mode. Hit the ESCAPE key to close Full screen mode.
  11. Click on Comments to switch to Avocode Commend mode on this artboard.
  12. Click on the Menu in the top left corner to edit the prototype or navigate to the file in Avocode.
  13. When you update the prototype in Avocode, the live preview will auto-update and always show you the latest version.

Start documenting your designs in Notion with Avocode

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.