Figma Sites collection: Add interactions to a website

After you've designed your site with blocks or from scratch, and you’re happy with your design, you can bring it to life with interactions from the Interaction panel.

Interactions enhance the user experience of your site by adding animations, transitions, and visual transformations to the content. If you’re familiar with Figma Design, you’ll recognize interactions like change to, back, and scroll to.

Add links to navigate around your site

This lesson mainly introduces the new interactions unique to Figma Sites, but using links to help users navigate around your site is important and also available in the interactions panel. You can use links to create connections from layers in one page, and connect them to another page.

To add a link:

1. Open the Interactions panel in the right sidebar.
2. Select a layer on the canvas.
3. Hover over that layer until the blue plus icon appears.
4. Click and drag on the blue circle to another page in your website.
5. Release your click when the connector snaps to the webpage.

You can also make this same connection from the right sidebar in by clicking the plus icon under Link and searching for the webpage name you want to connect to, or make any customizations to the link in the right sidebar.

Figma Sites interactions

Figma Sites has many new powerful interactions that are not available in Figma Design, like:

• Reveal makes elements visible when a trigger happens, like when it enters the screen, or when the page loads.
• Scroll transform adjusts an element’s properties such as size, position, opacity, and rotation as you scroll.
• Cursor effects replace the standard mouse cursor with a design of your choice, like an image, vector object, or frame.
• Draggable lets users click and drag on elements to move them around
• Lightbox creates an overlay that brings content into focus. When triggered, the selected element—often an image or gallery item—expands into a full-screen modal with a dimmed background.
• Marquee creates a scrolling effect where elements move continuously across the screen. You can set the direction, speed in pixels per second, and whether the scrolling is infinite.
• Parallax creates a subtle, depth-enhancing effect by shifting elements in response to the user’s cursor movement.

Learn more about any of these interactions →

Add an interaction

You can add a variety of other interactions to objects in your website. To add an interaction:

1. Switch to the Interaction tab in the right sidebar.
2. Select a layer or object in a webpage or on the canvas.
3. Click    the plus icon in the Interactions section and select an interaction from the dropdown menu.
4. Use the Interaction details panel to configure your interaction.

Check your knowledge

Up next: Code layers (AI powered interactions and animations)

In the next lesson, we'll introduce code layers and show how anyone, no matter their skill level or experience, can use Figma AI to create unique experiences powered by code.

Additional resources

Prototyping fundamentals (above) — This lesson is a part of the Figma Design for beginners course and teaches you the fundamentals for prototyping, and how interactions work. We recommend taking the full course as it has more content on how to create and build prototypes.

Advanced prototyping examples — Not sure how to use interactions? Check out our prototyping examples for some inspiration. This guide is for Figma Design, but can provide some ideas on how to get started.

Prototype with variables — This video is for Figma Design. Learn how to use variables to create advanced prototyping behaviors using variables.