Skip to main content

How to Embed Code in your Figma, Adobe XD, or Sketch Design

Embeding Code Snippets Will Enhance Your Website Funcationality

Michal avatar
Written by Michal
Updated over a year ago

Levels of Embed

Embed Code can be added in 3 different levels:

Layer

  • Embedding a code snippet in a layer means the code will render inside that layer. Example: A Google map in your Contact page

    Example: Typeform - here's how!

Frame/ Artboard

  • Embedding a code snippet in a webpage means the snippet will be embedded in that page.

    Example: Embed a chatbot only on your Support page. 

Project

  • Embedding a code snippet on the website means the snippet will be embedded in every site webpage.

    Example:  Web tracking or analytic tools.
    ​

How To Embed Code

This works the same for all Anima plugins in Figma, Adobe XD, or Sketch:

  1. Decide and select where you want to Embed Code: in a Layer, Frame/ Artboard, or Project

  2. Select Embed Code via the Anima plugin

  3. The Embed Code panel will open.

  4. Click Save after pasting the code

Showcase: Embedding Typeform in Your Design

Simply copy the code from Typeform: Click Share > Embed in a web page > Start embedding > Copy

Then, choose an element in your design file, choose embed code in the Anima plugin, and paste it there!

💡 Tip: The last part of your embedded code will look like this:

<script src="//embed.typeform.com/next/embed.js"></script>

You'll need to add https: so that it will look like this

<script src="https://embed.typeform.com/next/embed.js"></script>

Preview and sync your design to see the form live!

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?