Como fazer capturas de tela da App Store no Figma (e quando um gerador é mais rápido)
6 min de leitura

Como fazer capturas de tela da App Store no Figma (e quando um gerador é mais rápido)

Capturas de tela da App Store no Figma: tamanhos exatos de frame, um componente reutilizável, exportação limpa em 1x e quando um gerador é mais rápido.

Começar a ler

Para fazer capturas de tela da App Store no Figma, crie um frame por captura no tamanho exato em pixels que a Apple aceita (por exemplo, 1290 × 2796 para o maior espaço de iPhone), monte um componente reutilizável com o título e um mockup do dispositivo, coloque as capturas do seu app dentro do mockup e exporte todos os frames em 1x como PNG ou JPG. Como as unidades do Figma são pixels em 1x, um frame com o tamanho certo é exportado exatamente no tamanho que o App Store Connect pede.

O Figma é ótimo para isso, e também dá bastante trabalho manual quando entram mais dispositivos, mais idiomas e o Google Play. Este guia mostra a configuração que mantém esse trabalho sob controle e é honesto sobre onde um gerador dedicado economiza tempo.

Principais pontos
  • Os frames do Figma são medidos em pixels em 1x, então um frame com um tamanho do App Store Connect é exportado exatamente nesse tamanho quando você exporta em 1x.
  • O maior espaço de iPhone do App Store Connect aceita 1260 × 2736, 1290 × 2796 e 1320 × 2868 na vertical; o espaço do iPad de 13 polegadas aceita 2064 × 2752 e 2048 × 2732.
  • Um componente com auto layout para o título e um mockup de dispositivo aninhado deixa você mudar fonte, espaçamento ou cor uma vez só para o conjunto inteiro.
  • As molduras oficiais de produto da Apple vêm em arquivos de Photoshop e PNG, não em arquivos do Figma; os arquivos de mockup da Figma Community cobrem essa lacuna.
  • A localização é o principal custo no Figma: cada idioma normalmente significa mais um conjunto completo de frames para editar, conferir e exportar.

Que tamanhos de frame usar para capturas de tela da App Store no Figma

Comece pelas especificações de capturas de tela da Apple, que listam os tamanhos exatos em pixels de cada espaço de tela. O App Store Connect reduz as suas maiores capturas para dispositivos menores se a interface for igual em todos os tamanhos, então a maioria dos apps faz um conjunto de iPhone e, se tiver suporte a iPad, um conjunto de iPad. Acrescente o Google Play se você publica lá.

EspaçoFrame no Figma (vertical)Observações
iPhone, maior tela (muitas vezes chamada de 6,9 polegadas)1320 × 2868 ou 1290 × 2796A Apple também aceita 1260 × 2736. Obrigatório para apps de iPhone, a não ser que você envie o espaço de 6,5 polegadas no lugar.
iPhone 6,5 polegadas1284 × 2778 ou 1242 × 2688Só é necessário se você pular o espaço maior ou quiser capturas específicas por dispositivo.
iPad 13 polegadas2064 × 2752 ou 2048 × 2732Obrigatório se o app roda no iPad.
Celular no Google Play1080 × 1920O Play aceita de 320 a 3840 px por lado, com o lado maior no máximo o dobro do menor.
Gráfico de recursos do Google Play1024 × 500Um por página da loja, não faz parte do conjunto de capturas.

A Apple aceita de 1 a 10 capturas por espaço; o Google Play aceita até 8 por tipo de dispositivo. Nossa referência de tamanhos de capturas de tela traz a tabela completa, e o post sobre os requisitos de capturas de tela do Google Play detalha as regras do Play. Se você também precisa do gráfico de recursos, veja nosso guia do gráfico de recursos do Google Play.

Uma dica prática: coloque os frames de um conjunto lado a lado, numa única linha, com um espaçamento fixo. Você vê o conjunto inteiro do jeito que quem está na loja rola a tela, e percebe na hora um título mais comprido ou uma cor fora do tom.

Como montar um componente de captura reutilizável

A diferença entre um arquivo do Figma fácil de manter e um que dá preguiça de abrir são os componentes. Monte o layout uma vez e transforme cada captura numa instância.

1. O bloco de legenda

Crie um frame com auto layout vertical contendo o título e um subtítulo opcional. Defina a largura para preencher o frame pai e a altura para abraçar o conteúdo, assim um título de duas linhas empurra o dispositivo para baixo em vez de ficar por cima dele. Use estilos de texto para os dois, para que mudar a fonte ou o tamanho depois seja uma edição só. Texto grande funciona melhor aqui: o título é lido no tamanho de miniatura nos resultados de busca.

2. O mockup do dispositivo

Dentro da moldura do dispositivo, coloque um retângulo do tamanho da área da tela com a captura do seu app como preenchimento de imagem no modo Fill. Mascarar o retângulo com o formato da tela resolve os cantos arredondados. Faça do mockup um componente próprio, com a imagem da tela exposta como troca de instância ou propriedade de imagem, para que trocar a captura não signifique cavar entre as camadas.

3. O componente da captura

Envolva o bloco de legenda e o mockup do dispositivo num frame pai no tamanho da loja, com auto layout vertical, padding e um preenchimento de fundo. Adicione propriedades de componente para o texto do título e para a imagem da tela. Variantes ajudam se você usa alguns layouts, por exemplo dispositivo centralizado, dispositivo cortado embaixo ou nenhum dispositivo para uma captura de fechamento.

Agora cada captura do conjunto é uma instância em que você edita duas propriedades: o título e a imagem. Uma mudança de padding, fonte ou fundo no componente principal atualiza todas.

Onde encontrar mockups de dispositivo para o Figma

  • Figma Community. Pesquise o nome do dispositivo mais "mockup". Há muitos arquivos gratuitos com molduras atuais de iPhone, iPad e Pixel. Confira a licença de cada um, e confira se a área da tela bate com o dispositivo em que você fez a captura, senão a sua imagem vai ficar esticada.
  • Apple Design Resources. A página de recursos de design da Apple oferece molduras oficiais de produto, mas em arquivos de Photoshop e PNG, não do Figma. Você pode colocar o PNG sobre o retângulo da tela no Figma. A Apple pede que você leia as diretrizes de marketing dela ao usar as molduras em materiais de marketing. A mesma página tem um UI kit oficial de iOS e iPadOS no Figma, que ajuda se você está fazendo o mockup de uma tela que ainda não foi construída.
  • Nenhum dispositivo. Muitos conjuntos bons dispensam a moldura e usam a captura de ponta a ponta, ou dão zoom em uma única parte da interface. É uma escolha de estilo, não uma exigência.

Seja lá o que você colocar na moldura, comece com uma captura limpa: barra de status fixa em 9:41, dados realistas, nenhuma sobreposição de debug. Nosso guia de capturas de tela limpas no simulador e no emulador tem os comandos.

Como exportar capturas de tela da App Store do Figma em pixels exatos

  1. Selecione todos os frames de captura do conjunto (não as instâncias dentro deles).
  2. Na seção Export do painel da direita, adicione uma configuração de exportação: 1x, formato PNG ou JPG.
  3. Exporte. Cada frame vira um arquivo com o nome do frame.

Algumas coisas que costumam dar errado:

  • Multiplicador errado. 2x num frame em tamanho real dobra o tamanho, e a loja recusa o arquivo. Se você vir 2580 × 5592, foi isso que aconteceu.
  • Tamanhos de frame fracionados. Um frame com 1290,5 px de largura é exportado num tamanho que a loja não aceita. Digite as dimensões em vez de arrastar.
  • Transparência. O App Store Connect não aceita imagens com canal alfa, e o Google Play pede JPEG ou PNG de 24 bits sem alfa. Dê a todo frame um fundo sólido; se um PNG ainda for recusado por transparência, exporte em JPG.
  • Ordem dos arquivos. Nomeie os frames com um prefixo numérico (01-hook, 02-proof) para que os arquivos fiquem na ordem de envio.

O problema da localização

É aqui que o Figma fica caro. Se a sua página da loja sai em cinco idiomas, você tem cinco conjuntos de frames por dispositivo, cada um com seus próprios títulos para editar, conferir e exportar. Some iPad e Google Play e você está mantendo quinze conjuntos.

Dois jeitos de deixar isso administrável:

  • Duplicar por idioma, mantendo os componentes compartilhados. Copie a linha de instâncias para cada idioma e sobrescreva só o texto. As mudanças de layout continuam vindo do componente principal. Funciona em qualquer plano, mas toda mudança de texto é uma edição manual em cada idioma.
  • Variáveis de string com modos. Guarde cada título como uma variável de string e adicione um modo por idioma. Trocar o modo de um frame troca o texto. Segundo a central de ajuda do Figma, os modos estão disponíveis nos planos Education, Professional, Organization e Enterprise, e o número de modos por coleção depende do plano.

Nenhum dos dois resolve a expansão do texto. Títulos em alemão e finlandês costumam ficar mais longos que em inglês, e um título que cabe em duas linhas em inglês pode precisar de três. Confira cada frame e, para idiomas da direita para a esquerda, espelhe o layout, e não só o texto. A tradução em si também merece cuidado; nossos guias sobre como localizar capturas de tela da App Store e por que traduzir não é localizar entram nos dois assuntos.

As páginas de produto personalizadas multiplicam o trabalho de novo, já que cada uma costuma ter suas próprias capturas. Se você está planejando essas páginas, vale ler nosso guia de páginas de produto personalizadas antes de montar o arquivo.

Quando o Figma é a ferramenta certa e quando um gerador é mais rápido

A gente faz um gerador de capturas de tela, então leve isso em conta. Mas a gente diria, com sinceridade, para alguns times continuarem no Figma.

SituaçãoFigmaUm gerador de capturas de tela
Designer no time, sistema de marca forteNormalmente a melhor opção: controle total, componentes de verdadePode parecer limitante
Conceito fora do comum (ilustrado, panorâmico, muita arte personalizada)Melhor opçãoDepende da ferramenta
Um idioma, uma loja, um dispositivoTranquilo; o custo de configuração se paga uma vezChega mais rápido a uma primeira versão
Vários idiomasCada idioma é mais um conjunto para editar e exportarA tradução normalmente já vem embutida
iOS e AndroidFrames separados para cada tamanho de lojaOs tamanhos das lojas normalmente são predefinições
EnvioExportar e depois enviar à mão ou com um scriptAlgumas ferramentas enviam direto para as lojas

Um meio-termo comum: crie o visual principal e a primeira captura no Figma, onde você tem controle total, e depois use um gerador para a parte repetitiva de produzir todos os tamanhos e idiomas. Nossa comparação entre Launch Shots e Figma coloca os prós e contras lado a lado, e nossa seleção de geradores de capturas de tela mostra as outras opções.

Se você for pelo caminho do gerador, o Launch Shots mantém os tamanhos das lojas atualizados para cada dispositivo, traduz os títulos para os idiomas das lojas e publica no App Store Connect e no Google Play Console. Ele também tem um servidor MCP se você preferir gerar o conjunto pelo Claude Code ou pelo Cursor.

Experimente agora

Crie capturas de tela prontas para as lojas em minutos — grátis, sem marca d'água na exportação.

Você começa a usar o Launch Shots de graça. Todos os modelos (110+), mais de 220 molduras de dispositivo e mockups 3D, tradução por IA e upload direto para o App Store Connect e o Google Play Console. Sem cartão de crédito.

Começar grátis →

Checklist: capturas de tela da App Store no Figma

  • Frames com os tamanhos exatos da loja digitados (1290 × 2796 ou 1320 × 2868 para iPhone, 2064 × 2752 para iPad, 1080 × 1920 para o Play).
  • Um componente principal com auto layout para a legenda e um mockup de dispositivo aninhado; toda captura é uma instância.
  • Título e imagem da tela expostos como propriedades do componente.
  • Capturas limpas: barra de status em 9:41, dados realistas, proporção igual à do dispositivo.
  • Fundo sólido em todo frame; exportação em 1x como PNG ou JPG; prefixos numéricos nos nomes dos frames.
  • Um plano para os idiomas antes de começar, seja com linhas duplicadas ou com modos de variáveis.
  • Conteúdo conferido com o básico das nossas boas práticas para capturas de tela, começando pelo que vai na primeira captura de tela.

Perguntas frequentes

04
Que tamanho de frame usar no Figma para capturas de tela da App Store?
Use o tamanho exato em pixels que o App Store Connect aceita para aquele espaço. Para o maior espaço de iPhone, isso é 1320 × 2868 ou 1290 × 2796 na vertical; para o espaço do iPad de 13 polegadas, 2064 × 2752. O Figma trata as unidades como pixels em 1x, então um frame com esses números é exportado exatamente nesse tamanho, sem escala.
Devo exportar as capturas de tela da App Store do Figma em 1x ou 2x?
Exporte em 1x quando o frame já estiver no tamanho em pixels da loja. Uma exportação em 2x de um frame de 1290 × 2796 gera 2580 × 5592, que o App Store Connect não aceita. Use 2x só se você montou os frames de propósito na metade do tamanho, e confira as dimensões do arquivo exportado antes de enviar, já que a loja só aceita tamanhos específicos.
Existe um modelo gratuito do Figma para capturas de tela da App Store?
Sim. A Figma Community tem muitos modelos gratuitos de capturas de tela da App Store e arquivos de mockup de dispositivo, e a Apple publica um UI kit oficial de iOS e iPadOS para Figma. Confira os tamanhos de frame de cada arquivo com as especificações atuais de capturas de tela da Apple antes de usar, porque modelos mais antigos da comunidade muitas vezes foram feitos para tamanhos que a Apple não lista mais como o espaço principal de iPhone.
Como localizar capturas de tela da App Store no Figma?
O jeito mais comum é duplicar o conjunto inteiro de frames para cada idioma e trocar o texto, mantendo o layout em componentes compartilhados para que as mudanças de design continuem se propagando. Nos planos pagos do Figma, variáveis de string com um modo por idioma deixam você trocar o texto de um frame mudando o modo. De qualquer forma, confira cada frame em busca de texto que cresce ou quebra linha no novo idioma.