> ## 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

> Conecte o Figma à sua conta do Macaly

O Figma é uma ferramenta de design colaborativo para interfaces, protótipos e design systems. Conecte sua conta uma única vez e o agente transforma seus designs, componentes e estilos diretamente em partes funcionais do seu projeto.

<Callout icon="user">
  Disponível em todos os planos
</Callout>

## Por que conectar o Figma

* **Transforme seus designs em páginas de verdade.** Aponte o agente para um arquivo do Figma e ele constrói o layout, os componentes e os espaçamentos em uma página responsiva, então você não precisa refazer seu design à mão.
* **Mantenha seu projeto alinhado à marca automaticamente.** O agente importa seus componentes, estilos e variáveis, incluindo uma configuração do Tailwind pronta para uso, para que seu projeto siga o seu design system sem recriação manual.
* **Entregue designs sem sair do chat.** Exporte qualquer frame como imagem, importe recursos de desenvolvimento e detalhes do arquivo e evite o vaivém entre o Figma e o seu projeto.

## O que você precisa

* Uma **conta no Figma**. Crie uma gratuitamente em [figma.com](https://www.figma.com)
* Um plano Figma Organization ou Enterprise, se quiser variáveis publicadas ou análises completas da biblioteca

## Conecte o Figma ao Macaly

<Steps>
  <Step title="Abra as configurações">
    Vá em **Configurações → Integrações** no seu workspace do Macaly.
  </Step>

  <Step title="Conecte o Figma">
    Encontre o card do Figma na lista de apps e clique no botão **Conectar**.
  </Step>

  <Step title="Autorize sua conta">
    Uma nova janela se abre e pede que você entre no Figma. Depois que você aprovar o acesso, será redirecionado de volta ao Macaly.
  </Step>
</Steps>

## Use o Figma pelo chat

Depois de conectar, descreva o que você quer e o agente cuida do resto.

Transforme um design em uma página:

```
Aqui está meu design do Figma para a página de preços [link]. Transforme
em uma página de verdade, respeitando o layout, os componentes e os
espaçamentos, e deixe responsiva.
```

Traga seu design system para o projeto:

```
Importe os estilos e as variáveis de cor deste arquivo do Figma e
transforme em uma configuração do Tailwind para o meu projeto.
```

Exporte arquivos enquanto constrói:

```
Exporte o frame "Hero" do meu arquivo do Figma como SVG e adicione-o
à página inicial.
```

Ou construa sobre a sua biblioteca de design:

```
Estou criando um site de documentação de design system. Importe os
componentes e estilos da nossa biblioteca do Figma e liste todos com prévias.
```

## O que o agente pode fazer no Figma

Transformar a estrutura, os componentes e os estilos de um arquivo em páginas responsivas, extrair design tokens e uma configuração do Tailwind, exportar frames como imagens e obter detalhes do arquivo, comentários e histórico de versões para uma entrega organizada. Variáveis publicadas e análises da biblioteca exigem o Figma Organization ou Enterprise.

## Bom saber

* **Você conecta uma vez só.** Todos os projetos do seu workspace reutilizam a mesma conexão com o Figma.
* **Alguns recursos da biblioteca exigem um plano pago do Figma.** Variáveis publicadas e parte das análises da biblioteca exigem um plano Figma Organization ou Enterprise.
* **Sua conta, seu controle.** O agente só age quando você pede. Você pode desconectar o Figma a qualquer momento em **Configurações → Integrações**.


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