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

# Figma

> Bring Figma designs, components, and assets into your project

Macaly connects to Figma so the agent can turn your designs into real pages and pull your design system into your project. Ask it to export a frame, grab your styles and variables, or build a page straight from a Figma file.

## What is Figma?

Figma is a collaborative design tool for interfaces, prototypes, and design systems. With the Figma integration, Macaly's agent reads your Figma files directly: it pulls design structure, components, styles, and variables, renders images, and turns your designs into working parts of your project.

## What you can do

A few examples of what the agent can do with Figma:

* **Turn designs into pages.** Pull a file's structure, components, and styles, and build them into your project as real, responsive pages.
* **Use your design system.** Read components, component sets, styles, and variables, and extract design tokens (including a Tailwind config) to keep your build on-brand.
* **Export images and assets.** Render any frame or node as a PNG, JPG, SVG, or PDF, and download image fills from a file.
* **Inspect and hand off.** Get file metadata, node details, prototype interactions, and dev resources for a clean design-to-code handoff.
* **Collaborate.** Read and post comments, react to them, and review a file's version history.

## How it works

You describe what you want in the chat, and the agent handles the rest. Ask for a one-off task, or have the agent build Figma right into your project.

**Ask the agent directly:**

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

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

**Or build it into your app:**

```
Here's my Figma design [link]. Build the landing page from it —
match the layout, components, and spacing, and make it responsive.
```

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

## Good to know

* **You connect once.** Authorize your Figma account the first time, and the agent reuses that connection for later requests.
* **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, and you can revoke access from your Figma settings at any time.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.