Comment copier un QR code dans Figma en vecteurs modifiables

Comment copier un QR code dans Figma

Copier un QR code dans Figma demande quatre gestes et aucun plugin : construisez le code dans le navigateur, copiez-le en SVG, collez-le sur une zone vide du canevas, puis fixez sa taille au clavier avec le verrou de proportions activé. Le trajet complet prend moins d'une minute, et le résultat est un groupe de calques vectoriels que vous pouvez recolorer et exporter comme n'importe quel autre dessin Figma.

1. Construisez le code. Ouvrez le générateur, saisissez l'URL ou tout autre contenu, puis réglez la forme, le motif, les yeux, les couleurs, le cadre et le logo. Ce qui arrive dans Figma est exactement ce que montre l'aperçu : le style se décide ici, pas après le collage.
2. Ouvrez le menu de téléchargement. Cliquez sur la flèche à côté du bouton Download et choisissez Copy to Figma. Le bouton affiche brièvement Copied, ce qui confirme que le balisage SVG a bien atteint votre presse-papiers.
3. Collez sur un canevas vide. Passez dans Figma, cliquez sur une zone vide pour que rien ne soit sélectionné et qu'aucun calque de texte ne soit en mode édition, puis appuyez sur Cmd+V sous macOS ou Ctrl+V sous Windows.
4. Vérifiez les calques. Le code arrive sous forme de groupe contenant Background et QR-code, plus Frame et Logo si le design les utilisait. Voir ces noms est la preuve que Figma a bien analysé des vecteurs plutôt que collé une image.
5. Verrouillez les proportions avant de redimensionner. Activez le verrou de proportions dans le panneau de droite, puis saisissez la largeur voulue au lieu de tirer une poignée d'angle. La largeur et la hauteur doivent rester égales.
6. Scannez-le à l'écran. Affichez le canevas à 100 % et scannez le code avec un téléphone. Confirmez que la destination qui s'ouvre est bien celle que vous visiez avant que le fichier ne parte chez quelqu'un d'autre.

Copy to Figma ne fait rien tant que le champ de contenu est vide. Le générateur affiche un code d'exemple stylisé avant toute saisie, et copier cet exemple placerait dans votre design un code qui ne mène nulle part : le bouton fait donc clignoter le champ vide plutôt que d'écrire dans le presse-papiers.

Ce qui arrive réellement sur le canevas Figma

Un code KoloQR collé arrive sous forme de groupe de calques nommés plutôt que d'image aplatie : un conteneur avec Background et QR-code, auxquels s'ajoutent Frame et Logo quand le design les utilise. Chaque module est un vrai tracé vectoriel, donc n'importe quel calque peut être sélectionné, recoloré, masqué ou exporté séparément.

Le SVG porte une largeur et une hauteur explicites tirées de sa viewBox, si bien que le code arrive à sa taille réelle au lieu de la boîte par défaut vers laquelle Figma se replie quand un fichier ne déclare aucune dimension. Cela compte surtout parce qu'un code collé à la mauvaise échelle se corrige généralement en tirant une poignée, et c'est ainsi que les proportions se perdent.

Les libellés de cadre arrivent en tracés vectorisés plutôt qu'en texte vivant. Un libellé courbe est émis comme un seul tracé fusionné et non comme un objet par lettre : les mots forment donc une forme unique que vous pouvez recolorer et déplacer, mais pas ressaisir. Changer le texte suppose de modifier le libellé dans le générateur et de recopier le code — ce qui est de toute façon le bon ordre, puisque l'arc du libellé est calculé à partir du cadre.

Copier plusieurs codes dans un même fichier Figma ne pose aucun problème. Chaque id référencé par le balisage — masques de rognage, tracé invisible que suit un libellé courbe — reçoit un préfixe unique au moment de la copie. Deux SVG partageant un id sont la raison habituelle pour laquelle un deuxième graphique collé s'affiche avec le rognage du premier, et cette méthode l'évite par construction.

Les noms de calques purement cosmétiques restent propres à dessein. Background, QR-code, Frame et Logo ne sont référencés par rien à l'intérieur du fichier : ils gardent donc leurs noms lisibles dans le panneau des calques de Figma au lieu de porter un préfixe aléatoire.

SVG ou PNG : quel format apporter dans Figma

Utilisez le SVG pour tout ce qui sera redimensionné, recoloré ou imprimé, et le PNG uniquement pour une maquette jetable. Le SVG est le seul des deux à rester modifiable dans Figma ; un PNG est une image finie dès l'export, et l'agrandir dans un cadre adoucit le bord de chaque module.

L'asymétrie surprend au moment de la remise : Figma exporte le PDF mais ne l'importe pas. Un QR code en PDF, quel que soit le générateur, doit être converti ou remplacé par le SVG avant de pouvoir entrer dans une mise en page Figma.

Le PNG n'est pas une erreur, il est simplement définitif. L'export PNG de KoloQR rend le code à quatre fois sa taille écran, ce qui suffit pour une maquette et pour de petites impressions à taille connue, mais ces pixels sont figés. Si la mise en page réclame plus tard le code au double de la taille, il faut régénérer le PNG et non l'agrandir — voir résolution des QR codes pour le calcul qui détermine jusqu'à quelle taille un code matriciel s'imprime sans risque.

Pourquoi un collage donne parfois du texte, ou rien du tout

Presque tous les collages ratés relèvent de trois causes : un calque de texte était en mode édition, l'écriture dans le presse-papiers a été bloquée, ou le collage a atterri sur une surface qui n'analyse pas le balisage SVG. Aucune n'est un défaut du code lui-même, et toutes les trois ont la même solution de repli : télécharger le fichier SVG et le glisser.

• Le balisage apparaît en caractères visibles. Un calque de texte était en mode édition au moment du Cmd+V, Figma a donc inséré le texte du presse-papiers en tant que texte. Appuyez sur Échap, cliquez sur le canevas vide et collez de nouveau.
• Rien n'apparaît. Le navigateur a refusé l'écriture dans le presse-papiers. L'accès au presse-papiers exige une page HTTPS sécurisée et un vrai clic, et certaines extensions de confidentialité le bloquent purement et simplement. Utilisez le téléchargement SVG plutôt que de discuter avec l'autorisation.
• Une autre surface se comporte autrement. FigJam et Figma Slides ne traitent pas le balisage collé comme le canevas de design. Si le collage y arrive en texte, glissez plutôt le fichier .svg téléchargé sur le tableau.
• Le bouton Copy to Figma fait clignoter le champ. Le champ de contenu est vide, il n'y a donc pas encore de vrai code à copier. Saisissez d'abord l'URL ou tout autre contenu.

Le trajet de secours mérite d'être connu avant d'en avoir besoin : Download, puis SVG, puis glisser le fichier .svg depuis votre gestionnaire de fichiers sur le canevas Figma. Figma importe un SVG déposé dans les mêmes calques vectoriels qu'un collage : rien ne change au résultat, seulement le nombre d'étapes.

Quelles retouches Figma sont sûres et lesquelles cassent le code

Recolorer, déplacer, faire pivoter, grouper, encadrer et redimensionner proportionnellement sont des gestes sûrs. Étirer un axe, rogner la zone de silence, baisser le contraste et les opérations booléennes qui retirent de la géométrie ne le sont pas. Un QR code se décode à partir de la géométrie d'une grille carrée : toute retouche qui modifie cette grille modifie ce que lit le scanner.

Le contraste est la question à trancher avant la copie plutôt qu'après le collage. L'aperçu du générateur indique un rapport de contraste pour la paire choisie et dit clairement quand une combinaison risque d'être difficile à scanner, une vérification dont Figma n'a aucun équivalent : Figma affichera sans broncher un code gris moyen sur un fond beige moyen sans rien vous signaler.

Si le design recouvre une partie du symbole — un logo au centre, une forme qui traverse un angle —, la tolérance qui absorbe cela se fixe à la génération, pas dans Figma. Voir correction d'erreurs pour savoir quelle part du symbole chaque niveau récupère, et générez au niveau dont le design a besoin avant de copier.

Une limite qu'il faut dire honnêtement : aucune règle ici ne garantit un scan sur le matériel de quelqu'un d'autre. Les rapports de contraste, la taille des modules et les niveaux de correction d'erreurs font pencher les probabilités en votre faveur, mais c'est un test physique sur deux téléphones qui tranche réellement.

Dimensionner un QR code dans un frame Figma

Figma mesure en pixels et ne connaît pas d'unités physiques : dimensionnez donc un QR code en décidant ce que vaut un pixel dans le support final, et tenez-vous-y. À 96 px par pouce, 1 cm fait 37,8 px, donc un code de 2 cm fait 76 px. À 300 px par pouce, ce même code de 2 cm fait 236 px. Pour les designs d'écran, visez au moins 4 px par module.

Le nombre de modules découle du contenu, pas du design. Une URL courte avec une correction d'erreurs moyenne tombe en général sur 29 ou 33 modules, soit 37 ou 41 zone de silence comprise. À 4 px par module, cela fait environ 150 à 165 px à l'écran, et nettement en dessous la définition des modules commence à se perdre sur un écran de densité standard.

Les règles d'impression ne changent pas parce que la mise en page vit dans Figma. Un code imprimé demande environ 1 cm de largeur pour 10 cm de distance de lecture, avec 2 × 2 cm comme plancher pratique pour une lecture rapprochée, et les modules imprimés devraient rester à 0,4 mm ou plus — 0,5 mm sur papier non couché, où l'engraissement de l'encre épaissit les modules foncés.

Fixez la largeur au clavier plutôt qu'en tirant une poignée. Un angle tiré avec le verrou de proportions désactivé est de loin la façon la plus courante dont un QR code quitte un fichier Figma subtilement étiré, et une déformation de 4 % est invisible à l'écran et fatale au scanner.

Réexporter le QR code depuis Figma

Sélectionnez le calque de premier niveau du code et exportez en SVG pour une remise vectorielle, en PDF pour l'impression, ou en PNG à 3x ou 4x pour les écrans. Exporter le frame au lieu du code exporte la mise en page qui l'entoure, ce que veut un imprimeur et presque jamais un développeur.

• SVG. Laissez « Include id attribute » activé si vous voulez que les noms de calques survivent dans le fichier. « Outline text » ne change rien ici, puisque les libellés de cadre sont déjà arrivés en tracés.
• PDF. Figma exporte le PDF alors même qu'il ne peut pas l'importer, ce qui en fait la remise naturelle pour une mise en page imprimée contenant le code.
• PNG à 3x ou 4x. Un code de 100 px exporté à 4x fait 400 px, ce qui est un asset écran. Ne le traitez pas comme un asset d'impression : remontez plutôt depuis la taille imprimée.
• Rien à 1x pour l'impression. Un export matriciel ne vaut jamais plus que les pixels qu'il contient, et le plafond d'impression avoisine largeur en pixels ÷ 300 × 2,54 centimètres.

Pour un code destiné à un site web, la meilleure remise n'est souvent pas un export du tout. Un développeur peut générer le code à la compilation ou livrer directement le fichier SVG, et les deux valent mieux qu'une image exportée d'un fichier de design que personne ne pensera à mettre à jour quand l'URL changera.

Copy to Figma face à un plugin QR code pour Figma

Un plugin génère le code à l'intérieur de Figma et peut régénérer ou générer en lot sans quitter le fichier. La méthode du presse-papiers le génère dans le navigateur et donne plus de contrôle sur la forme, le cadre et le logo. Les deux produisent un code statique : ni l'un ni l'autre ne peut changer la destination d'un code déjà placé sans remplacer le dessin.

Prenez un plugin quand le problème est le volume. Générer quarante badges d'événement depuis un tableur à l'intérieur de Figma est un travail que la méthode du presse-papiers ne peut pas rendre agréable, et un plugin de traitement par lot y est tout simplement le meilleur outil. KoloQR n'a pas de plugin Figma, et cette page ne va pas faire semblant d'y voir un avantage.

Prenez le presse-papiers quand le problème est le design. Les codes circulaires et autres formes personnalisées, les cadres, les styles d'yeux décoratifs et un logo posé avec la bonne correction d'erreurs derrière sont des décisions qui se prennent dans un générateur, et elles arrivent dans Figma entièrement formées — voir QR codes ronds et QR codes de marque pour voir ce que cela donne.

Une différence durable mérite d'être nommée : un plugin est une dépendance. Les plugins Figma sont mis à jour par leurs auteurs, cassent quand l'API des plugins change, et disparaissent parfois de la Community. Le SVG par presse-papiers est un collage : rien sur ce chemin ne peut cesser d'être maintenu.

Ce que vous ne pouvez plus faire une fois le code dans Figma

Le code collé est un QR code statique : la destination est inscrite dans la géométrie plutôt que stockée à côté. Figma peut restyler cette géométrie mais ne peut pas la recalculer, ce qui met hors de portée quatre souhaits courants.

• Changer sa destination. Modifier l'URL suppose de générer un nouveau symbole. Il n'y a aucun champ à modifier, ni dans Figma ni ailleurs.
• Relever le niveau de correction d'erreurs après coup. Le niveau détermine la disposition des données : il change donc le symbole lui-même au lieu d'être une propriété du dessin fini.
• Ressaisir un libellé de cadre. Les mots sont arrivés en tracés vectorisés. Changez-les dans le générateur et recopiez le code.
• Rendre net un logo matriciel. Un logo téléversé en PNG ou en JPG est incorporé dans le SVG comme image : il reste matriciel dans un fichier par ailleurs vectoriel et ne gagnera pas en netteté à l'agrandissement du code.

Le logo matriciel est le seul cas à contournement propre. Téléversez le logo en SVG quand vous en avez une version vectorielle, ou supprimez le calque Logo dans Figma et placez votre propre logo vectoriel dans l'espace qu'il occupait : le symbole a déjà été généré avec la place dégagée pour lui, et la correction d'erreurs qui récupère les modules couverts se moque de savoir quel dessin est posé dessus.

Il n'y a pas non plus d'analytique, et c'est une propriété des codes statiques plutôt que de cette méthode. Si le brief exige un comptage des scans ou une destination modifiable après impression, un code dynamique sur une plateforme hébergée est le bon outil, et le design entre dans Figma exactement de la même manière.

Garder le code maintenable dans un design system

Faites du code collé un composant Figma dès la première utilisation. Quand la destination change, collez le nouveau code une fois dans le composant principal et toutes les instances de tous les fichiers se mettent à jour — c'est ce qui rapproche le plus un QR code statique d'un objet modifiable.

Nommez le composant d'après la destination plutôt que d'après le design. Un QR code est illisible pour un humain : le nom du calque est donc le seul endroit où l'URL est lisible. « QR / menu-printemps » dit à la personne suivante ce qu'elle a sous les yeux, « QR code 3 » ne lui dit rien. Mettez l'URL complète dans la description du composant, où elle survit au copier-coller entre fichiers.

Gardez les réglages d'origine là où la personne suivante les trouvera. La forme, les couleurs, le cadre, le logo et le niveau de correction d'erreurs ne se retrouvent pas depuis le dessin : une note dans la description du composant — ou le lien du générateur qui l'a produit — est ce qui rend le code reproductible six mois plus tard.

Ne laissez pas deux versions du même code cohabiter dans un fichier. Le scénario d'échec est précis et fréquent : un vieux code reste sur un plan de travail que personne n'a réexporté, part à l'impression, et envoie les gens vers une URL retirée depuis longtemps. Un composant, une destination, un seul endroit à mettre à jour.

Un test de scan avant la remise

1. Scannez le canevas à 100 %. Réglez le zoom de Figma à 100 % et scannez le code à l'écran avec un téléphone. Un échec ici est un problème de design : contraste, déformation ou zone de silence recouverte.
2. Lisez la destination caractère par caractère. Comparez l'URL qui s'ouvre à celle que vous visiez, protocole et paramètres de suivi compris. Un code qui se scanne parfaitement vers la mauvaise page est l'échec qui coûte cher.
3. Scannez l'export, pas le canevas. Exportez le plan de travail tel qu'il sera réellement livré et scannez ce fichier. Les effets, l'opacité et les calques de fond se comportent autrement dans un export que sur le canevas.
4. Imprimez une épreuve à taille finale. Si le design part à l'impression, imprimez une page à taille finale sur le vrai papier et scannez-la là. Le contraste de l'écran flatte tout.
5. Testez sur les deux plateformes. Scannez avec un iPhone et avec un téléphone Android. Leurs applis photo binarisent différemment, et un code limite passe souvent sur l'un et échoue sur l'autre.
6. Testez dans la lumière du lieu. Scannez sous l'éclairage où le code vivra : un bar sombre, une fenêtre ensoleillée, une carte plastifiée brillante vue de biais.

Les deux dernières étapes sont celles qui attrapent ce que la mise en page ne peut pas montrer. Un code qui passe sur un écran de bureau lumineux et échoue sur un menu plastifié en faible lumière n'a pas changé du tout : ce sont les conditions de lecture qui ont changé.

Le même SVG du presse-papiers fonctionne en dehors de Figma

Le presse-papiers contient du balisage SVG standard et non un format propre à Figma : la même copie se colle dans Illustrator, Sketch, Affinity Designer et Inkscape en vecteurs modifiables. Rien dans cette méthode n'est lié à Figma, hormis le nom de l'entrée de menu.

Les outils qui attendent un fichier plutôt qu'un balisage — éditeurs de documents, logiciels de présentation, la plupart des outils de design en ligne — veulent le téléchargement SVG. Télécharger puis placer le fichier donne le même dessin vectoriel ; seul le transport diffère.

Là où un outil n'accepte ni l'un ni l'autre, le PNG est le repli, et la décision de taille se prend plus tôt. Exportez le code à la taille en pixels dont le support final a besoin plutôt qu'à une taille commode, car un code matriciel qu'il faut agrandir ensuite n'a aucune bonne réparation.