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

# Figma

> Connect Figma to your Macaly account

Figma is a collaborative design tool for interfaces, prototypes, and design systems. Connect your account once and the agent turns your designs, components, and styles directly into working parts of your project.

<Callout icon="user">
  Available on all plans
</Callout>

## Why connect Figma

* **Turn your designs into real pages.** Point the agent at a Figma file and it builds the layout, components, and spacing into a responsive page, so you don't rebuild your design by hand.
* **Keep your build on brand automatically.** The agent pulls your components, styles, and variables, including a ready-to-use Tailwind config, so your project matches your design system without manual re-creation.
* **Hand off designs without leaving the chat.** Export any frame as an image, pull dev resources and file details, and skip the back-and-forth between Figma and your project.

## What you need

* A **Figma account**. Create one for free at [figma.com](https://www.figma.com)
* A Figma Organization or Enterprise plan if you want published variables or full library analytics

## Connect Figma to Macaly

<Steps>
  <Step title="Open Settings">
    Go to **Settings → Integrations** in your Macaly workspace.
  </Step>

  <Step title="Connect Figma">
    Find the Figma card in the list of apps and click the **Connect** button.
  </Step>

  <Step title="Authorize your account">
    A new window opens, where you'll be asked to sign in to Figma. Once you approve access, you'll be redirected back to Macaly.
  </Step>
</Steps>

## Use Figma from the chat

Once connected, describe what you want and the agent handles the rest.

Turn a design into a page:

```
Here's my Figma design for the pricing page [link]. Build it
into a real page, match the layout, components, and spacing,
and make it responsive.
```

Bring your design system into the project:

```
Pull the styles and color variables from this Figma file and
turn them into a Tailwind config for my project.
```

Export assets while you build:

```
Export the "Hero" frame from my Figma file as an SVG and add
it to the homepage.
```

Or build on top of your design library:

```
I'm building a design-system docs site. Pull the components
and styles from our Figma library and list them with previews.
```

## What the agent can do in Figma

Turn a file's structure, components, and styles into responsive pages, extract design tokens and a Tailwind config, export frames as images, and pull file details, comments, and version history for a clean handoff. Published variables and library analytics require Figma Organization or Enterprise.

## Good to know

* **You connect once.** Every project in your workspace reuses the same Figma connection.
* **Some library features need a paid Figma plan.** Published variables and parts of library analytics require a Figma Organization or Enterprise plan.
* **Your account, your control.** The agent only acts when you ask it to. You can disconnect Figma anytime from **Settings → Integrations**.