All Collections
FAQ
FAQs for Code
How to Embed Code in your Figma, Adobe XD, or Sketch Design
How to Embed Code in your Figma, Adobe XD, or Sketch Design
Embeding Code Snippets Will Enhance Your Website Funcationality
Or avatar
Written by Or
Updated over a week ago

Levels

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!

Artboards

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

    Example: Embed a chatbot only in your Support page. 

Project

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

    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, Artboard, or Project

  2. Add Embed Code via Anima plugin

  3. The Embed Code panel will open.

  4. Click Save after pasting the code


A good example of code to embed on a layer level would be a Typeform!

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

Then create a rectangle 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?