Como importar para o Figma uma página que está atrás de login

A página que você precisa no Figma costuma ser aquela para a qual não dá para mandar link. Por que colar a URL devolve um formulário de login, e o que conferir nas ferramentas que passam disso.

A página que você realmente precisa no Figma costuma ser aquela para a qual não dá para mandar link. Uma ferramenta administrativa interna. Um painel que só se enche de dados depois do login. Uma build de staging que ainda não é pública. Você cola a URL num conversor e ele devolve a tela de login, porque foi exatamente isso que ele viu.

Existe um caminho por fora, e não é truque: é outra arquitetura. Aqui está por que a conversão por URL falha nesses casos, o que as alternativas realmente fazem, e o que conferir antes de passar uma página privada por qualquer uma delas.

Por que colar uma URL não tem como funcionar

Quando uma ferramenta pede uma URL, alguma coisa do lado dela abre essa URL. Um servidor, ou um navegador headless rodando num servidor. Essa máquina tem a própria posição de rede e o próprio pote de cookies vazio. Ela não é você.

Então chega ao seu painel como visitante anônima e recebe exatamente o que um visitante anônimo recebe: um formulário de login. Tentar de novo não muda nada, porque o que falta é a sua sessão, e a sua sessão mora no seu navegador.

É por isso também que a falha é tão consistente. Não é um bug que alguém possa corrigir: um servidor não consegue ver uma página que exige ser você.

As gambiarras que não funcionam

• Colar seu cookie de sessão na ferramenta. Algumas aceitam cabeçalhos. Deixando de lado o desconforto de entregar um token de sessão a terceiros, a autenticação moderna costuma ter vida curta e não depender só de um cookie, então acaba falhando de qualquer jeito.
• Deixar a página pública por um tempo. Às vezes possível em staging. Raramente em algo real, e muda o que a página renderiza.
• Tirar print e redesenhar. Você fica com uma imagem. O motivo inteiro de importar para o Figma são camadas editáveis, e um print não tem nenhuma.

O que funciona: capturar no navegador em que você já está

Se a conversão acontece dentro da sua própria aba, o problema da sessão desaparece; não porque foi resolvido, mas porque nunca chegou a existir. A página já está renderizada na sua frente, logada, com os dados carregados e os menus no estado em que você deixou. Um conversor rodando ali lê o que você vê.

É essa a abordagem dos importadores baseados em extensão de navegador, e várias ferramentas hoje oferecem uma. Vale dizer com clareza: capturar uma página logada não é exclusividade de nenhuma ferramenta. A html.to.design tem uma extensão para páginas atrás de login ou VPN. Outras também. Se você ler em algum lugar que alguém é o único capaz disso, confira.

O que muda entre elas é o que acontece com a captura depois.

A pergunta que realmente importa: para onde vai a captura?

Depois que seu navegador leu a página, esses dados precisam chegar ao Figma. Há dois caminhos, e a diferença pesa mais que a etapa de captura.

Passando por um servidor. A extensão envia a captura e o plugin do Figma baixa. É prático, e significa que o conteúdo de uma página privada — os textos, os nomes de clientes, os números do painel — atravessa uma infraestrutura que você não controla. Ferramentas assim geralmente oferecem também uma opção de arquivo local, em que você baixa a captura e entrega ao plugin você mesmo. Essa opção costuma não ser a padrão, e você precisa saber que existe para escolher.

Sem servidor nenhum. A captura vai para a área de transferência ou para o seu disco, e o plugin do Figma lê de lá. Nada é enviado porque não há para onde enviar.

Se você vai capturar uma página sob NDA, uma com dados de clientes, ou qualquer coisa de um ambiente regulado, é essa a distinção que o time de segurança vai querer. Não «funciona atrás de login», porque nessa categoria tudo funciona, mas «o conteúdo sai da máquina, e eu consigo verificar».

Como verificar em vez de acreditar

Duas checagens, as duas rápidas.

Ler o manifest do plugin do Figma

Todo plugin do Figma declara o acesso de rede no manifest, e o Figma faz valer essa declaração: um plugin que declara nenhum não consegue fazer requisição, não importa o que o código tente. O Snapture Import declara:

"networkAccess": { "allowedDomains": ["none"] }

É uma capacidade que o plugin não tem, não uma política que alguém promete cumprir. Você pode ler o manifest de qualquer plugin instalado.

Olhar a aba de rede

Abra o DevTools, vá em Rede e dispare uma captura. Você vê as requisições que a extensão faz. No caso do Snapture, são as imagens da própria página, para que entrem no seu arquivo, mais uma checagem de licença se você tem plano pago. Se uma ferramenta estiver enviando o conteúdo da página, é aqui que fica visível.

O que vem e o que não vem

Capturar a página renderizada quer dizer que você recebe o estado que está olhando, inclusive coisas que uma ferramenta por URL não alcançaria nem numa página pública.

• Menus, modais e popovers abertos continuam abertos, porque a captura lê o DOM como ele está em vez de recarregar.
• Dados que só existem depois do login — linhas de tabela, valores de gráfico, seu próprio nome no canto — vêm como texto de verdade.
• Campos de senha devem ser mascarados pela ferramenta na hora da captura. O Snapture troca o valor por pontos antes de escrever qualquer coisa; confira se a sua faz o mesmo antes de capturar um formulário que você preencheu.

O que não vem como camadas em ferramenta nenhuma: canvas WebGL, iframes de outra origem e quadros de vídeo. Nada transforma isso em vetores, porque esses pixels não são descritos pelo DOM. O comportamento razoável é inserir um print nítido exatamente daquela região em vez de um retângulo cinza, e é o que o Snapture faz.

Uma sequência prática para um painel interno

1. Faça login e deixe a página no estado que você quer, incluindo qualquer painel ou modal que precise capturar.
2. Role uma vez até o fim e volte. Painéis carregam linhas e gráficos aos poucos, e o que não foi renderizado não pode ser capturado.
3. Capture a página inteira, ou arraste uma região se só precisa de um painel.
4. Cole no Figma. Se fontes forem substituídas, instale as que a página usava e reimporte: fonte substituída remede o texto e desloca tudo o que vem depois.

Se o painel for muito grande, capture a seção de que você precisa em vez da página completa. Toda ferramenta tem um orçamento, e uma captura de região da parte que você realmente quer é mais rápida e mais exata que uma página inteira que bateu num limite no meio do caminho.

Resumindo

Conversores por URL não conseguem ver atrás de um login, e isso é estrutural, não uma lacuna que alguém vai fechar. Captura por extensão de navegador resolve, e várias ferramentas oferecem. A pergunta que vale a pena não é se uma ferramenta captura página logada, mas se o conteúdo dessa página sai da sua máquina depois — e essa você mesmo responde em cerca de um minuto.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia