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

> Liga o Figma à tua conta Macaly

O Figma é uma ferramenta de design colaborativo para interfaces, protótipos e design systems. Liga a tua conta uma única vez e o agente transforma diretamente os teus designs, componentes e estilos em partes funcionais do teu projeto.

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

## Porquê ligar o Figma

* **Transforma os teus designs em páginas reais.** Aponta o agente a um ficheiro do Figma e ele constrói o layout, os componentes e os espaçamentos numa página responsiva, para que não tenhas de reconstruir o design à mão.
* **Mantém a tua construção fiel à marca automaticamente.** O agente extrai os teus componentes, estilos e variáveis, incluindo uma configuração Tailwind pronta a usar, para que o teu projeto corresponda ao teu design system sem recriação manual.
* **Entrega designs sem sair do chat.** Exporta qualquer frame como imagem, extrai recursos de desenvolvimento e detalhes do ficheiro, e evita as idas e vindas entre o Figma e o teu projeto.

## O que precisas

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

## Liga o Figma ao Macaly

<Steps>
  <Step title="Abre as Definições">
    Vai a **Definições → Integrações** no teu espaço de trabalho Macaly.
  </Step>

  <Step title="Liga o Figma">
    Encontra o cartão do Figma na lista de apps e clica no botão **Ligar**.
  </Step>

  <Step title="Autoriza a tua conta">
    Abre-se uma nova janela, onde te vai ser pedido para iniciar sessão no Figma. Depois de aprovares o acesso, serás reencaminhado de volta para o Macaly.
  </Step>
</Steps>

## Usa o Figma a partir do chat

Depois de ligado, descreve o que queres e o agente trata do resto.

Transforma um design numa página:

```
Aqui está o meu design do Figma para a página de preços [link].
Constrói-o numa página real, respeitando o layout, os componentes
e os espaçamentos, e torna-a responsiva.
```

Traz o teu design system para o projeto:

```
Extrai os estilos e as variáveis de cor deste ficheiro do Figma e
transforma-os numa configuração Tailwind para o meu projeto.
```

Exporta recursos enquanto constróis:

```
Exporta o frame "Hero" do meu ficheiro do Figma como SVG e
adiciona-o à página inicial.
```

Ou constrói algo assente na tua biblioteca de design:

```
Estou a criar um site de documentação para o design system.
Extrai os componentes e os estilos da nossa biblioteca do Figma e
lista-os com pré-visualizações.
```

## O que o agente consegue fazer no Figma

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

## Boa a saber

* **Ligas uma única vez.** Todos os projetos no teu espaço de trabalho reutilizam a mesma ligação ao Figma.
* **Algumas funcionalidades da biblioteca exigem um plano Figma pago.** As variáveis publicadas e parte das análises da biblioteca exigem um plano Figma Organization ou Enterprise.
* **A tua conta, o teu controlo.** O agente só atua quando lho pedes. Podes desligar o Figma a qualquer momento em **Definições → Integrações**.


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