Como copiar um QR code para o Figma como vetores editáveis

Como copiar um QR code para o Figma

Copiar um QR code para o Figma são quatro ações e nenhum plugin: monte o código no navegador, copie como SVG, cole em uma parte vazia da tela e depois defina o tamanho numericamente com a trava de proporção ligada. O caminho inteiro leva menos de um minuto, e o resultado é um grupo de camadas vetoriais que você pode recolorir e exportar como qualquer outro desenho do Figma.

1. Monte o código. Abra o gerador, digite a URL ou outro conteúdo e ajuste forma, padrão, olhos, cores, moldura e logotipo. O que chega no Figma é exatamente o que a prévia mostra, então o estilo se define aqui e não depois da colagem.
2. Abra o menu de download. Clique na seta ao lado do botão Download e escolha Copy to Figma. O botão pisca Copied, que é a confirmação de que a marcação SVG chegou à sua área de transferência.
3. Cole na tela vazia. Vá para o Figma, clique em uma área vazia para que nada esteja selecionado e nenhuma camada de texto esteja em modo de edição, e então aperte Cmd+V no macOS ou Ctrl+V no Windows.
4. Confira as camadas. O código chega como um grupo contendo Background e QR-code, mais Frame e Logo quando o design os usou. Ver esses nomes é como você sabe que o Figma interpretou vetores em vez de colar uma imagem.
5. Trave as proporções antes de redimensionar. Ligue a trava de proporção no painel da direita e depois digite a largura que você precisa em vez de arrastar uma alça de canto. Largura e altura precisam continuar iguais.
6. Leia o código na tela. Coloque a tela em 100% e leia o código com um celular. Confirme que o destino que abre é o que você queria antes que o arquivo chegue a mais alguém.

Copy to Figma não faz nada enquanto o campo de conteúdo está vazio. O gerador mostra um código de exemplo estilizado antes de você digitar qualquer coisa, e copiar esse exemplo colocaria no seu design um código que não aponta para lugar nenhum, então o botão pisca o campo vazio em vez de escrever na área de transferência.

O que realmente chega na tela do Figma

Um código do KoloQR colado chega como um grupo de camadas nomeadas em vez de uma imagem achatada: um contêiner com Background e QR-code, e com Frame e Logo acrescentados quando o design os usa. Cada módulo é um traçado vetorial de verdade, então qualquer camada pode ser selecionada, recolorida, ocultada ou exportada sozinha.

O SVG carrega largura e altura explícitas tiradas da sua viewBox, então o código chega no tamanho real em vez da caixa padrão para a qual o Figma recorre quando um arquivo não declara dimensões. Isso importa principalmente porque um código colado na escala errada costuma ser corrigido arrastando uma alça, e é assim que as proporções se perdem.

Os rótulos da moldura chegam como traçados contornados e não como texto vivo. Um rótulo curvo é emitido como um único traçado mesclado em vez de um objeto por letra, então as palavras são uma forma só, que você pode recolorir e mover, mas não redigitar. Mudar o texto significa editar o rótulo no gerador e copiar o código de novo — o que é a ordem certa de qualquer forma, já que o arco do rótulo é calculado a partir da moldura.

Copiar vários códigos para um mesmo arquivo do Figma é seguro. Todo id que a marcação referencia — máscaras de recorte, o traçado invisível pelo qual um rótulo curvo corre — recebe um prefixo único no momento em que você copia. Dois SVGs compartilhando um id é o motivo habitual de um segundo gráfico colado ser desenhado com o recorte do primeiro, e este fluxo evita isso por construção.

Os nomes de camada puramente cosméticos ficam limpos de propósito. Background, QR-code, Frame e Logo não são referenciados por nada dentro do arquivo, então mantêm seus nomes legíveis no painel de camadas do Figma em vez de carregar um prefixo aleatório.

SVG ou PNG: qual formato levar para o Figma

Use SVG para tudo que vai ser redimensionado, recolorido ou impresso, e PNG só para uma maquete que você vai jogar fora. O SVG é o único dos dois que continua editável no Figma; um PNG é uma imagem pronta no momento em que é exportado, e ampliá-lo dentro de uma moldura suaviza a borda de cada módulo.

A assimetria pega as pessoas de surpresa na entrega: o Figma exporta PDF mas não importa. Um QR code em PDF de qualquer gerador precisa ser convertido, ou substituído pelo SVG, antes de entrar em um layout do Figma.

PNG não está errado, ele só é definitivo. A exportação PNG do KoloQR renderiza o código a quatro vezes o tamanho em tela, o que basta para uma maquete e para impressão pequena em tamanho conhecido, mas esses pixels são fixos. Se o layout depois precisar do código no dobro do tamanho, o PNG tem de ser gerado de novo em vez de escalado — veja resolução de QR code para a conta que decide quão grande um código raster pode ser impresso com segurança.

Por que às vezes a colagem vira texto, ou nada

Quase toda colagem que falha é uma de três coisas: uma camada de texto estava em modo de edição, a escrita na área de transferência foi bloqueada, ou a colagem foi para uma superfície que não interpreta marcação SVG. Nenhuma delas é defeito do código em si, e as três têm a mesma alternativa — baixar o arquivo SVG e arrastá-lo.

• A marcação aparece como caracteres visíveis. Uma camada de texto estava em modo de edição quando você apertou Cmd+V, então o Figma inseriu o texto da área de transferência como texto. Aperte Esc, clique na tela vazia e cole de novo.
• Não aparece nada. O navegador recusou a escrita na área de transferência. O acesso à área de transferência exige uma página segura em HTTPS e um clique de verdade, e algumas extensões de privacidade bloqueiam isso por completo. Use o download SVG em vez de discutir com a permissão.
• Outra superfície se comporta de outro jeito. FigJam e Figma Slides não tratam a marcação colada como a tela de design. Se a colagem chegar como texto lá, arraste o arquivo .svg baixado para o quadro.
• O botão Copy to Figma pisca o campo de entrada. O campo de conteúdo está vazio, então ainda não existe um código real para copiar. Digite primeiro a URL ou outro conteúdo.

Vale conhecer o caminho alternativo antes de precisar dele: Download, depois SVG, depois arrastar o arquivo .svg do seu gerenciador de arquivos para a tela do Figma. O Figma importa um SVG solto nas mesmas camadas vetoriais que uma colagem produz, então nada muda no resultado — só o número de passos.

Quais edições no Figma são seguras e quais quebram o código

Recolorir, mover, girar, agrupar, enquadrar e redimensionar proporcionalmente são operações seguras. Esticar um eixo, cortar a zona de silêncio, baixar o contraste e operações booleanas que removem geometria não são. Um QR code é decodificado a partir da geometria de uma grade quadrada, então qualquer edição que mude essa grade muda o que o leitor lê.

O contraste é a decisão que vale resolver antes da cópia e não depois da colagem. A prévia do gerador informa uma razão de contraste para o par escolhido e diz claramente quando uma combinação pode ser difícil de ler, uma checagem para a qual o Figma não tem equivalente: o Figma vai desenhar sem reclamar um código cinza médio sobre um fundo bege médio e não vai apontar nada.

Se o design cobre parte do símbolo — um logotipo no meio, uma forma cruzando um canto —, a tolerância que absorve isso é definida na geração, não no Figma. Veja correção de erros para saber quanto de um símbolo cada nível recupera, e gere no nível que o design precisa antes de copiar.

Uma limitação honesta: nenhuma regra aqui garante a leitura no aparelho de outra pessoa. Razões de contraste, tamanhos de módulo e níveis de correção de erros inclinam as chances a seu favor, e um teste físico em dois celulares é o que de fato resolve.

Dimensionar um QR code dentro de um frame do Figma

O Figma mede em pixels e não tem unidades físicas, então dimensione um QR code decidindo o que um pixel significa no meio final e mantendo isso. A 96 px por polegada, 1 cm são 37,8 px, então um código de 2 cm são 76 px. A 300 px por polegada, esse mesmo código de 2 cm são 236 px. Para designs de tela, mire em pelo menos 4 px por módulo.

A contagem de módulos segue o conteúdo, não o design. Uma URL curta com correção de erros média costuma cair em 29 ou 33 módulos, que são 37 ou 41 incluindo a zona de silêncio. A 4 px por módulo isso dá aproximadamente 150–165 px na tela, e bem abaixo disso a definição dos módulos começa a se perder em uma tela de densidade padrão.

As regras de impressão não mudam porque o layout vive no Figma. Um código impresso precisa de cerca de 1 cm de largura para cada 10 cm de distância de leitura, com 2 × 2 cm como piso prático para leitura de perto, e módulos impressos devem ficar em 0,4 mm ou mais — 0,5 mm em papel não revestido, onde o ganho de ponto engrossa os módulos escuros.

Defina a largura numericamente em vez de arrastar uma alça. Um canto arrastado com a trava de proporção desligada é de longe a forma mais comum de um QR code sair de um arquivo do Figma sutilmente esticado, e uma distorção de 4% é invisível na tela e fatal no leitor.

Exportar o QR code de volta do Figma

Selecione a camada de nível superior do código e exporte SVG para entrega vetorial, PDF para impressão, ou PNG em 3x ou 4x para telas. Exportar o frame em vez do código exporta o layout ao redor dele, que é o que uma gráfica quer e quase nunca o que quem desenvolve quer.

• SVG. Mantenha “Include id attribute” ligado se quiser que os nomes das camadas sobrevivam no arquivo. “Outline text” não muda nada aqui, porque os rótulos da moldura já chegaram como traçados.
• PDF. O Figma exporta PDF mesmo sem conseguir importar, o que faz do PDF a entrega natural para um layout impresso que contém o código.
• PNG em 3x ou 4x. Um código de 100 px exportado em 4x são 400 px, o que é um asset de tela. Não trate como asset de impressão — parta do tamanho impresso de trás para frente.
• Nada em 1x para impressão. Uma exportação raster nunca é maior do que os pixels que ela tem, e o teto de impressão é aproximadamente largura em pixels ÷ 300 × 2,54 centímetros.

Para um código que vai aparecer em um site, a melhor entrega muitas vezes não é uma exportação. Quem desenvolve pode gerar o código em tempo de build ou entregar o arquivo SVG direto, e qualquer uma das duas ganha de uma imagem exportada de um arquivo de design que ninguém vai lembrar de atualizar quando a URL mudar.

Copy to Figma versus um plugin de QR code do Figma

Um plugin gera o código dentro do Figma e pode regerar ou gerar em lote sem sair do arquivo. O caminho pela área de transferência gera no navegador e dá mais controle sobre forma, moldura e logotipo. Os dois produzem um código estático: nenhum consegue mudar para onde um código já colocado aponta sem substituir o desenho.

Use um plugin quando o problema for volume. Gerar quarenta crachás de evento a partir de uma planilha dentro do Figma é um trabalho que o caminho da área de transferência não consegue tornar agradável, e um plugin de lote é simplesmente a ferramenta melhor para isso. O KoloQR não tem plugin do Figma, e esta página não vai fingir que isso é uma vantagem.

Use a área de transferência quando o problema for design. Códigos circulares e de outras formas personalizadas, molduras, estilos decorativos de olhos e um logotipo colocado com a correção de erros certa atrás são decisões tomadas em um gerador, e chegam ao Figma completamente formadas — veja QR codes redondos e QR codes de marca para ver como isso fica.

Uma diferença duradoura merece ser dita: um plugin é uma dependência. Plugins do Figma são atualizados por quem os escreve, quebram quando a API de plugins muda, e de vez em quando somem da Community. SVG pela área de transferência é uma colagem — não há nada nesse caminho que possa deixar de ser mantido.

O que você não consegue fazer depois que o código está no Figma

O código colado é um QR code estático, então o destino está escrito na geometria em vez de guardado ao lado dela. O Figma consegue reestilizar essa geometria mas não consegue recalculá-la, o que deixa quatro desejos comuns fora de alcance.

• Mudar para onde ele aponta. Editar a URL significa gerar um símbolo novo. Não existe campo para editar, nem no Figma nem em lugar nenhum.
• Aumentar o nível de correção de erros depois. O nível decide como os dados são dispostos, então ele muda o próprio símbolo em vez de ser uma propriedade do desenho pronto.
• Redigitar um rótulo de moldura. As palavras chegaram como traçados contornados. Mude no gerador e copie o código de novo.
• Deixar um logotipo raster nítido. Um logotipo enviado como PNG ou JPG é embutido dentro do SVG como imagem, então continua raster dentro de um arquivo que no resto é vetorial e não vai ganhar nitidez quando o código for ampliado.

O logotipo raster é o único com uma solução limpa. Envie o logotipo como SVG quando você tiver uma versão vetorial, ou apague a camada Logo no Figma e coloque o seu próprio logotipo vetorial no espaço que ela ocupava — o símbolo já foi gerado com espaço reservado para ele, e a correção de erros que recupera os módulos cobertos não se importa com qual desenho fica por cima.

Também não há analytics, e isso é uma propriedade dos códigos estáticos e não deste fluxo. Se o briefing precisa de contagem de leituras ou de um destino que possa mudar depois da impressão, um código dinâmico de uma plataforma hospedada é a ferramenta certa, e o design continua entrando no Figma da mesma maneira.

Manter o código sustentável em um design system

Transforme o código colado em um componente do Figma na primeira vez que usá-lo. Quando o destino mudar, cole o código novo no componente principal uma vez e toda instância em todo arquivo se atualiza — o mais perto que um QR code estático chega de ser editável.

Nomeie o componente pelo destino e não pelo design. Um QR code é ilegível para uma pessoa, então o nome da camada é o único lugar em que a URL é legível: “QR / cardápio-primavera” diz à próxima pessoa o que ela está vendo, e “QR code 3” não diz nada. Coloque a URL completa na descrição do componente, onde ela sobrevive ao copiar e colar entre arquivos.

Guarde os ajustes de origem onde a próxima pessoa consiga achar. Forma, cores, moldura, logotipo e nível de correção de erros não são recuperáveis a partir do desenho, então uma nota na descrição do componente — ou o link do gerador que o produziu — é o que torna o código reproduzível seis meses depois.

Não deixe duas versões do mesmo código viverem em um arquivo. O modo de falha é específico e comum: um código antigo fica em uma prancheta que ninguém reexportou, vai para a gráfica, e manda as pessoas para uma URL que já foi desativada. Um componente, um destino, um lugar para atualizar.

Um teste de leitura antes da entrega

1. Leia a tela em 100%. Coloque o zoom do Figma em 100% e leia o código na tela com um celular. Uma falha aqui é um problema de design — contraste, distorção ou zona de silêncio coberta.
2. Leia o destino caractere por caractere. Confira a URL que abre contra a que você queria, incluindo o protocolo e quaisquer parâmetros de rastreamento. Um código que é lido perfeitamente para a página errada é a falha cara.
3. Leia a exportação, não a tela. Exporte a prancheta do jeito que ela vai de fato ser publicada e leia esse arquivo. Efeitos, opacidade e camadas de fundo se comportam de outro jeito em uma exportação do que parecem na tela.
4. Imprima uma prova no tamanho final. Se o design vai para a gráfica, imprima uma página no tamanho final no papel real e leia ali. O contraste da tela favorece tudo.
5. Teste nas duas plataformas. Leia com um iPhone e com um celular Android. Os apps de câmera binarizam de formas diferentes, e um código no limite muitas vezes passa em um e falha no outro.
6. Teste na luz do ambiente. Leia na iluminação em que o código vai viver — um bar escuro, uma janela ensolarada, um cartão plastificado brilhante em ângulo.

Os dois últimos passos são os que pegam o que o layout não consegue mostrar. Um código que passa em um monitor de mesa claro e falha em um cardápio plastificado com pouca luz não mudou em nada — as condições de leitura é que mudaram.

O mesmo SVG da área de transferência funciona fora do Figma

A área de transferência guarda marcação SVG padrão, não um formato específico do Figma, então a mesma cópia cola no Illustrator, no Sketch, no Affinity Designer e no Inkscape como vetores editáveis. Nada no fluxo está preso ao Figma além do nome da entrada de menu.

Ferramentas que esperam um arquivo em vez de marcação — editores de documentos, softwares de apresentação, a maioria das ferramentas de design no navegador — querem o download SVG. Baixar e posicionar o arquivo dá o mesmo desenho vetorial; só o transporte muda.

Onde uma ferramenta não aceita nenhum dos dois, o PNG é a alternativa, e a decisão de tamanho se antecipa. Exporte o código no tamanho em pixels que o meio final precisa em vez de em um tamanho conveniente, porque um código raster que precise ser ampliado depois não tem reparo bom.