# How to automate event badge design (with QR code)

Now you have your guest list organized, and want to create badges for them. I've found one way to automate this process without having to manually copy and paste each names.

# Prepare: Install Figma & Plugin

Figma

Plugin : Google Sheets Sync

# Step 1: Copy your guest list to Google sheets

Think about what information is unique to each guests that will be included in the badge design. At minimum it should be their name.

When your badge deisgn has First Name and Surname on two rows or even in two colors. You can simply use two columns for first name and surname and reference them in two text elements in Figma.

# Step 2: Re-Create badge layout in Figma

Use dummy text layers to reference data column in your guest list.

For example, select the text layer for name. Change the layer name to #name where 'name' should be exactly the same as the column name in your Google sheet.

# Step 3: Sync guests to badges

Open guest list file in Google sheets.
Click 'Share' in the top right of Google Sheets
Click 'Change to anone with the link'
Now click 'Copy link'

From Figma menu, click Plugins > Google Sheets Sync
Paste the share link
Click 'Fetch & Sync'

# Finish: Email or Print

You can choose to download each badge as PNG file to send Email, or group into printable size frames and download PDF files to print out.

🎉 Now you have automatically generated badges for all your guests!

# Loading…

# Advanced Tip 1: Automatically populate a unique QR code for each guest.

Add a column in google sheet for the content of QR code. Depends on which platform you want to later scan the QR code, this value should come from the platform.

Add another column(e.g. qr) for the QR code image, which we will use a online API to generate. Enter the following formula in the cell of second row:

= CONCATENATE("https://api.qrserver.com/v1/create-qr-code/?size=150x150&format=svg&data=",E3)

Double click on the bottom right square, to copy down the formula to all rows.

In your figma file, add a reactangle layer (r key), and change the layer name to #qr.

Sync guests to badges.

The plugin will try to call the QR code api and download all the QR code images.

# Advanced Tip 2: Automatically populate multiple badge styles.

Consider you want diffrent groups of guests (VIP/Media/etc.) to have different badge designs.

Here is how you can do it:

Besides name, add another column in your guest list to indicate the grouping.

In your figma file, create additional designs for each group. Name them as group=vip, group=media etc. where second part after the slash should be exact values in the group column in your guest list.
Now make each design frame a component.
Select all components, click Combine as Varaiants in the Design panel at right side of figma screen.
Sync guests to badges.