> ## Documentation Index
> Fetch the complete documentation index at: https://moonshot.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Working with components

> Make components in your design respond to AI

AI-responsive components provide a powerful way to see how your product responds to both users and AI.

Learn more about components by reviewing [Figma's documentation](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma).

### Creating multi-variant components

You need a component with multiple variants.

<Frame>
  <img width="560px" src="https://mintcdn.com/thinklikellc/yUQYyXEaEJymQjZO/images/component-variants.png?fit=max&auto=format&n=yUQYyXEaEJymQjZO&q=85&s=60e68875a3b6d1644e573e157592a423" data-path="images/component-variants.png" />
</Frame>

### Using variables to set component state

You then need to sync response data with a variable that the component uses to set it's variant state.

<Frame>
  <img width="400px" src="https://mintcdn.com/thinklikellc/yUQYyXEaEJymQjZO/images/sync-variable.png?fit=max&auto=format&n=yUQYyXEaEJymQjZO&q=85&s=007a64fe32fe7e861bc29e5e2f8503c8" data-path="images/sync-variable.png" />
</Frame>