Figma para site: lance uma landing page
Transforme um frame de marketing do Figma em HTML, CSS e JavaScript e depois publique o site finalizado.
Transforme designs do Figma em aplicativos web funcionais
Cole um link de frame do Figma, descreva o que a página deve fazer, e deixe o Manus construir o frontend e backend que você pode publicar.
De um quadro de design a uma página funcional
Manus lê o layout, os componentes, as fontes e as cores no frame do Figma para criar um app web funcional.
Quadro de designPágina em funcionamento
Exemplo ilustrativo.
Design para código nas páginas que você precisar
Comece com uma landing page, um painel ou vários quadros conectados. Cada pedido pode descrever o comportamento por trás do design.
Figma para código: construa um painel funcional
Compartilhe um design de painel administrativo e descreva os dados e ações que você precisa. O Manus constrói um aplicativo web com componentes de frontend e backend.
Figma para app: conecte todo o fluxo
Traga vários quadros para uma única solicitação de design para código. Descreva como as páginas se conectam, o que acontece ao clicar e quais estados de componentes são importantes.
Converta o Figma em código com um link, não um plugin
Não é necessário um plugin separado de Figma para código no fluxo de trabalho documentado. Conecte sua conta do Figma, cole um link de frame e diga o que deve funcionar na página.
Publique seu site e continue refinando-o
O design para código com IA não termina na pré-visualização. Publique o site, conecte seu próprio domínio e descreva as alterações que deseja em uma conversa.
Um link, um pedido claro, um site que você pode publicar
Explique como seus frames se conectam. Depois revise o resultado e continue fazendo alterações na conversa.
Continue construindo com Manus
Perguntas frequentes
Como converto o Figma em código com o Manus?
Conecte sua conta Figma ao Manus, depois compartilhe um link de um frame do Figma e descreva o app web que deseja construir. O Manus lê o layout, os componentes, as fontes e as cores, e então constrói o frontend e os componentes de backend necessários.
O Manus pode transformar Figma em HTML e CSS?
Sim. A importação documentada do Figma gera HTML, CSS e JavaScript para o frontend, além dos componentes de backend necessários para o aplicativo web solicitado. Por padrão, o Manus o constrói como um projeto React e Tailwind CSS que é executado como HTML, CSS e JavaScript no navegador. Descreva as páginas e o comportamento necessários junto com o link do frame.
O Manus oferece suporte para Figma para React e Figma para Tailwind?
Sim. Por padrão, o Manus cria sites com React e CSS Tailwind, então um design importado do Figma se transforma em um frontend React estilizado com Tailwind, além do código de backend que sua solicitação exigir. Você pode exportar o código do projeto para um repositório privado do GitHub.
Preciso de um plugin de Figma para código?
Nenhum plugin separado faz parte do fluxo documentado. Conecte sua conta do Figma, compartilhe um link de frame com o Manus e explique o que deve ser construído; você pode adicionar mais frames quando seu design tiver várias páginas ou estados.
Preciso instalar um servidor MCP do Figma?
Não. O Manus se conecta diretamente à sua conta do Figma por meio do login do Figma. Depois de conectar, importe um link de frame e descreva o aplicativo; não há um servidor Figma MCP separado para instalar ou executar.
Preciso do Dev Mode do Figma ou de uma licença paga do Figma?
Não. O Manus importa frames por meio da sua conta Figma conectada, em vez do Dev Mode, e uma conta Figma gratuita pode se conectar. O Figma limita a frequência com que os aplicativos podem ler arquivos: planos gratuitos e assentos sem Dev Mode recebem uma cota mensal pequena, enquanto assentos pagos com Dev Mode recebem limites muito mais altos. Se você atingir o limite, o Manus avisa.
Um fluxo de IA de Figma para código pode criar um app funcional?
Sim. Compartilhe um link de frame do Figma e descreva o aplicativo. O Manus analisa o design e constrói o frontend, além dos componentes de backend necessários para um aplicativo web funcional.
O Manus consegue lidar com designs e interações de várias páginas?
Sim. Compartilhe vários frames do Figma e explique o fluxo de páginas, interações ou estados de componentes, como hover. Isso ajuda o Manus a construir uma experiência web interativa de múltiplas páginas.
Posso publicar o site depois de convertê-lo?
Sim. Visualize o aplicativo web, clique em Publicar, e ele ficará acessível online. Você pode conectar um domínio personalizado e continuar fazendo alterações descrevendo-as para o Manus.
Em que isso é diferente do Figma Make?
Figma Make é um produto da Figma. Com o Manus, o fluxo documentado começa com um link de frame do Figma e um pedido de aplicativo web: pode incluir componentes de backend e, depois, você pode publicar o site e continuar editando-o na conversa.
Posso usar a saída do Figma para Flutter ou do Figma para React Native?
Esta página aborda a conversão do Figma para aplicativo web. O guia de importação cita HTML, CSS e JavaScript para o frontend; ele não confirma a saída em Flutter ou React Native.