Codia
330 000+ utilizadores · 6 000+ gostos na Figma Community

Captura de ecrã para Figma: transforme qualquer imagem em camadas editáveis

Carregue uma captura de ecrã, um PNG ou um JPG e obtenha um design do Figma que pode mesmo editar: texto real, formas, imagens e camadas agrupadas, em vez de uma única imagem plana. Use o plugin gratuito para o Figma ou converta diretamente no navegador.

Os plugins do Figma funcionam num computador. No telemóvel, experimente primeiro a versão para navegador.

5 créditos de IA gratuitos por mês · Sem cartão de crédito · Funciona no plano gratuito do Figma

Sem plugin? Converta no navegador

Concebido para fluxos de trabalho criativos comuns

Resultados reais

Capturas de ecrã típicas, convertidas em camadas editáveis

Um site, um dashboard e uma aplicação móvel, cada um processado pelo mesmo motor de captura para design que o plugin para o Figma utiliza. Títulos, botões, cartões e fotografias regressam, cada um, como uma camada própria.

Captura de ecrã original
Site: Captura de ecrã original
Após a conversão: camadas editáveis
Uma landing page de viagens. As ligações de navegação, os botões, as fotografias e o cartão do itinerário são camadas separadas, e o título selecionado é texto editável.

Uma landing page de viagens. As ligações de navegação, os botões, as fotografias e o cartão do itinerário são camadas separadas, e o título selecionado é texto editável.

Os ecrãs de exemplo são produtos fictícios gerados para esta demonstração; as conversões são reais. Apresentado no Codia Studio com o painel de camadas aberto. O plugin para o Figma cria as suas camadas a partir da mesma conversão, e os resultados dependem da imagem de origem.

O que pode converter

Imagem para Figma em qualquer tipo de UI

Se consegue fazer uma captura de ecrã, consegue convertê-la. O Codia transforma imagens PNG, JPG e WebP de produtos reais e mockups em designs do Figma.

Captura de ecrã de uma landing page convertida em camadas editáveis de texto, imagem e layout no Figma
  • Ecrãs de aplicações iOS e Android

    Reconstrua ecrãs de aplicações a partir do telemóvel, de uma build do TestFlight ou de uma página da loja, sem redesenhar cada componente.

  • Sites e landing pages

    Transforme uma página web capturada num layout editável. Para um URL publicado, o Web to Figma importa a página diretamente.

  • Dashboards SaaS e painéis de administração

    Tabelas, gráficos, barras laterais e formulários densos regressam como elementos editáveis, prontos para um redesign.

  • Referências de design e mood boards

    Transforme uma imagem de inspiração ou um ecrã de referência em camadas que pode estudar, reestilizar e adaptar.

  • UI antiga sem ficheiros de origem

    Perdeu o ficheiro de design original? Recupere uma versão editável a partir de uma captura de ecrã do produto publicado.

  • Imagens PNG, JPG e WebP

    Funciona com qualquer imagem de UI, de uma captura rápida a um mockup exportado. Imagens mais nítidas e com maior resolução dão texto mais limpo.

Como funciona

Como converter uma captura de ecrã para Figma

Três passos no plugin do Figma. A maioria dos ecrãs fica pronta a editar em minutos.

  1. 1

    Instale o plugin gratuito

    Abra o Codia AI Design na Figma Community e execute-o em qualquer ficheiro do Figma.

  2. 2

    Carregue a captura de ecrã

    Arraste um PNG, JPG ou WebP: um ecrã de aplicação, uma página web, um dashboard ou uma referência de design.

  3. 3

    Edite as camadas geradas

    O Codia reconstrói texto, formas, imagens e hierarquia de camadas na sua tela. Edite-o como qualquer outro design do Figma.

O plugin lê a captura de ecrã, reconhece o texto e os elementos de UI e reconstrói-os como camadas na sua tela do Figma.

Prefere o navegador?

Carregue a imagem no topo desta página. O Codia Studio abre-a como uma tela editável; clique em Copiar para o Figma e cole-a no seu ficheiro.

Carregar uma captura de ecrã

O que obtém

Camadas editáveis do Figma, não uma imagem achatada

Uma captura de ecrã colada no Figma é uma única imagem. Uma captura convertida é um design: cada elemento é uma camada própria.

Camadas de texto reais

Títulos, etiquetas e parágrafos regressam como texto editável, para que possa alterar o conteúdo sem voltar a escrever o ecrã.

Hierarquia de UI, não formas soltas

Contentores, listas, botões e cartões são agrupados numa árvore de camadas que pode mover, redimensionar e reestilizar.

Imagens e ícones em camadas próprias

Fotografias, ilustrações e ícones ficam separados do fundo, em vez de fundidos nele.

Tipos de letra e texto multilingue

A deteção de tipos de letra mantém o aspeto original, e o texto é reconhecido em vários idiomas, não só em inglês.

Saída em SVG quando precisa de vetores

Converta a mesma captura de ecrã em SVG escalável para ícones, ilustrações e recursos que têm de se manter nítidos.

Pronto para passar do design ao código

Uma árvore de camadas estruturada é um bom ponto de partida para o Codia Design to Code e outras ferramentas de Figma para código.

Colar, decalcar ou converter: três formas de levar uma captura de ecrã para o Figma

Colar é imediato, mas fica com uma imagem. Decalcar à mão é editável, mas lento. Converter dá-lhe as duas coisas.

Converter com o CodiaColar a imagemDecalcar à mão
Texto editávelSim, reconhecido como camadas de textoNão, o texto são píxeisSim, reescrito à mão
Estrutura de camadasCamadas agrupadas e aninhadasUma única imagem planaConstruída à mão
Tipos de letra e coresDetetados na imagemApenas visíveisAcertados a olho
Tempo por ecrãMinutos, depois afinarSegundosMuitas vezes, horas

O que dizem os designers na Figma Community

Excertos de comentários públicos na página do plugin Codia AI Design, nas palavras originais dos autores.

Very impressed! I was skeptical, having tried other 'screenshot to figma' plugins with terrible results. This Codia plugin rapidly created an almost pixel-perfect replica of the screenshots, with all the correct vectors and layers. … The free 5 credits is more than enough to test the outputs before making a purchase decision. I'm subscribing now.
DDavid Champion@davidchampion ·
We tested it today. With various screen shots. Very cool. And very simple to use.
LLars@lars63 ·
It was super helpful! Codia allows you to use a free version with pre set image formats (size for example). I recommend it!
ddaniela zavala@danielazavala ·

Preços de captura de ecrã para Figma

Comece grátis com 5 créditos de IA por mês. Faça upgrade para capturas maiores, carregamentos em lote e mais créditos.

Perguntas frequentes sobre captura de ecrã para Figma

Respostas sobre como converter capturas de ecrã e imagens em designs editáveis do Figma.

Tem mais perguntas? Fale connosco e ajudamos.

Contactar o suporte
Pronto para a sua próxima captura de ecrã

Converta a sua primeira captura de ecrã para Figma, grátis

Instale o plugin no Figma ou carregue uma imagem no navegador. Todas as contas recebem créditos de IA gratuitos todos os meses.

Sem cartão de crédito · Ficheiros não usados para treino · 5 créditos de IA gratuitos por mês