With Figma AI, you can add multiple prototyping interactions and connections to your designs in only a few clicks. This reduces the time spent manually adding interactions, providing a faster and simpler workflow for building an interactive prototype.

Guide to prototyping in Figma.

How it works

Add interactions with Figma AI lets you create interactions and connections between frames in your selection. For example:

• Create simple flows between a selection of top-level frames
• Add interactions to back or next buttons
• Link to individual frames from a navigation menu

This is helpful if you want to quickly build a basic prototype flow from your designs. You can always customize each interaction further or add more interactions to your prototype.

Consistent layer naming can help improve Figma AI output. Learn how to rename layers with Figma AI.

Add interactions with AI

1. Select the frames on the canvas you want to create interactions between.
2. Open the Prototype tab in the right sidebar.
3. From the Interactions section, click Add interactions.

Once Figma AI completes adding interactions to your designs, you’ll see a banner at the bottom of the page that let’s you Preview the interactions. This opens the current flow as a prototype in the inline preview.

To accept all interactions, click Keep it.

Make changes to the prototype

You can edit or remove any interactions added by Figma AI, as well as manually edit and add more interactions.

Click on a connection to select a specific interaction. 

• The Interaction details modal will open on the canvas, where you can make any changes as needed.
• To remove that interaction, find the corresponding interaction in the right sidebar and click to remove it. Or you can press the Delete key on your keyboard.
• To remove all connections on the current page, right click on the canvas and select Remove all connections.