Moonshot AI Designer home page
Search...
⌘K
Get plugin
Get plugin
Search...
Navigation
Basics
Syncing with variables
Documentation
Support
Product info
Getting started
Introduction
Quickstart
Basics
Defining schemas
Making requests
Syncing with text nodes
Syncing with variables
Working with components
Working with auto layout
Tutorials
Simple app
User personas
AI chat
On this page
Defining local variables
Creating component variants
Structuring response data to match variants
Sync response your variable
Basics
Syncing with variables
Change what is shown based on the AI response
Figma variables allow you to alter the state of components and change the content displayed in your design based on an AI response.
Defining local variables
Start by defining local variables. Currently only text Figma variables are supported, which can be used to sync both text and variables.
Create a local variables collection for AI to stay organized and make data easier to sync.
Creating component variants
Create a component with variants that match your variables.
Structuring response data to match variants
The “answer” property defines expected values that can be read by our component.
Sync response your variable
Once you have a response, click on the value you want to apply and then select the variable from the “Apply to” dropdown and click “Sync”.
Syncing with text nodes
Working with components
Assistant
Responses are generated using AI and may contain mistakes.