Figma para site: lançar uma landing page
Transforma um frame de marketing do Figma em HTML, CSS e JavaScript e depois publica o site finalizado.
Cole uma ligação de frame do Figma, descreva o que a página deve fazer, e deixe o Manus construir o frontend e o backend que pode publicar.
O Manus lê o layout, os componentes, as fontes e as cores na frame do Figma para criar uma aplicação web funcional.
Exemplo ilustrativo.
Começa com uma página de destino, um painel ou vários quadros ligados entre si. Cada pedido pode descrever o comportamento por detrás do design.
Transforma um frame de marketing do Figma em HTML, CSS e JavaScript e depois publica o site finalizado.
Partilhe um design de painel de administração e descreva os dados e ações de que necessita. O Manus cria uma aplicação web com componentes frontend e backend.
Traga vários frames para um único pedido de design para código. Descreva como as páginas se ligam, o que acontece ao clicar e quais os estados de componentes importantes.
Não é necessário nenhum plugin separado de Figma para código no fluxo de trabalho documentado. Liga a tua conta Figma, cola uma ligação de frame e indica o que deve funcionar na página.
O design para código com IA não termina com uma pré-visualização. Publique o website, ligue o seu próprio domínio e descreva as alterações que deseja numa conversa.
Explica como se ligam os teus frames. Depois revê o resultado e continua a fazer alterações na conversa.
Liga a tua conta Figma ao Manus, depois partilha uma ligação para um frame do Figma e descreve a aplicação web que queres criar. O Manus lê o seu layout, componentes, fontes e cores, e constrói depois o frontend e os componentes de backend necessários.
Sim. A importação documentada do Figma gera HTML, CSS e JavaScript para o frontend, além dos componentes de backend necessários para a aplicação web pedida. Por predefinição, o Manus constrói-a como um projeto React e Tailwind CSS que corre como HTML, CSS e JavaScript no navegador. Descreva as páginas e o comportamento que necessita juntamente com o link do frame.
Sim. O Manus cria sites com React e CSS Tailwind por predefinição, por isso um design importado do Figma torna-se um frontend React estilizado com Tailwind, além do código de backend que o seu pedido necessitar. Pode exportar o código do projeto para um repositório privado do GitHub.
Não é necessário nenhum plugin separado no fluxo documentado. Liga a tua conta Figma, partilha uma ligação de frame com o Manus e explica o que pretendes construir; podes adicionar mais frames quando o teu design tiver várias páginas ou estados.
Não. O Manus liga-se diretamente à sua conta Figma através do início de sessão do Figma. Depois de o ligar, importe uma ligação de frame e descreva a aplicação; não existe um servidor Figma MCP separado para instalar ou executar.
Não. O Manus importa frames através da sua conta Figma ligada, em vez do Dev Mode, e uma conta Figma gratuita pode ligar-se. O Figma limita a frequência com que as aplicações podem ler ficheiros: os planos gratuitos e os lugares sem Dev Mode têm um pequeno limite mensal, enquanto os lugares pagos com Dev Mode têm limites muito mais altos. Se atingir o limite, o Manus avisa-o.
Sim. Partilhe um link de um frame do Figma e descreva a aplicação. O Manus analisa o design e constrói o frontend, bem como os componentes de backend necessários para uma aplicação web funcional.
Sim. Partilhe vários frames do Figma e explique o fluxo de páginas, interações ou estados de componentes, como o hover. Isto ajuda o Manus a construir uma experiência web interativa e multi-página.
Sim. Pré-visualize a aplicação web, clique em Publicar, e ela ficará acessível online. Pode associar um domínio personalizado e continuar a fazer alterações descrevendo-as ao Manus.
Figma Make é um produto da Figma. Com o Manus, o percurso documentado começa com um link de frame do Figma e um pedido de aplicação web: pode incluir componentes de backend e, depois, pode publicar o site e continuar a editá-lo em conversa.
Esta página aborda a conversão de Figma para aplicação web. O guia de importação indica HTML, CSS e JavaScript para o frontend; não confirma a saída para Flutter ou React Native.