AI Interaction Creation

Overview

AI Interaction Creation enables you to build interactions using natural language, eliminating the need for manual configuration of triggers and responses. Describe what you want to happen, and Studio AI will generate the appropriate interaction logic. You can also create and edit components, add or swap instances, and override their variables — all from the same AI panel.

How It Works

1. Open the AI panel

2. Type your interaction request in natural language

3. Use @ mentions to reference specific layers for better precision

4. AI analyzes your workspace, plans the interaction, then executes step-by-step

5. Review the results and refine manually if needed

Example Prompts

Basic interactions:

• "Change @Button color when tapped"

• "Navigate to Scene 2 when @Card is clicked"

• "Make @Layer draggable horizontally only"

• "Turn @Layer into a component and create 5 instances”

• "Combine these @Layer states into a single component”

Complex interactions:

• "Add a Stop and Start interaction that changes the color and text of the button on the right. Also start and stop the timer accordingly."

• "If email is invalid, change button to gray"

• "Create a toggle. First tap shows panel, second tap hides it"

• "Make these options into a component so only one can be selected at a time”

• "Create instances of @Component, each showing different content”

Understanding AI's Process

When you enter a prompt, Studio AI:

1. Analyzes your workspace: Reviews selected layers, existing variables, and scene context

2. Plans the interaction: Shows you a summary of steps it intends to execute

3. Executes step-by-step: Creates triggers, responses, and formulas while highlighting affected layers

4. Confirms completion: Shows completion status and offers options to revert if needed

Context Awareness

Studio AI understands your workspace context:

• Selected layers: References the layer you have selected

• Existing variables: Reuses variables when appropriate instead of creating duplicates

• Scene structure: Understands layer hierarchy and grouping

• Previous interactions: Remembers earlier requests within the same session

Working with AI Results

Reviewing generated interactions:

• AI-created elements are highlighted on the canvas with a colored border when mentioned

• The Properties panel shows all interaction details

• You can expand/collapse AI's explanation sections in the chat

Editing and refining:

• All AI-generated interactions are fully editable through Studio's interface

• Make changes in the Properties panel, Interaction panel, or directly on canvas

• AI will recognize your manual edits and respect them in subsequent requests

Stopping and Reverting

Stop: Click [Stop] during execution to cancel. Changes will be reverted automatically.

Revert: After completion, click [Revert] to undo AI's most recent changes. Revert is available until you manually edit the canvas.

What happens when you stop:

• If stopped after tasks complete: Retains edits, task block freezes

• If stopped during tasks: Reverts edits, brings back prompt input

Limitations

• No VLM: Studio AI cannot "see" visual design on canvas, but it reads layer structure and property data only

• Creates interactions for existing layers (does not generate new designs or layouts)

• May require refinement for very complex conditional logic

• Works with local library components only; cloud library components aren't supported yet

• Can't edit nested components or instances inside another component

• The Use as Main Component feature isn't supported

• Chat history is not saved across sessions