QR codes and barcodes

The Tools panel generates scannable codes bound to structured data and drops device frames around your designs, all as regular canvas objects you can resize and restyle.

Quick overview

1. Click Tools in the icon rail, then open Generators.
2. Choose QR Code, Barcode, or Device Mockups.
3. For a QR code, pick a content type, fill in its fields, and adjust colors and error correction.
4. For a barcode, pick a symbology and a value, or switch to bulk mode and upload a CSV.
5. Click Add to canvas, then resize and position it like any other object.

Detailed reference

QR Studio

Content type	Encodes
Website / URL	Any web address
Plain text	Any text string
Wi-Fi network	Network name, security (WPA/WEP/none), password, hidden-network flag
Contact (vCard)	Name, company, phone, email, website
Email	Recipient, subject, body
SMS	Number, message
Phone	A phone number
Location (geo)	Latitude and longitude

Setting	Options	Default
Foreground color	Any color	Black
Background color	Any color	White
Error correction	Low (7%), Medium (15%), Quartile (25%), High (30%)	Medium

Add to canvas inserts a high-resolution image at a 140 px starting width, so it stays sharp if you enlarge it. Export the same code directly as a PNG, a true-vector SVG, or a small square PDF, independent of the design's own export. A URL is normalized for you: if you leave off the scheme, https:// is added before it is encoded.

Barcode generator

Symbologies are grouped by family. QR is its own dedicated tool above and is not part of this list.

Family	Examples
1D linear	Code 128, Code 39, Code 93, EAN-13, EAN-8, UPC-A, UPC-E, ITF, ITF-14, Codabar, MSI Plessey, Code 11, Pharmacode
2D matrix	Data Matrix, PDF417, Micro PDF417, Aztec, MaxiCode
GS1	GS1-128, GS1 Data Matrix, GS1 DataBar, DataBar Expanded
Postal	Royal Mail, Australia Post, Japan Post, KIX, USPS Intelligent Mail, POSTNET

Single-barcode defaults:

Setting	Default
Line color	Near-black
Background color	White
Human-readable text	On
Width / height / padding	3 / 28 / 8
Rotation	0 degrees
Output	Vector

The single-mode controls expose a Height (8-120), a Quiet zone (0-40, the padding around the code), a Scale (1-8), and a Rotation (-180 to 180 degrees). Square matrix codes swap the Height field for a Module size (2-12). Output switches between an SVG (vector) and a PNG (raster) result, and there is a Transparent background toggle.

Bulk mode uploads a CSV, or starts from a downloadable sample, and maps its columns to a page name, a barcode value, and a barcode type. It then generates one new page per row using your current page as the master layout, useful for running a full batch of product labels or inventory tags in one pass.

A single barcode also offers a transparent background toggle and a "fit to selected frame" option, so it can drop straight into a placeholder on a label template.

Barcode studio modes

The barcode tool opens on four tabs:

Mode	Use
Single	Build one barcode, preview it live, and add or export it
Sequence	Generate a run of serial numbers as separate barcodes in one pass
Bulk	Upload a CSV and generate one new page per row (above)
History	Reuse the last 12 values you generated, without re-entering settings

Sequence mode builds a numbered batch: pick a symbology, then set a prefix, suffix, start number, step, count (up to 100), and zero-pad width. A live preview shows the first few codes, and Generate sequence drops them all onto the current page.

Single mode also carries a Placement group. Fit to selected frame drops the code into a selected placeholder, Snap to center after insert centers it, and Field-aware object tags it so bulk mode can find and replace it later.

Device mockups

Devices
iPhone, MacBook, browser window, iPad, Android phone

Each click inserts a decorative device frame with a screen area. Layer your design or a screenshot into that area, or convert the frame to a mask with the selection tools.

Step by step

A Wi-Fi network QR code

1. Open Tools > Generators > QR Code.
2. Set QR content to Wi-Fi network.
3. Enter the Network (SSID) exactly as it appears on the router, choose the Security type (WPA/WPA2, WEP, or None), and type the Password. Choosing None hides the password field.
4. Tick Hidden network only if the network does not broadcast its name.
5. Open Advanced and leave Error correction at Medium (15%) for a screen or a poster. Raise it to High (30%) if the code will be small or printed on a busy surface.
6. Open Colors to recolor the code. Keep the foreground clearly darker than the background: a light-on-dark or low-contrast code will not scan.
7. Click Add to canvas. The code drops in at a 140 px width and stays sharp when enlarged. Scan it from the exported design before printing to confirm it still reads.

A retail product barcode with a check digit

1. Open Tools > Generators > Barcode, on the Single tab.
2. Pick EAN-13 from the symbology list.
3. Type the product number. EAN-13 needs 12 or 13 digits: enter the 12-digit body and the panel shows Valid, check digit auto-added, meaning it computes the final digit for you.
4. Adjust Height and Quiet zone under Size & scale if the label is tight. Do not squeeze the bars narrower than the scanner can resolve.
5. Click Add to canvas, or use Export for a standalone PNG, SVG, or PDF.

A batch of barcode labels from a CSV

1. Lay out one page as your label master. Tag the value slot as a Field-aware object in single mode if you want each code to land in a specific spot.
2. Switch to the Bulk tab and click Download Sample CSV to see the expected columns (page_name, barcode_value, and optional data columns).
3. Fill in your rows, then drag the CSV onto the upload zone.
4. Check the Field Mapping: columns named barcode_value, barcode, sku, or code map to the value automatically, barcode_type sets the symbology per row, and page_name names each page. Set a Fallback Barcode Type for rows that do not carry one.
5. Click Generate Pages. A progress bar tracks the run, and the results list flags any failed rows with a Retry Failed button once you fix them.

A run of serial numbers

1. On the Barcode tool, open the Sequence tab.
2. Choose a symbology, then set a Prefix (for example INV-), a Start number, a Step, and a Count.
3. Use Zero-pad to keep every number the same width (for example 0001).
4. Watch the preview, then click Generate sequence to place the whole run on the current page.

Examples

Need	Setup
Link to a website	QR Code, Website / URL, type the address (https:// is added if you omit it)
Save a contact	QR Code, Contact (vCard): name, company, phone, email, website
Shelf-edge retail label	Barcode, EAN-13 or UPC-A, human-readable text on
Shipping carton	Barcode, ITF-14 or GS1-128
Small parts label	Barcode, Data Matrix (square matrix, no text line)
Event tickets	QR Code at High error correction, or an Aztec barcode

Troubleshooting

"Content too long for one QR"

A single QR holds a limited amount of data, and higher error correction leaves less room for it. Shorten the text or URL, or drop the error correction one level, until the preview renders.

A QR code will not scan

Keep the foreground darker than the background and do not invert them, and leave the quiet margin around the code clear. There is no built-in center-logo overlay, so if you place a logo or shape over a QR by hand, keep it small and set Error correction to High (30%) so the code can still recover the covered modules.

"EAN-13 requires 12 or 13 digits"

EAN, UPC, and similar retail symbologies accept digits only, in a fixed count: EAN-13 wants 12 or 13, EAN-8 wants 7 or 8, UPC-A wants 11 or 12, UPC-E wants 6 to 8. An invalid value shows an inline error and blocks Add to canvas until it is fixed.

A square code ignores the height field

Data Matrix, GS1 Data Matrix, Aztec, and MaxiCode size themselves from the data and module scale, so the Height field does not apply and no human-readable text line is drawn. Use Module size and Quiet zone to control them instead.

Tips

Test before you print

Scan a QR code from the exported design before sending it to print, especially at small sizes. Error correction only recovers so much lost detail.

Match the symbology to the scanner

Retail scanners expect EAN or UPC, shipping systems often want ITF-14 or a GS1 symbology, and general labels are safest as Code 128, which reads the widest range of content.

Related

• Selection tools to mask a screenshot into a device frame
• Bulk builder for another way to generate per-row page variations
• Export a page for exporting the finished design
• Properties panel to resize and position a generated code