— PROJECT NAME
QR Overlay
— ROLE
UX & UI Design
— DATE
2023
I designed a feature allowing users to apply and customize QR codes on video ads, leveraging Figma variables for real-time previews. This streamlined the workflow, making it easy to visualize the final ad.
Users could adjust QR size, position, colors, and add a CTA label. Customization options included modifying the inner and outer eyes, pattern, and placement for maximum flexibility.
To enable a fully customizable QR code, key attributes needed to be defined:
Size
- Users can select from Small, Medium, or Large.
Color Customization: Adjustable elements include:
- Background color
- Pattern color (main QR design)
- Inner eye color (center of the QR code’s eyes)
- Outer eye color (frame around the eyes)
- Visibility: Users can toggle the QR code on or off as needed.
Figma’s variable system provided the flexibility to dynamically adjust QR code attributes. The setup included:
Size Variable
- Defined three boolean variables: Small, Medium, Large.
- The selected size is set to True, while others remain False.
Color String Variables
- qrBackgroundColor – Background color
- qrPatternColor – QR pattern color
- qrInnerEyeColor – Inner eye color
- qrOuterEyeColor – Outer eye color
Visibility Variable
- Introduced a boolean variable, qrVisible, to control whether the QR code is displayed.
With variables in place, the next step was to integrate them into the design:
Designing the QR Code
- Created a vector-based QR code to ensure scalability.
- Applied the qrSize variable to dynamically adjust the component’s dimensions.
- Linked color variables to their respective elements for real-time customization.
- Enabling Visibility Toggle
- Wrapped the QR code in a parent frame/component.
- Applied the qrVisible variable to its visibility settings, allowing users to show or hide the QR code on demand.
