Anima

Haven't got Anima plugin for Sketch, Adobe XD, or Figma? <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-or-adobe-xd" rel="nofollow noopener noreferrer" target="_blank">Here's how to install it</a>.

An Overlay is a link type that lets you display another Artboard on top of the existing one rather than navigating to the new Artboard.

- An Overlay is a link type that lets you display another Artboard on top of the existing one rather than navigating to the new Artboard.

Overlays can be used for modal windows, drop-down menus, pop-up notifications, all without leaving your current screen.

Learn how to create an Overlay in <a href="#create-an-overlay-in-sketch">Figma</a>, <a href="#create-overlay-in-adobe-xd">Adobe XD</a> or <a href="#h_448fbd2b9a">Sketch</a>!

- Overlays can be used for modal windows, drop-down menus, pop-up notifications, all without leaving your current screen.
- Learn how to create an Overlay in <a href="#create-an-overlay-in-sketch">Figma</a>, <a href="#create-overlay-in-adobe-xd">Adobe XD</a> or <a href="#h_448fbd2b9a">Sketch</a>!

___________________________________________________________

Use Figma's native "Open" and "Close" overlay links

Select the Layer that will trigger the Overlay 

With Links, connect it to the Overlay artboard

Now, select the Overlay component and link it to the “Dismiss Overlay“ option at the top menu bar

Change the Overlay artboard background color to transparent by moving the transparency slider to the left. Make sure that “Include in export“ is checked in

1. Select the Layer that will trigger the Overlay 
2. With Links, connect it to the Overlay artboard
3. Check the Overlay box in Links
4. Now, select the Overlay component and link it to the “Dismiss Overlay“ option at the top menu bar
5. Change the Overlay artboard background color to transparent by moving the transparency slider to the left. Make sure that “Include in export“ is checked in

<a href="http://bit.ly/Anima-Dashboard-Tutorial" rel="nofollow noopener noreferrer" target="_blank">[Download]</a> this High-Fidelity Prototype Sketch file to try it yourself.

For a cooler Overlay effect, set its artboard background color to 70% Transparent

- For a cooler Overlay effect, set its artboard background color to 70% Transparent

<a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

<a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-gifs-and-lottie-files">How to Embed Videos, GIFs, and Lottie files</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" rel="nofollow noopener noreferrer" target="_blank">How to Publish a Website and Host it With Anima</a>

- <a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-gifs-and-lottie-files">How to Embed Videos, GIFs, and Lottie files</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" rel="nofollow noopener noreferrer" target="_blank">How to Publish a Website and Host it With Anima</a>

Overlays

Create Overlay in Figma

Create Overlay in Adobe XD

Create an Overlay in Sketch:

New to Anima?

Learn More