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.

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"

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"

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

During the beta period, AI Interaction Creation:

• No VLM: 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
• Cannot create or modify interactions within components
• Chat history is not saved across sessions