This guide assumes you’ve run Moonshot AI Studio in Figma and added your OpenAI API key as described in the Quickstart guide.

​
What we’ll build

Example of a product that answers a yes or no question and provides a reason.

​
Steps to reproduce

After a few builds these steps will become second nature. Once setup, you’ll only need to update your prompt to see how your design responds to AI.

1

Add text nodes

Add text placeholders for the question and reasoning. Make sure to name your text laters appropriately to make syncing data easier later on.

Add one text node for the question and one for the description.


2

Create a multi-variant component

Let’s create a component with three different variants: Yes, No, and Null. We need a Null variant to use before we make our first request or if we decide to reset the variable. These names can be upper or lower case, and you can name the variant property anything you like—for the purpose of this example we’ll name it “Response”.

This requires knowing how to work with components and component variants. Read more about working with components.

3

Create a local variable

Click on “Local variables” in Figma’s right panel (you may need to unselect a frame or node to see it). Create a new text variable called “Yes or No”.

Create a local variables collection for AI to stay organized and make data easier to sync.

4

Add an instance of your component to your design

This will allow you to sync data with this instance and not the component itself.

Make sure to apply your local variable to the component property (int this case “Response”).

5

Apply auto layout

Select both text nodes and the component, then click to apply auto layout in Figma’s right panel. This will ensure your design can adjust to varying levels of content. Learn more about working with auto layout.

Once this step is done the traditional design work for this example will be complete.


6

Create a request

Run Moonshot AI Studio and create a request if none are created already. Give it a name and write out a directive for the System field that gives the model paramters to work with. Something like the following will work:

System prompt
You are a helpful assistant. Tell a user if something is a good idea or not.

7

Define your schema

Next we’ll define a structured JSON response to ensure data is reliably applied to your design after each request. To do this, click on “Define schema”.

You can write your JSON by hand or use the prompt above the code field to generate one for you. For this example, feel free to copy and paste the following:

JSON schema
{
    "type": "object",
    "properties": {
        "question": {
        "type": "string"
        },
        "answer": {
        "type": "string",
        "enum": [
            "yes",
            "no"
        ]
        },
        "description": {
        "type": "string"
        }
    },
    "required": [
        "question",
        "answer",
        "description"
    ],
    "additionalProperties": false
}

8

Make an initial request

This will return your intial set of properties and accompanying data that you can then sync with your design. Ask a question in Prompt field and click “Make request”.

Once you get a request click on “View response” to view the data properties and values that you can apply to your design.


9

Sync response data with text nodes and variable

Click on a text node in your file and select the value you want to sync to it. You can also click on “View response” from the main Reqeusts view and then click on a response value and sync it with a text node or variable.

Repeat with the other text node in your design and the local variable that is read by your component.


Once you’ve synced response data with your design you can update your prompt in Moonshot AI Studio and make a new request to see your design respond to AI.