Come copiare un codice QR in Figma come vettori modificabili

Come copiare un codice QR in Figma

Copiare un codice QR in Figma sono quattro gesti e nessun plugin: costruisci il codice nel browser, copialo come SVG, incollalo su una parte vuota della tela e poi imposta la dimensione numericamente con il blocco delle proporzioni attivo. L'intero percorso richiede meno di un minuto, e il risultato è un gruppo di livelli vettoriali che puoi ricolorare ed esportare come qualsiasi altra grafica di Figma.

1. Costruisci il codice. Apri il generatore, inserisci l'URL o un altro contenuto e imposta forma, pattern, occhi, colori, cornice e logo. Ciò che arriva in Figma è esattamente ciò che mostra l'anteprima, quindi lo stile si decide qui e non dopo l'incolla.
2. Apri il menu di download. Fai clic sulla freccia accanto al pulsante Download e scegli Copy to Figma. Il pulsante lampeggia con Copied, che è la conferma che il markup SVG è arrivato negli appunti.
3. Incolla su tela vuota. Passa a Figma, fai clic su un'area vuota così che non ci sia nulla di selezionato e nessun livello di testo in modalità modifica, poi premi Cmd+V su macOS o Ctrl+V su Windows.
4. Controlla i livelli. Il codice arriva come un gruppo che contiene Background e QR-code, più Frame e Logo quando il design li ha usati. Vedere quei nomi è il modo in cui sai che Figma ha interpretato vettori invece di incollare un'immagine.
5. Blocca le proporzioni prima di ridimensionare. Attiva il blocco delle proporzioni nel pannello di destra, poi digita la larghezza che ti serve invece di trascinare una maniglia d'angolo. Larghezza e altezza devono restare uguali.
6. Scansionalo a schermo. Porta la tela al 100% e scansiona il codice con un telefono. Conferma che la destinazione che si apre sia quella prevista prima che il file finisca a qualcun altro.

Copy to Figma non fa nulla finché il campo del contenuto è vuoto. Il generatore mostra un codice segnaposto già stilizzato prima che tu scriva qualcosa, e copiare quel segnaposto metterebbe nel tuo design un codice che non porta da nessuna parte, quindi il pulsante fa lampeggiare il campo vuoto invece di scrivere negli appunti.

Cosa arriva davvero sulla tela di Figma

Un codice KoloQR incollato arriva come gruppo di livelli con un nome anziché come immagine appiattita: un contenitore con Background e QR-code, più Frame e Logo quando il design li usa. Ogni modulo è un vero tracciato vettoriale, quindi qualsiasi livello può essere selezionato, ricolorato, nascosto o esportato da solo.

L'SVG porta una larghezza e un'altezza esplicite prese dal suo viewBox, quindi il codice arriva alla sua dimensione reale invece che nel riquadro predefinito a cui Figma ripiega quando un file non dichiara dimensioni. Conta soprattutto perché un codice incollato alla scala sbagliata di solito si aggiusta trascinando una maniglia, ed è così che si perdono le proporzioni.

Le etichette della cornice arrivano come tracciati con contorno e non come testo vivo. Un'etichetta curva viene emessa come un unico tracciato unito invece che come un oggetto per lettera, quindi le parole sono una forma sola che puoi ricolorare e spostare ma non riscrivere. Cambiare il testo significa modificare l'etichetta nel generatore e ricopiare il codice — che è comunque l'ordine giusto, dato che l'arco dell'etichetta viene calcolato dalla cornice.

Copiare più codici in uno stesso file di Figma è sicuro. Ogni id a cui il markup fa riferimento — maschere di ritaglio, il tracciato invisibile lungo cui corre un'etichetta curva — riceve un prefisso univoco nel momento in cui copi. Due SVG che condividono un id sono il motivo consueto per cui una seconda grafica incollata viene disegnata con il ritaglio della prima, e questo flusso lo evita per costruzione.

I nomi dei livelli puramente estetici restano puliti di proposito. Background, QR-code, Frame e Logo non sono referenziati da nulla all'interno del file, quindi mantengono i loro nomi leggibili nel pannello dei livelli di Figma invece di portare un prefisso casuale.

SVG o PNG: quale formato portare in Figma

Usa l'SVG per tutto ciò che verrà ridimensionato, ricolorato o stampato, e il PNG solo per un mockup che butterai. L'SVG è l'unico dei due a restare modificabile in Figma; un PNG è un'immagine finita nel momento in cui viene esportata, e ingrandirlo dentro una cornice ammorbidisce il bordo di ogni modulo.

L'asimmetria coglie di sorpresa al momento della consegna: Figma esporta il PDF ma non lo importa. Un codice QR in PDF, di qualunque generatore, va convertito o sostituito con l'SVG prima di poter entrare in un impaginato di Figma.

Il PNG non è sbagliato, è semplicemente definitivo. L'esportazione PNG di KoloQR rende il codice a quattro volte la dimensione a schermo, il che basta per un mockup e per una stampa piccola a dimensione nota, ma quei pixel sono fissi. Se in seguito l'impaginato richiede il codice al doppio della dimensione, il PNG va rigenerato e non scalato — vedi risoluzione dei codici QR per il calcolo che decide quanto grande può stampare in sicurezza un codice raster.

Perché a volte incollando esce testo, o non esce nulla

Quasi ogni incolla fallito è una di tre cose: un livello di testo era in modalità modifica, la scrittura negli appunti è stata bloccata, oppure l'incolla è finito su una superficie che non interpreta il markup SVG. Nessuna è un difetto del codice in sé, e tutte e tre hanno lo stesso ripiego: scaricare il file SVG e trascinarlo dentro.

• Il markup compare come caratteri visibili. Un livello di testo era in modalità modifica quando hai premuto Cmd+V, quindi Figma ha inserito il testo degli appunti come testo. Premi Esc, fai clic sulla tela vuota e incolla di nuovo.
• Non compare nulla. Il browser ha rifiutato la scrittura negli appunti. L'accesso agli appunti richiede una pagina HTTPS sicura e un clic vero, e alcune estensioni per la privacy lo bloccano del tutto. Usa il download SVG invece di discutere con il permesso.
• Una superficie diversa si comporta in modo diverso. FigJam e Figma Slides non trattano il markup incollato come la tela di design. Se lì l'incolla arriva come testo, trascina invece il file .svg scaricato sulla board.
• Il pulsante Copy to Figma fa lampeggiare il campo di input. Il campo del contenuto è vuoto, quindi non c'è ancora un codice vero da copiare. Inserisci prima l'URL o un altro contenuto.

Vale la pena conoscere il percorso di riserva prima di averne bisogno: Download, poi SVG, poi trascinare il file .svg dal gestore di file sulla tela di Figma. Figma importa un SVG rilasciato negli stessi livelli vettoriali che produce un incolla, quindi nel risultato non cambia nulla: cambia solo il numero di passaggi.

Quali modifiche in Figma sono sicure e quali rompono il codice

Ricolorare, spostare, ruotare, raggruppare, incorniciare e ridimensionare in proporzione sono operazioni sicure. Stirare un asse, ritagliare la zona di silenzio, abbassare il contrasto e le operazioni booleane che tolgono geometria non lo sono. Un codice QR viene decodificato dalla geometria di una griglia quadrata, quindi qualsiasi modifica che cambia quella griglia cambia ciò che lo scanner legge.

Il contrasto è la scelta da chiudere prima della copia anziché dopo l'incolla. L'anteprima del generatore riporta un rapporto di contrasto per la coppia scelta e dice chiaramente quando una combinazione può risultare difficile da scansionare, un controllo di cui Figma non ha equivalente: Figma disegnerà volentieri un codice grigio medio su uno sfondo beige medio senza segnalarti nulla.

Se il design copre parte del simbolo — un logo al centro, una forma che attraversa un angolo — la tolleranza che lo assorbe si fissa in fase di generazione, non in Figma. Vedi correzione degli errori per sapere quanta parte del simbolo recupera ciascun livello, e genera al livello che il design richiede prima di copiare.

Un limite da dire onestamente: nessuna regola qui garantisce una scansione sull'hardware di qualcun altro. Rapporti di contrasto, dimensioni dei moduli e livelli di correzione degli errori spostano le probabilità a tuo favore, e una prova fisica su due telefoni è ciò che davvero decide.

Dimensionare un codice QR dentro un frame di Figma

Figma misura in pixel e non ha unità fisiche, quindi dimensiona un codice QR decidendo cosa significa un pixel nel supporto finale e tenendo quella decisione. A 96 px per pollice, 1 cm sono 37,8 px, quindi un codice da 2 cm è 76 px. A 300 px per pollice lo stesso codice da 2 cm è 236 px. Per i design a schermo, punta ad almeno 4 px per modulo.

Il numero di moduli segue il contenuto, non il design. Un URL breve con correzione degli errori media di solito si assesta su 29 o 33 moduli, cioè 37 o 41 con la zona di silenzio inclusa. A 4 px per modulo sono circa 150–165 px a schermo, e ben al di sotto la definizione dei moduli inizia a perdersi su un display a densità standard.

Le regole di stampa non cambiano perché l'impaginato vive in Figma. Un codice stampato richiede circa 1 cm di larghezza ogni 10 cm di distanza di lettura, con 2 × 2 cm come soglia pratica per la lettura ravvicinata, e i moduli stampati dovrebbero restare a 0,4 mm o più — 0,5 mm su carta non patinata, dove l'allargamento del punto ingrossa i moduli scuri.

Imposta la larghezza numericamente invece di trascinare una maniglia. Un angolo trascinato con il blocco delle proporzioni disattivato è di gran lunga il modo più comune in cui un codice QR esce da un file di Figma leggermente stirato, e una deformazione del 4% è invisibile a schermo e fatale allo scanner.

Esportare il codice QR fuori da Figma

Seleziona il livello di primo livello del codice ed esporta SVG per la consegna vettoriale, PDF per la stampa, o PNG a 3x o 4x per gli schermi. Esportare il frame invece del codice esporta l'impaginato attorno, che è ciò che vuole una tipografia e quasi mai ciò che vuole chi sviluppa.

• SVG. Tieni attivo «Include id attribute» se vuoi che i nomi dei livelli sopravvivano nel file. «Outline text» qui non cambia nulla, perché le etichette della cornice sono già arrivate come tracciati.
• PDF. Figma esporta il PDF pur non potendolo importare, il che rende il PDF la consegna naturale per un impaginato stampato che contiene il codice.
• PNG a 3x o 4x. Un codice da 100 px esportato a 4x è 400 px, ed è un asset per schermo. Non trattarlo come un asset di stampa: parti invece dalla dimensione di stampa e vai a ritroso.
• Niente a 1x per la stampa. Un'esportazione raster non è mai più grande dei pixel che contiene, e il tetto di stampa è circa larghezza in pixel ÷ 300 × 2,54 centimetri.

Per un codice destinato a un sito web, la consegna migliore spesso non è affatto un'esportazione. Chi sviluppa può generare il codice in fase di build o consegnare direttamente il file SVG, e in entrambi i casi si fa meglio di un'immagine esportata da un file di design che nessuno si ricorderà di aggiornare quando l'URL cambierà.

Copy to Figma contro un plugin per codici QR di Figma

Un plugin genera il codice dentro Figma e può rigenerarlo o generarne in blocco senza uscire dal file. Il percorso degli appunti lo genera nel browser e dà più controllo su forma, cornice e logo. Entrambi producono un codice statico: nessuno dei due può cambiare dove punta un codice già collocato senza sostituire la grafica.

Usa un plugin quando il problema è il volume. Generare quaranta badge per un evento da un foglio di calcolo dentro Figma è un lavoro che il percorso degli appunti non può rendere piacevole, e un plugin per la generazione in blocco è semplicemente lo strumento migliore. KoloQR non ha un plugin per Figma, e questa pagina non farà finta che sia un vantaggio.

Usa gli appunti quando il problema è il design. Codici circolari e di altre forme personalizzate, cornici, stili decorativi degli occhi e un logo collocato con la giusta correzione degli errori dietro sono decisioni che si prendono in un generatore, e arrivano in Figma già complete — vedi codici QR rotondi e codici QR con brand per capire che aspetto hanno.

Una differenza duratura merita di essere nominata: un plugin è una dipendenza. I plugin di Figma vengono aggiornati da chi li scrive, si rompono quando cambia l'API dei plugin e ogni tanto spariscono dalla Community. L'SVG dagli appunti è un incolla: in quel percorso non c'è nulla che possa smettere di essere mantenuto.

Cosa non puoi più fare una volta che il codice è in Figma

Il codice incollato è un codice QR statico, quindi la destinazione è scritta nella geometria anziché conservata accanto. Figma può ristilizzare quella geometria ma non può ricalcolarla, e questo mette fuori portata quattro desideri comuni.

• Cambiare dove punta. Modificare l'URL significa generare un nuovo simbolo. Non c'è nessun campo da modificare, né in Figma né altrove.
• Alzare il livello di correzione degli errori a posteriori. Il livello decide come sono disposti i dati, quindi cambia il simbolo stesso invece di essere una proprietà della grafica finita.
• Riscrivere l'etichetta di una cornice. Le parole sono arrivate come tracciati con contorno. Cambiale nel generatore e ricopia il codice.
• Rendere nitido un logo raster. Un logo caricato come PNG o JPG viene incorporato nell'SVG come immagine, quindi resta raster dentro un file per il resto vettoriale e non diventerà nitido quando il codice viene ingrandito.

Il logo raster è l'unico con una soluzione pulita. Carica il logo come SVG quando ne hai una versione vettoriale, oppure elimina il livello Logo in Figma e metti il tuo logo vettoriale nello spazio che occupava: il simbolo è già stato generato con lo spazio liberato per esso, e alla correzione degli errori che recupera i moduli coperti non importa quale grafica ci stia sopra.

Non ci sono nemmeno analytics, e questa è una proprietà dei codici statici e non di questo flusso. Se il brief richiede il conteggio delle scansioni o una destinazione modificabile dopo la stampa, un codice dinamico su una piattaforma ospitata è lo strumento giusto, e il design entra in Figma esattamente nello stesso modo.

Tenere il codice manutenibile in un design system

Trasforma il codice incollato in un componente di Figma la prima volta che lo usi. Quando la destinazione cambia, incolli il nuovo codice nel componente principale una volta e ogni istanza in ogni file si aggiorna — è quanto di più vicino a essere modificabile può arrivare un codice QR statico.

Dai al componente il nome della destinazione e non quello del design. Un codice QR è illeggibile per una persona, quindi il nome del livello è l'unico posto in cui l'URL è leggibile: «QR / menu-primavera» dice alla persona successiva cosa sta guardando, «Codice QR 3» non le dice nulla. Metti l'URL completo nella descrizione del componente, dove sopravvive al copia-incolla tra file.

Tieni le impostazioni d'origine dove la persona successiva possa trovarle. Forma, colori, cornice, logo e livello di correzione degli errori non sono recuperabili dalla grafica, quindi una nota nella descrizione del componente — o il link del generatore che l'ha prodotta — è ciò che rende il codice riproducibile sei mesi dopo.

Non lasciare che due versioni dello stesso codice convivano in un file. Il modo in cui va storta è preciso e frequente: un codice vecchio resta su una tavola che nessuno ha riesportato, va in stampa e manda le persone a un URL ormai dismesso. Un componente, una destinazione, un solo posto da aggiornare.

Un test di scansione prima della consegna

1. Scansiona la tela al 100%. Porta lo zoom di Figma al 100% e scansiona il codice a schermo con un telefono. Un fallimento qui è un problema di design: contrasto, deformazione o zona di silenzio coperta.
2. Leggi la destinazione carattere per carattere. Confronta l'URL che si apre con quello previsto, protocollo e parametri di tracciamento compresi. Un codice che si scansiona perfettamente verso la pagina sbagliata è il fallimento costoso.
3. Scansiona l'esportazione, non la tela. Esporta la tavola così come verrà effettivamente pubblicata e scansiona quel file. Effetti, opacità e livelli di sfondo si comportano diversamente in un'esportazione rispetto a come appaiono sulla tela.
4. Stampa una prova a dimensione finale. Se il design va in stampa, stampa una pagina a dimensione finale sulla carta vera e scansionala lì. Il contrasto dello schermo fa apparire tutto migliore.
5. Prova su entrambe le piattaforme. Scansiona con un iPhone e con un telefono Android. Le loro app fotocamera binarizzano in modo diverso, e un codice al limite spesso passa su una e fallisce sull'altra.
6. Prova con la luce del posto. Scansiona con l'illuminazione in cui il codice vivrà: un bar in penombra, una finestra assolata, una tessera plastificata lucida vista di sbieco.

Gli ultimi due passaggi sono quelli che colgono ciò che l'impaginato non può mostrare. Un codice che passa su un monitor da scrivania luminoso e fallisce su un menu plastificato in penombra non è cambiato affatto: sono cambiate le condizioni di lettura.

Lo stesso SVG degli appunti funziona anche fuori da Figma

Gli appunti contengono markup SVG standard, non un formato proprietario di Figma, quindi la stessa copia si incolla in Illustrator, Sketch, Affinity Designer e Inkscape come vettori modificabili. Nulla in questo flusso è legato a Figma tranne il nome della voce di menu.

Gli strumenti che si aspettano un file anziché del markup — editor di documenti, software di presentazione, la maggior parte degli strumenti di design nel browser — vogliono il download SVG. Scaricare e piazzare il file dà la stessa grafica vettoriale; cambia solo il modo di trasportarla.

Dove uno strumento non accetta né l'uno né l'altro, il PNG è il ripiego, e la decisione sulla dimensione si sposta prima. Esporta il codice alla dimensione in pixel che serve al supporto finale e non a una comoda, perché un codice raster da ingrandire in seguito non ha una buona riparazione.