Figma

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.

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
Um plano Figma Organization ou Enterprise se quiseres variáveis publicadas ou análises completas da biblioteca

Liga o Figma ao Vibewax

1. Abre as Definições

Vai a Definições → Integrações no teu espaço de trabalho Vibewax.

2. Liga o Figma

Encontra o cartão do Figma na lista de apps e clica no botão Ligar.

3. 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 Vibewax.

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.