QR Code Plugin for Figma — Design with QR Codes
Quick Answer
For custom-colored QR codes in Figma: generate on QRCrack, download as SVG, then in Figma use File → Place Image (or drag-drop) to embed the SVG. You can ungroup and recolor the SVG paths as Figma vectors.
Step-by-Step Guide
- 1
Generate your QR code on QRCrack with the exact colors matching your Figma design system.
- 2
Download as SVG for vector precision in Figma.
- 3
In Figma, use the menu: File → Place Image → select your QR SVG, or simply drag the SVG file from your desktop onto the Figma canvas.
- 4
The SVG imports as a group of vector paths. Right-click → Ungroup to manipulate individual QR modules.
- 5
Alternatively: right-click the QR frame → Use as mask or Flatten for a single clean layer.
- 6
For prototyping: place the QR code on a mobile mockup frame and link it to a relevant Figma prototype screen.
- 7
For design system use: save the QR component in your Figma Design System file as a reusable component with a 'URL' text property.
Code Snippet
/* Figma Plugin API — generate QR code programmatically in Figma */
// Use the 'QR Code' plugin from Figma community, or use this approach:
figma.showUI(__html__, { width: 300, height: 200 });
figma.ui.onmessage = async (msg) => {
if (msg.type === 'generate-qr') {
// Fetch QR from an API
const response = await fetch(
'https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl='
+ encodeURIComponent(msg.url)
);
const arrayBuffer = await response.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
const image = figma.createImage(uint8Array);
const rect = figma.createRectangle();
rect.resize(200, 200);
rect.fills = [{ type: 'IMAGE', scaleMode: 'FILL', imageHash: image.hash }];
figma.currentPage.appendChild(rect);
figma.viewport.scrollAndZoomIntoView([rect]);
}
};Ready to generate your Figma QR code?
Free, no signup, no watermarks. Custom colors and logo supported.
Generate QR Code — FreeFrequently Asked Questions
Is there a QR code plugin for Figma?
Yes — search 'QR Code' in the Figma Community (Community → Plugins). For fully custom colors and logos, generate on QRCrack and import as SVG.
Can I import an SVG QR code into Figma and recolor it?
Yes. Import the SVG, ungroup, select all the dark modules, and change fill color. Figma treats SVG paths as editable vectors.
How do I use a QR code in a Figma prototype?
Place the QR code image on your prototype frame. Figma prototypes are not scannable as real QR codes — use them as visual mockups only.
Can I create a Figma component for a QR code?
Yes. Convert the QR to a component (Ctrl/Cmd+Alt+K), add a 'URL' text property, and use it across your design system.