# How to make a QR code in Figma

> Figma has no native QR generator, but it renders SVG losslessly: generate the code at UseQR, download SVG, and drag or paste it straight onto the canvas as editable vectors. Turn it into a component if it appears in many frames. Be wary of QR plugins: several send your payload to a third-party server.

Source: https://useqr.app/docs/how-to/how-to-make-a-qr-code-in-figma · Last reviewed 2026-08-21 · UseQR is free forever, no signup.

---

## 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](/docs/how-to/how-to-make-a-qr-code-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](/docs/design/qr-code-colors-that-scan).
- Scale **uniformly** (hold Shift). A stretched code is a dead code.
- Keep the background rectangle: it is the [quiet zone](/glossary/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](/docs/security/why-not-to-upload-a-wifi-password-to-a-website), a vCard
full of personal details, or an unreleased product URL, it is a real leak. UseQR generates
[client-side](/docs/security/client-side-vs-server-side-qr-generation) (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](/validate). 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](/docs/troubleshooting/qr-code-mirrored-by-a-design-tool) 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](/url?data=https://example.com).

## 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.

## Try it

- https://useqr.app/url
- https://useqr.app/validate
- https://useqr.app/vcard