How to make a QR code in Figma

1. Generate an SVG

Build the code at UseQR (URL, WiFi, vCard, any type), and download SVG. Figma imports SVG as native vector layers, so the code arrives as crisp geometry, not a bitmap: it stays sharp at any zoom and any export scale. (The reasons vector wins are in making a QR code as an SVG.)

2. Get it onto the canvas

Three equivalent ways:

• Drag the .svg file into the Figma window.
• Copy the SVG markup (open the file in a text editor, copy all) and paste directly onto the canvas, Figma parses raw SVG from the clipboard.
• Use File → Place image for a PNG if a bitmap is all you have, but at 2× the largest size you will ever export, or edges blur.

3. Make it a component if it recurs

A code that appears on many frames (every screen of an app mock-up, every card variant) should be a component. Place the SVG once, ⌘⌥K / Ctrl+Alt+K, and instance it everywhere. When the destination changes, paste the replacement SVG into the main component and every instance updates. Name the component after its payload (qr/menu-table-url, not qr-final-v2) so nobody has to scan it to find out what it encodes.

4. Restyle within the rules

The SVG's modules are fills you can recolour in Figma:

• Change fill colours only, adding a stroke fattens every module and merges neighbours.
• Keep dark modules on a light background with a ≥ 40% luminance difference: the full logic is in colours that scan.
• Scale uniformly (hold Shift). A stretched code is a dead code.
• Keep the background rectangle: it is the quiet zone, and auto-layout padding of at least 4 modules' worth around the code preserves it when frames resize.

5. A word on QR plugins

The Figma community has many QR plugins, and this is where the how becomes a should: several generate server-side: your payload is sent to a third-party API to render the image. For a marketing URL that is merely a privacy footnote; for a WiFi password, a vCard full of personal details, or an unreleased product URL, it is a real leak. UseQR generates client-side (the payload never leaves your browser), and pasting its SVG into Figma keeps that property. If you prefer a plugin, check what it transmits before trusting it with anything sensitive.

6. Export and verify

Export the frame at the final size (SVG or PDF for print handoff, PNG 2×+ for screens), then scan the export with a phone or run it through the validator. Figma's preview is not proof; the exported artefact is what ships.

Gotchas

• Flipping: Figma's flip commands mirror selected vectors, and a mirrored QR code will not scan. If a code has been through symmetric layout operations, verify it.
• Effects (drop shadows, blurs, low-opacity fills) reduce edge contrast. Keep the code layer clean.
• Dev handoff: hand developers the payload text alongside the design, so production regenerates the code rather than exporting a screenshot of the mock-up.

Generate the SVG to paste: make a QR code.

FAQ

Does Figma have a built-in QR code generator?

No. Generate the code elsewhere and import it. The best path is SVG: Figma renders it as native vector layers that stay sharp at every zoom level and export scale.

Can I paste an SVG QR code directly into Figma?

Yes. Copy the raw SVG markup and paste onto the canvas, or drag the .svg file in. Both produce editable vector layers rather than a bitmap.

Are Figma QR code plugins safe?

Check each one: some render locally, others send your payload to a third-party server. Never put WiFi passwords or personal contact data through a plugin that generates server-side.

Why does my Figma QR code look blurry in the prototype?

It was placed as a small PNG and scaled up. Replace it with the SVG version, or re-place the PNG at least at 2× the largest displayed size.