Crie um app funcionando a partir de um design no Figma

Se o seu app já está desenhado no Figma, o MonstarX pode criá-lo a partir do próprio design. Você recebe um app funcionando com a cara das suas telas — com as imagens e os ícones reais, as cores e a tipografia, e a navegação do seu protótipo — além dos dados, formulários e login que as telas pressupõem.

Do que eu preciso?

De um arquivo .fig do seu design. No Figma, abra o design e use Arquivo → Salvar cópia local… — isso salva o arquivo que o MonstarX lê. Ele precisa ser um arquivo do Figma Design: quadros do FigJam e apresentações do Figma Slides não são aceitos, e o MonstarX avisa se você soltar um desses.

Como crio a partir de um arquivo do Figma?

1. Em Projetos, clique em Figma, ao lado de Importar (ele também está no menu Importar). Você também pode soltar ou colar um .fig na caixa de texto.

   

2. Solte seu .fig ou escolha o arquivo. O MonstarX lê tudo no seu navegador — Lendo o arquivo…, Abrindo todas as páginas…, Desenhando as telas… — e nada é enviado ainda.

3. Marque as telas que quer criar. Todas as páginas do arquivo aparecem listadas, com os quadros (frames) desenhados em miniatura. Quadros que parecem telas já vêm marcados; páginas que parecem organização interna (uma capa, o sistema de design, um arquivo morto) começam recolhidas e desmarcadas. Use Marcar todos ou Desmarcar todos em cada página.

4. Em O que deve fazer? (opcional), diga o que o design não mostra: quem usa, de onde vêm os dados, o que acontece quando alguém se cadastra ou paga.

   

5. Confira o modelo no canto inferior esquerdo (é o mesmo da caixa de texto; troque aqui, se quiser).

6. Clique em Criar este app · 4 telas — ou em Planejar primeiro, para o MonstarX analisar as telas e perguntar sobre o que o design não mostra antes de criar.

As telas são enviadas (Enviando o design…), o projeto é criado com o nome do arquivo e a primeira criação começa.

O que o MonstarX aproveita do meu design?

• Cada tela como imagem — para que o agente do MonstarX veja exatamente o que você desenhou e compare as páginas com ela enquanto trabalha.
• Uma descrição precisa de cada tela — layout, espaçamento, cada texto com sua fonte e tamanho, cores, bordas, cantos, sombras.
• Suas imagens e ícones — cada imagem e ícone do design vira um arquivo no app, então nada é trocado por fotos de banco de imagens.
• Seu sistema de design — variáveis de cor (claro e escuro), tipografia, raios dos cantos e sombras.
• Componentes — um botão usado em dez telas vira um único componente no app.
• Links do protótipo — para onde um toque leva vira navegação de verdade.

Telas com o mesmo nome (uma sequência de quadros todos chamados “Desktop”) são diferenciadas pelas primeiras palavras, para você saber qual é qual.

Dica

Estados de uma página — um diálogo aberto, uma lista vazia, um erro — podem vir como quadros próprios. O MonstarX os cria como estados daquela página, e não como páginas separadas.

O que o chat mostra?

Sua primeira solicitação fica, por exemplo, Crie este app com base no meu design do Figma “bloom.fig” (4 telas: Welcome, Home, Plant detail, Add plant). Deixe-o com a aparência exata do design e funcionando de verdade., com uma faixa das telas embaixo. Clique em uma tela para vê-la em tamanho real, com o tamanho, a página e o arquivo. Durante a criação, o chat mostra etapas como Analisando o design de Home e Comparou / com o design de Home.

Posso adicionar mais telas depois?

Pode. No chat de um projeto, solte, cole ou anexe um .fig e a janela Adicionar telas do Figma se abre. Marque as telas novas, diga o que elas devem fazer e clique em Criar estas telas. Elas entram no design do projeto e são criadas combinando com o resto do app. Um projeto guarda até 60 telas de design.

Quais são os limites?

Limite	Valor
Telas por criação	até 30
Telas por projeto	até 60
Imagens e ícones por design	até 400 arquivos e 150 MB (8 MB cada)

Um .fig pode ter até 250 MB, mas um arquivo muito grande (como um kit inteiro de sistema de design) ainda pode ser demais para o navegador abrir. Mova as telas do seu app para um arquivo próprio, sem as páginas do sistema de design, e salve uma cópia local desse arquivo.

Perguntas frequentes

Posso colar um link do Figma em vez de um arquivo?

Nesta janela, não — ela lê o próprio arquivo .fig. Use Arquivo → Salvar cópia local… no Figma. (Algumas ferramentas de design também conseguem enviar o trabalho pelo seu agente de código.)

Meu design é enviado quando eu solto o arquivo?

Não. O arquivo é lido no seu navegador; só as telas que você marcar são enviadas, quando você clica para criar.

O app vai ficar exatamente igual ao design?

Esse é o objetivo: o agente do MonstarX reproduz cada tela a partir dos valores exatos e compara as páginas com as suas telas enquanto cria. Você pode apontar diferenças no chat ou corrigi-las com o Modo de edição.

Meu design só tem telas de celular. O que acontece no computador?

Designs de celular são criados como uma coluna centralizada em telas largas, então o app continua funcionando no computador.

O MonstarX diz que meu arquivo não é do Figma. Por quê?

Pode ser um quadro do FigJam, uma apresentação do Figma Slides ou um arquivo .fig de outro programa. Abra o design no Figma e use Arquivo → Salvar cópia local… para salvar um arquivo do Figma Design.

Veja também

Design primeiroAinda não tem design? Escolha um visual entre telas desenhadas.

Planejar primeiroPerguntas sobre o que o design não mostra.

Modo de ediçãoAjuste o visual clicando na página.

Importar um appTem código em vez de um design?