Wie du einen QR-Code als bearbeitbare Vektoren nach Figma kopierst

So kopierst du einen QR-Code nach Figma

Einen QR-Code nach Figma zu kopieren sind vier Handgriffe und kein Plugin: Code im Browser bauen, als SVG kopieren, auf eine leere Stelle der Zeichenfläche einfügen und dann die Größe mit aktivierter Proportionssperre numerisch setzen. Der ganze Weg dauert unter einer Minute, und das Ergebnis ist eine Gruppe von Vektorebenen, die du wie jede andere Figma-Grafik umfärben und exportieren kannst.

1. Baue den Code. Öffne den Generator, gib die URL oder anderen Inhalt ein und stelle Form, Muster, Augen, Farben, Rahmen und Logo ein. Was in Figma landet, ist genau das, was die Vorschau zeigt, das Styling gehört also hierhin und nicht hinter das Einfügen.
2. Öffne das Download-Menü. Klicke auf den Pfeil neben der Schaltfläche Download und wähle Copy to Figma. Die Schaltfläche blinkt kurz Copied, und das ist die Bestätigung, dass das SVG-Markup in deiner Zwischenablage angekommen ist.
3. Füge auf leerer Zeichenfläche ein. Wechsle zu Figma, klicke auf eine leere Stelle, damit nichts ausgewählt ist und keine Textebene im Bearbeitungsmodus steht, und drücke dann Cmd+V unter macOS oder Ctrl+V unter Windows.
4. Prüfe die Ebenen. Der Code kommt als Gruppe an, die Background und QR-code enthält, dazu Frame und Logo, wenn das Design sie genutzt hat. An diesen Namen erkennst du, dass Figma Vektoren gelesen und kein Bild eingefügt hat.
5. Sperre die Proportionen vor dem Skalieren. Schalte im rechten Bedienfeld die Proportionssperre ein und tippe dann die gewünschte Breite ein, statt an einem Eckgriff zu ziehen. Breite und Höhe müssen gleich bleiben.
6. Scanne ihn auf dem Bildschirm. Zoome die Zeichenfläche auf 100 % und scanne den Code mit einem Handy. Bestätige, dass sich das Ziel öffnet, das du gemeint hast, bevor die Datei an jemand anderen geht.

Copy to Figma tut nichts, solange das Inhaltsfeld leer ist. Der Generator zeigt vor der ersten Eingabe einen gestalteten Platzhaltercode, und diesen Platzhalter zu kopieren würde einen Code ins Design bringen, der nirgendwohin zeigt. Deshalb lässt die Schaltfläche das leere Feld blinken, statt in die Zwischenablage zu schreiben.

Was wirklich auf der Figma-Zeichenfläche landet

Ein eingefügter KoloQR-Code kommt als benannte Ebenengruppe an und nicht als flaches Bild: ein Container mit Background und QR-code, ergänzt um Frame und Logo, wenn das Design sie nutzt. Jedes Modul ist ein echter Vektorpfad, jede Ebene lässt sich also einzeln auswählen, umfärben, ausblenden oder exportieren.

Das SVG trägt eine explizite Breite und Höhe aus seiner viewBox, der Code landet also in seiner echten Größe statt in der Standardbox, auf die Figma zurückfällt, wenn eine Datei keine Maße angibt. Das zählt vor allem deshalb, weil ein falsch skaliert eingefügter Code meist durch Ziehen an einem Griff korrigiert wird, und genau so gehen Proportionen verloren.

Rahmenbeschriftungen kommen als konturierte Pfade an und nicht als lebender Text. Eine gebogene Beschriftung wird als ein zusammengeführter Pfad ausgegeben statt als ein Objekt pro Buchstabe, die Wörter sind also eine einzige Form, die du umfärben und bewegen, aber nicht neu tippen kannst. Den Wortlaut zu ändern heißt, die Beschriftung im Generator zu ändern und den Code erneut zu kopieren – was ohnehin die richtige Reihenfolge ist, denn der Bogen der Beschriftung wird aus dem Rahmen berechnet.

Mehrere Codes in eine Figma-Datei zu kopieren ist unbedenklich. Jede id, auf die das Markup verweist – Clip-Pfade, der unsichtbare Pfad, an dem eine gebogene Beschriftung entlangläuft –, bekommt im Moment des Kopierens ein eindeutiges Präfix. Zwei SVGs mit derselben id sind der übliche Grund dafür, dass eine zweite eingefügte Grafik mit dem Beschnitt der ersten gezeichnet wird, und dieser Workflow schließt das konstruktiv aus.

Die rein kosmetischen Ebenennamen bleiben bewusst sauber. Background, QR-code, Frame und Logo werden von nichts in der Datei referenziert, sie behalten also ihre lesbaren Namen im Figma-Ebenenbedienfeld, statt ein zufälliges Präfix zu tragen.

SVG oder PNG: welches Format nach Figma gehört

Nimm SVG für alles, was skaliert, umgefärbt oder gedruckt wird, und PNG nur für ein Mockup, das du wegwirfst. SVG ist das einzige der beiden, das in Figma bearbeitbar bleibt; ein PNG ist in dem Moment ein fertiges Bild, in dem es exportiert wird, und es in einem Rahmen zu vergrößern macht jede Modulkante weich.

Die Asymmetrie erwischt viele bei der Übergabe: Figma exportiert PDF, importiert es aber nicht. Ein PDF-QR-Code von irgendeinem Generator muss konvertiert oder durch das SVG ersetzt werden, bevor er in ein Figma-Layout kann.

PNG ist nicht falsch, es ist nur endgültig. Der PNG-Export von KoloQR rendert den Code in vierfacher Bildschirmgröße, was für ein Mockup und für kleinen Druck in bekannter Größe reicht, aber diese Pixel sind fix. Braucht das Layout den Code später doppelt so groß, muss das PNG neu erzeugt und nicht skaliert werden – siehe QR-Code-Auflösung für die Rechnung, die entscheidet, wie groß ein Rastercode sicher gedruckt werden kann.

Warum ein Einfügen manchmal Text ergibt – oder gar nichts

Fast jedes gescheiterte Einfügen ist eines von drei Dingen: Eine Textebene war im Bearbeitungsmodus, der Schreibzugriff auf die Zwischenablage wurde blockiert, oder das Einfügen ging in eine Oberfläche, die SVG-Markup nicht liest. Keines davon ist ein Fehler im Code selbst, und alle drei haben denselben Ausweg – lade die SVG-Datei herunter und zieh sie hinein.

• Das Markup erscheint als sichtbare Zeichen. Beim Cmd+V war eine Textebene im Bearbeitungsmodus, Figma hat den Text der Zwischenablage also als Text eingesetzt. Drücke Escape, klicke auf leere Zeichenfläche und füge erneut ein.
• Es erscheint nichts. Der Browser hat den Schreibzugriff auf die Zwischenablage verweigert. Zwischenablage-Zugriff braucht eine sichere HTTPS-Seite und einen echten Klick, und manche Privacy-Erweiterungen blockieren ihn komplett. Nimm den SVG-Download, statt mit der Berechtigung zu diskutieren.
• Eine andere Oberfläche verhält sich anders. FigJam und Figma Slides behandeln eingefügtes Markup nicht wie die Design-Zeichenfläche. Landet das Einfügen dort als Text, zieh stattdessen die heruntergeladene .svg-Datei auf das Board.
• Die Schaltfläche Copy to Figma lässt das Eingabefeld blinken. Das Inhaltsfeld ist leer, es gibt also noch keinen echten Code zum Kopieren. Gib zuerst die URL oder anderen Inhalt ein.

Den Ausweichweg zu kennen lohnt sich, bevor du ihn brauchst: Download, dann SVG, dann die .svg-Datei aus dem Dateimanager auf die Figma-Zeichenfläche ziehen. Figma importiert eine fallengelassene SVG-Datei in dieselben Vektorebenen, die ein Einfügen erzeugt, am Ergebnis ändert sich also nichts – nur die Anzahl der Schritte.

Welche Figma-Änderungen sicher sind und welche den Code zerstören

Umfärben, verschieben, drehen, gruppieren, rahmen und proportional skalieren sind sicher. Eine Achse strecken, die Ruhezone beschneiden, den Kontrast senken und boolesche Operationen, die Geometrie entfernen, sind es nicht. Ein QR-Code wird aus der Geometrie eines quadratischen Rasters dekodiert, jede Änderung an diesem Raster ändert also, was der Scanner liest.

Der Kontrast ist die Entscheidung, die vor dem Kopieren fällt und nicht nach dem Einfügen. Die Vorschau des Generators nennt ein Kontrastverhältnis für das gewählte Paar und sagt klar, wenn eine Kombination schwer zu scannen sein kann – eine Prüfung, für die Figma keine Entsprechung hat: Figma zeichnet dir bereitwillig einen mittelgrauen Code auf mittelbeigem Grund und zeigt dir nichts an.

Verdeckt das Design einen Teil des Symbols – ein Logo in der Mitte, eine Form über einer Ecke –, wird die Toleranz, die das auffängt, beim Erzeugen festgelegt und nicht in Figma. Siehe Fehlerkorrektur dafür, wie viel Symbol jede Stufe wiederherstellt, und erzeuge vor dem Kopieren auf der Stufe, die das Design braucht.

Eine ehrliche Einschränkung: Keine Regel hier garantiert einen Scan auf fremder Hardware. Kontrastverhältnisse, Modulgrößen und Fehlerkorrekturstufen verschieben die Chancen zu deinen Gunsten, und ein physischer Test auf zwei Handys ist das, was es tatsächlich entscheidet.

Einen QR-Code in einem Figma-Frame dimensionieren

Figma misst in Pixeln und kennt keine physischen Einheiten, dimensioniere einen QR-Code also, indem du festlegst, was ein Pixel im Endmedium bedeutet, und dabei bleibst. Bei 96 px pro Zoll sind 1 cm gleich 37,8 px, ein 2-cm-Code ist also 76 px. Bei 300 px pro Zoll ist derselbe 2-cm-Code 236 px. Für Bildschirmdesigns zielst du auf mindestens 4 px pro Modul.

Die Modulanzahl folgt dem Inhalt, nicht dem Design. Eine kurze URL mit mittlerer Fehlerkorrektur landet meist bei 29 oder 33 Modulen, also 37 oder 41 inklusive Ruhezone. Bei 4 px pro Modul sind das etwa 150–165 px auf dem Bildschirm, und deutlich darunter verliert die Moduldefinition auf einem Display mit Standarddichte an Schärfe.

Die Druckregeln ändern sich nicht, weil das Layout in Figma lebt. Ein gedruckter Code braucht rund 1 cm Breite je 10 cm Leseabstand, mit 2 × 2 cm als praktischer Untergrenze für das Lesen aus der Nähe, und gedruckte Module sollten bei 0,4 mm oder größer bleiben – 0,5 mm auf ungestrichenem Papier, wo Farbzuwachs die dunklen Module verdickt.

Setze die Breite numerisch, statt an einem Griff zu ziehen. Eine gezogene Ecke ohne Proportionssperre ist der mit Abstand häufigste Weg, auf dem ein QR-Code eine Figma-Datei subtil verzerrt verlässt, und eine Verzerrung von 4 % ist auf dem Bildschirm unsichtbar und am Scanner fatal.

Den QR-Code aus Figma wieder exportieren

Wähle die oberste Ebene des Codes aus und exportiere SVG für die Vektorübergabe, PDF für den Druck oder PNG in 3x oder 4x für Bildschirme. Den Frame statt des Codes zu exportieren exportiert das Layout drumherum, was eine Druckerei will und die Entwicklung fast nie.

• SVG. Lass „Include id attribute“ an, wenn die Ebenennamen in die Datei übernommen werden sollen. „Outline text“ ändert hier nichts, denn die Rahmenbeschriftungen kamen bereits als Pfade an.
• PDF. Figma exportiert PDF, obwohl es keines importieren kann, was PDF zur natürlichen Übergabe für ein gedrucktes Layout mit dem Code macht.
• PNG in 3x oder 4x. Ein 100-px-Code in 4x exportiert sind 400 px, und das ist ein Bildschirm-Asset. Behandle es nicht als Druck-Asset – rechne stattdessen von der Druckgröße zurück.
• Nichts in 1x für den Druck. Ein Rasterexport ist nie größer als die Pixel darin, und die Druckobergrenze liegt etwa bei Pixelbreite ÷ 300 × 2,54 Zentimeter.

Für einen Code, der auf einer Website erscheinen soll, ist die bessere Übergabe oft gar kein Export. Die Entwicklung kann den Code zur Build-Zeit erzeugen oder die SVG-Datei direkt ausliefern, und beides schlägt ein Bild aus einer Designdatei, an dessen Aktualisierung sich niemand erinnert, wenn sich die URL ändert.

Copy to Figma gegen ein Figma-QR-Code-Plugin

Ein Plugin erzeugt den Code in Figma und kann ohne Verlassen der Datei neu erzeugen oder Stapel erzeugen. Der Weg über die Zwischenablage erzeugt ihn im Browser und gibt mehr Kontrolle über Form, Rahmen und Logo. Beide erzeugen einen statischen Code: Keines von beiden kann das Ziel eines bereits platzierten Codes ändern, ohne die Grafik zu ersetzen.

Nimm ein Plugin, wenn die Menge das Problem ist. Vierzig Event-Badges aus einer Tabelle heraus in Figma zu erzeugen ist Arbeit, die der Zwischenablage-Weg nicht angenehm machen kann, und ein Stapel-Plugin ist dafür schlicht das bessere Werkzeug. KoloQR hat kein Figma-Plugin, und diese Seite wird nicht so tun, als wäre das ein Vorteil.

Nimm die Zwischenablage, wenn die Gestaltung das Problem ist. Runde und andere frei geformte Codes, Rahmen, dekorative Augenstile und ein Logo mit der passenden Fehlerkorrektur dahinter sind Entscheidungen, die im Generator fallen, und sie kommen fertig in Figma an – siehe runde QR-Codes und gebrandete QR-Codes dafür, wie das aussieht.

Ein dauerhafter Unterschied gehört benannt: Ein Plugin ist eine Abhängigkeit. Figma-Plugins werden von ihren Autorinnen und Autoren gepflegt, brechen, wenn sich die Plugin-API ändert, und verschwinden gelegentlich aus der Community. SVG über die Zwischenablage ist ein Einfügen – auf diesem Weg gibt es nichts, dessen Pflege enden kann.

Was du nicht mehr kannst, sobald der Code in Figma ist

Der eingefügte Code ist ein statischer QR-Code, das Ziel steht also in der Geometrie und liegt nicht daneben. Figma kann diese Geometrie umgestalten, aber nicht neu berechnen, und das rückt vier verbreitete Wünsche außer Reichweite.

• Ändern, wohin er zeigt. Die URL zu ändern heißt, ein neues Symbol zu erzeugen. Es gibt kein Feld zum Bearbeiten, weder in Figma noch anderswo.
• Die Fehlerkorrekturstufe nachträglich anheben. Die Stufe entscheidet, wie die Daten angeordnet werden, sie ändert also das Symbol selbst und ist keine Eigenschaft der fertigen Grafik.
• Eine Rahmenbeschriftung neu tippen. Die Wörter kamen als konturierte Pfade an. Ändere sie im Generator und kopiere den Code erneut.
• Ein Rasterlogo schärfen. Ein als PNG oder JPG hochgeladenes Logo wird im SVG als Bild eingebettet, es bleibt also Raster in einer ansonsten vektoriellen Datei und wird beim Vergrößern des Codes nicht schärfer.

Beim Rasterlogo gibt es einen sauberen Umweg. Lade das Logo als SVG hoch, wenn du eine Vektorversion hast, oder lösche in Figma die Ebene Logo und setze dein eigenes Vektorlogo in den frei gewordenen Platz – das Symbol wurde bereits mit Freiraum dafür erzeugt, und der Fehlerkorrektur, die die verdeckten Module wiederherstellt, ist es egal, welche Grafik obenauf liegt.

Es gibt außerdem keine Analytics, und das ist eine Eigenschaft statischer Codes und nicht dieses Workflows. Braucht das Briefing Scan-Zahlen oder ein Ziel, das sich nach dem Druck ändern lässt, ist ein dynamischer Code von einer gehosteten Plattform das richtige Werkzeug – und das Design kommt trotzdem auf demselben Weg nach Figma.

Den Code in einem Designsystem wartbar halten

Mach aus dem eingefügten Code beim ersten Einsatz eine Figma-Komponente. Ändert sich das Ziel, fügst du den neuen Code einmal in die Hauptkomponente ein, und jede Instanz in jeder Datei aktualisiert sich – näher kommt ein statischer QR-Code der Bearbeitbarkeit nicht.

Benenne die Komponente nach dem Ziel und nicht nach dem Design. Ein QR-Code ist für Menschen unlesbar, der Ebenenname ist also der einzige Ort, an dem die URL lesbar ist: „QR / Frühlingskarte“ sagt der nächsten Person, was sie vor sich hat, „QR-Code 3“ sagt ihr nichts. Schreib die vollständige URL in die Komponentenbeschreibung, wo sie das Kopieren zwischen Dateien überlebt.

Halte die Ausgangseinstellungen dort fest, wo die nächste Person sie findet. Form, Farben, Rahmen, Logo und Fehlerkorrekturstufe lassen sich aus der Grafik nicht zurückgewinnen, eine Notiz in der Komponentenbeschreibung – oder der Generator-Link, der sie erzeugt hat – ist also das, was den Code in sechs Monaten reproduzierbar macht.

Lass nicht zwei Versionen desselben Codes in einer Datei leben. Der Fehlerfall ist konkret und häufig: Ein alter Code bleibt auf einem Artboard liegen, das niemand neu exportiert hat, geht in den Druck und schickt Leute auf eine URL, die längst abgeschaltet ist. Eine Komponente, ein Ziel, eine Stelle zum Aktualisieren.

Ein Scan-Test vor der Übergabe

1. Scanne die Zeichenfläche bei 100 %. Zoome Figma auf 100 % und scanne den Code mit einem Handy vom Bildschirm. Ein Fehlschlag hier ist ein Designproblem – Kontrast, Verzerrung oder eine verdeckte Ruhezone.
2. Lies das Ziel Zeichen für Zeichen. Prüfe die geöffnete URL gegen die gemeinte, samt Protokoll und allen Tracking-Parametern. Ein Code, der perfekt auf die falsche Seite scannt, ist der teure Fehler.
3. Scanne den Export, nicht die Zeichenfläche. Exportiere das Artboard so, wie es tatsächlich ausgeliefert wird, und scanne diese Datei. Effekte, Deckkraft und Hintergrundebenen verhalten sich im Export anders, als sie auf der Zeichenfläche aussehen.
4. Drucke einen Proof in Endgröße. Geht das Design in den Druck, drucke eine Seite in Endgröße auf dem echten Papier und scanne sie dort. Der Bildschirmkontrast schmeichelt allem.
5. Teste auf beiden Plattformen. Scanne mit einem iPhone und mit einem Android-Handy. Ihre Kamera-Apps binarisieren unterschiedlich, und ein grenzwertiger Code besteht oft auf dem einen und scheitert auf dem anderen.
6. Teste im Licht des Raums. Scanne in der Beleuchtung, in der der Code leben wird – eine dunkle Bar, ein sonniges Fenster, eine glänzend laminierte Karte im schrägen Winkel.

Die letzten beiden Schritte fangen das ab, was das Layout nicht zeigen kann. Ein Code, der auf einem hellen Desktop-Monitor besteht und auf einer laminierten Speisekarte bei wenig Licht scheitert, hat sich überhaupt nicht verändert – die Lesebedingungen haben sich verändert.

Dasselbe Zwischenablage-SVG funktioniert auch außerhalb von Figma

Die Zwischenablage enthält Standard-SVG-Markup und kein Figma-eigenes Format, dieselbe Kopie lässt sich also in Illustrator, Sketch, Affinity Designer und Inkscape als bearbeitbare Vektoren einfügen. Nichts an diesem Workflow ist an Figma gebunden außer dem Namen des Menüeintrags.

Werkzeuge, die eine Datei statt Markup erwarten – Dokumenteneditoren, Präsentationssoftware, die meisten browserbasierten Designtools –, wollen den SVG-Download. Die Datei herunterzuladen und zu platzieren ergibt dieselbe Vektorgrafik; nur der Transportweg ist ein anderer.

Wo ein Werkzeug beides nicht annimmt, ist PNG der Ausweg, und die Größenentscheidung rückt nach vorn. Exportiere den Code in der Pixelgröße, die das Endmedium braucht, und nicht in einer bequemen, denn für einen Rastercode, der später vergrößert werden muss, gibt es keine gute Reparatur.