Karma QR Code Generator for Figma

Overview

The Karma QR Code Generator is a Figma plugin designed to create multiple print-ready QR-code designs for customer use. It utilizes a CSV file containing table names and storefront links to generate customized QR codes within your Figma designs.

Features

• Generates QR codes based on CSV input (table name, storefront link)
• Creates print-ready designs
• Customizable templates
• Option to add prefixes or suffixes to table numbers
• Color and settings customization

Prerequisites

• Figma for Desktop
• Node.js and npm (for compiling the code)

Installation

1. Download the code from the GitHub repository (green button in the top right corner).

2. Unzip the contents.

3. Open a Terminal window and navigate to the unzipped folder: ´´´cd/path/to/unzipped/folder´´´

4. Run the build command and wait for it to complete: ´´´npm run build´´´

5. Open Figma for Desktop and your design file.

6. Click Plugins > Developer > Add plugin from manifest.

7. Navigate to your unzipped folder and select the manifest.json file.

8. The plugin is now installed and can be run by clicking the plugins menu and selecting "Karma QR Code Generator".

Usage

1. Select a template design from this Figma file. Do not edit this file; only copy designs from it.
2. Create a new design file for your customer in the "Customer QR Codes" project here.
3. Copy your chosen template to the new file.
4. Customize the template as needed. Ensure all designs are vector-based (SVGs) to prevent blurry prints.
5. Name layers correctly:

• QR code: A square layer named "QRCODE"
• Table Number (optional): A label named "TABLENAME"

6. Start the plugin: Plugin > Karma QR Code Generator
7. Input table numbers and storefront links as prompted.
8. Choose colors and settings.
9. Set prefix/suffix for table numbers if desired.
10. Click generate.
11. Export the designs as PDF to maintain vectorization for printing.

Troubleshooting

If you can't see the generated codes, they may be outside your screen. Check the origin of the Figma file.

Bug Reporting

Report bugs in the #prod-bugreports channel on Slack.

Contributors

• Hjalmar

Notes

• Ensure all designs are vector-based for optimal print quality.
• The plugin generates codes at the origin of the Figma file.