How to Copy a QR Code Into Figma as Editable Vectors

How to copy a QR code into Figma

Copying a QR code into Figma takes four actions and no plugin: build the code in the browser, copy it as SVG, paste it onto an empty part of the canvas, then set its size numerically with the proportion lock on. The whole route takes under a minute, and the result is a group of vector layers you can recolour and export like any other Figma artwork.

1. Build the code. Open the generator, enter the URL or other content, and set the shape, pattern, eyes, colours, frame and logo. What lands in Figma is exactly what the preview shows, so styling belongs here rather than after the paste.
2. Open the download menu. Click the arrow beside the Download button and choose Copy to Figma. The button flashes Copied, which is the confirmation that the SVG markup reached your clipboard.
3. Paste onto empty canvas. Switch to Figma, click an empty area so nothing is selected and no text layer is in edit mode, then press Cmd+V on macOS or Ctrl+V on Windows.
4. Check the layers. The code arrives as a group containing Background and QR-code, plus Frame and Logo when the design used them. Seeing those names is how you know Figma parsed vectors rather than pasting an image.
5. Lock the proportions before resizing. Turn on the proportion lock in the right-hand panel, then type the width you need instead of dragging a corner handle. Width and height must stay equal.
6. Scan it on screen. Zoom the canvas to 100% and scan the code with a phone. Confirm the destination that opens is the one you meant before the file goes to anyone else.

Copy to Figma does nothing while the content field is empty. The generator shows a styled placeholder code before you type anything, and copying that placeholder would put a code pointing nowhere into your design, so the button flashes the empty input instead of writing to the clipboard.

What actually lands on the Figma canvas

A pasted KoloQR code arrives as a named layer group rather than a flat image: a container holding Background and QR-code, with Frame and Logo added when the design uses them. Every module is a real vector path, so any layer can be selected, recoloured, hidden or exported on its own.

The SVG carries an explicit width and height taken from its viewBox, so the code lands at its true size instead of the default box Figma falls back to when a file declares no dimensions. That matters mainly because a code pasted at the wrong scale is usually fixed by dragging a handle, which is how proportions get lost.

Frame labels arrive as outlined paths rather than live text. A curved label is emitted as one merged path instead of one object per letter, so the words are a single shape you can recolour and move but not retype. Changing the wording means editing the label in the generator and copying the code again - which is the right order anyway, since the label's arc is computed from the frame.

Copying several codes into one Figma file is safe. Every id the markup references - clip paths, the invisible path a curved label runs along - is given a unique prefix at the moment you copy. Two SVGs sharing one id is the usual reason a second pasted graphic renders with the first one's clipping, and this workflow avoids it by construction.

The purely cosmetic layer names are left clean on purpose. Background, QR-code, Frame and Logo are never referenced by anything inside the file, so they keep their readable names in the Figma layers panel instead of carrying a random prefix.

SVG or PNG: which format to bring into Figma

Use SVG for anything that will be resized, recoloured or printed, and PNG only for a mockup you will throw away. SVG is the only one of the two that stays editable in Figma; a PNG is a finished picture the moment it is exported, and enlarging it in a frame softens every module edge.

The asymmetry catches people out at handoff: Figma exports PDF but does not import it. A PDF QR code from any generator has to be converted, or replaced with the SVG, before it can go into a Figma layout.

PNG is not wrong, it is just final. KoloQR's PNG export renders the code at four times its on-screen size, which is enough for a mockup and for small print at a known size, but those pixels are fixed. If the layout later needs the code at twice the size, the PNG has to be regenerated rather than scaled - see QR code resolution for the arithmetic that decides how large a raster code can safely print.

Why a paste sometimes produces text, or nothing at all

Almost every failed paste is one of three things: a text layer was in edit mode, the clipboard write was blocked, or the paste went into a surface that does not parse SVG markup. None of them are faults in the code itself, and all three have the same fallback - download the SVG file and drag it in.

• The markup appears as visible characters. A text layer was in edit mode when you pressed Cmd+V, so Figma inserted the clipboard's text as text. Press Escape, click empty canvas, and paste again.
• Nothing appears. The browser refused the clipboard write. Clipboard access requires a secure HTTPS page and a real click, and some privacy extensions block it outright. Use the SVG download instead of arguing with the permission.
• A different surface behaves differently. FigJam and Figma Slides do not handle pasted markup the same way the design canvas does. If the paste lands as text there, drag the downloaded .svg file onto the board instead.
• The Copy to Figma button flashes the input field. The content field is empty, so there is no real code to copy yet. Enter the URL or other content first.

The fallback route is worth knowing before you need it: Download, then SVG, then drag the .svg file from your file manager onto the Figma canvas. Figma imports a dropped SVG file into the same vector layers a paste produces, so nothing about the result differs - only the number of steps.

Which Figma edits are safe, and which break the code

Recolouring, moving, rotating, grouping, framing and proportional resizing are safe. Stretching one axis, cropping the quiet zone, dropping contrast and boolean operations that remove geometry are not. A QR code is decoded from the geometry of a square grid, so any edit that changes that grid changes what the scanner reads.

Contrast is the edit worth settling before the copy rather than after the paste. The generator's preview reports a contrast ratio for the pair you have chosen and says plainly when a combination may be difficult to scan, which is a check Figma has no equivalent of - Figma will happily render a mid-grey code on a mid-beige background and show you nothing wrong.

If the design covers part of the symbol - a logo in the middle, a shape crossing a corner - the tolerance that absorbs it is set at generation time, not in Figma. See error correction for how much of a symbol each level recovers, and generate at the level the design needs before you copy.

One honest limitation: no rule here guarantees a scan on someone else's hardware. Contrast ratios, module sizes and error correction levels all shift the odds in your favour, and a physical test on two phones is what actually settles it.

Sizing a QR code inside a Figma frame

Figma measures in pixels and has no physical units, so size a QR code by deciding what one pixel means in the final medium and holding to it. At 96 px per inch, 1 cm is 37.8 px, so a 2 cm code is 76 px. At 300 px per inch the same 2 cm code is 236 px. For screen designs, aim for at least 4 px per module.

Module count follows the content, not the design. A short URL with medium error correction usually lands at 29 or 33 modules, which is 37 or 41 including the quiet zone. At 4 px per module that is roughly 150–165 px on screen, and anything much below it starts losing module definition on a standard-density display.

The printed rules do not change because the layout lives in Figma. A printed code needs about 1 cm of width for every 10 cm of reading distance, with 2 × 2 cm as the working floor for close reading, and printed modules should stay at 0.4 mm or larger - 0.5 mm on uncoated stock, where ink spread thickens the dark modules.

Set the width numerically rather than dragging a handle. A dragged corner with the proportion lock off is the single most common way a QR code leaves a Figma file subtly stretched, and a 4% distortion is invisible on screen and fatal at the scanner.

Exporting the QR code back out of Figma

Select the code's top-level layer and export SVG for vector handoff, PDF for print, or PNG at 3x or 4x for screens. Exporting the frame instead of the code exports the layout around it, which is what a printer wants and almost never what a developer wants.

• SVG. Keep "Include id attribute" on if you want the layer names to survive into the file. "Outline text" changes nothing here, because the frame labels arrived as paths already.
• PDF. Figma exports PDF even though it cannot import it, which makes PDF the natural handoff for a printed layout that contains the code.
• PNG at 3x or 4x. A 100 px code exported at 4x is 400 px, which is a screen asset. Do not treat it as a print asset - work back from the print size instead.
• Nothing at 1x for print. A raster export is only ever as large as the pixels in it, and the print ceiling is roughly pixel width ÷ 300 × 2.54 centimetres.

For a code that will appear on a website, the better handoff is often not an export at all. A developer can generate the code at build time or ship the SVG file directly, and either beats a picture exported from a design file that nobody will remember to update when the URL changes.

Copy to Figma versus a Figma QR code plugin

A plugin generates the code inside Figma and can regenerate or batch-generate without leaving the file. The clipboard route generates it in the browser and gives more control over shape, frame and logo. Both produce a static code: neither can change where an already-placed code points without replacing the artwork.

Use a plugin when volume is the problem. Generating forty event badges from a spreadsheet inside Figma is work the clipboard route cannot make pleasant, and a batch plugin is straightforwardly the better tool for it. KoloQR has no Figma plugin, and this page is not going to pretend that is an advantage.

Use the clipboard when design is the problem. Circular and other custom-shaped codes, frames, decorative eye styles and a logo placed with the right error correction behind it are decisions made in a generator, and they arrive in Figma fully formed - see round QR codes and branded QR codes for what that looks like.

One durable difference is worth naming: a plugin is a dependency. Figma plugins are updated by their authors, break when the plugin API changes, and occasionally disappear from the Community. Clipboard SVG is a paste - there is nothing in the path that can stop being maintained.

What you cannot do once the code is in Figma

The pasted code is a static QR code, so the destination is written into the geometry rather than stored beside it. Figma can restyle that geometry but cannot recompute it, which puts four common wishes out of reach.

• Change where it points. Editing the URL means generating a new symbol. There is no field to edit, in Figma or anywhere else.
• Raise the error correction level after the fact. The level decides how the data is laid out, so it changes the symbol itself rather than being a property of the finished artwork.
• Retype a frame label. The words arrived as outlined paths. Change them in the generator and copy the code again.
• Sharpen a raster logo. A logo uploaded as PNG or JPG is embedded inside the SVG as an image, so it stays raster inside an otherwise vector file and will not sharpen when the code is scaled up.

The raster logo is the one with a clean workaround. Upload the logo as SVG when you have a vector version, or delete the Logo layer in Figma and place your own vector logo in the space it occupied - the symbol has already been generated with room cleared for it, and the error correction that recovers the covered modules does not care which artwork sits on top.

There is also no analytics, and that is a property of static codes rather than of this workflow. If the brief needs scan counts or a destination that can be changed after printing, a dynamic code from a hosted platform is the right tool, and the design still comes into Figma the same way.

Keeping the code maintainable in a design system

Make the pasted code a Figma component the first time you use it. When the destination changes, paste the new code into the main component once and every instance across every file updates - which is the closest a static QR code gets to being editable.

Name the component after the destination rather than after the design. A QR code is unreadable to a human, so the layer name is the only place the URL is legible: "QR / spring-menu" tells the next designer what they are looking at, and "QR code 3" tells them nothing. Put the full URL in the component description, where it survives copy-pasting between files.

Keep the source settings somewhere the next person can find them. Shape, colours, frame, logo and error correction level are not recoverable from the artwork, so a note in the component description - or the generator link that produced it - is what makes the code reproducible six months later.

Do not let two versions of the same code live in one file. The failure mode is specific and common: an old code stays on an artboard nobody re-exported, gets printed, and sends people to a URL that has been retired. One component, one destination, one place to update.

A scan test before handoff

1. Scan the canvas at 100%. Zoom Figma to 100% and scan the code on screen with a phone. A failure here is a design problem - contrast, distortion or a covered quiet zone.
2. Read the destination character by character. Check the URL that opens against the one you meant, including the protocol and any tracking parameters. A code that scans perfectly to the wrong page is the expensive failure.
3. Scan the export, not the canvas. Export the artboard the way it will actually ship and scan that file. Effects, opacity and background layers behave differently in an export than they look on canvas.
4. Print a proof at final size. If the design is going to print, print one page at final size on the real stock and scan it there. Screen contrast flatters everything.
5. Test on both platforms. Scan with an iPhone and an Android phone. Their camera apps binarise differently, and a marginal code often passes on one and fails on the other.
6. Test in the room's light. Scan in the lighting the code will live in - a dim bar, a sunlit window, a glossy laminated card at an angle.

The last two steps are the ones that catch what the layout cannot show. A code that passes on a bright desktop monitor and fails on a laminated menu in low light has not changed at all - the reading conditions have.

The same clipboard SVG works outside Figma

The clipboard holds standard SVG markup, not a Figma-specific format, so the same copy pastes into Illustrator, Sketch, Affinity Designer and Inkscape as editable vectors. Nothing in the workflow is tied to Figma except the name of the menu entry.

Tools that expect a file rather than markup - document editors, presentation software, most browser-based design tools - want the SVG download instead. Downloading and placing the file gives the same vector artwork; only the transport differs.

Where a tool accepts neither, PNG is the fallback, and the size decision moves earlier. Export the code at the pixel size the final medium needs rather than at a convenient one, because a raster code that has to be enlarged later has no good repair.