Specs & Guidelines
The Face Match module includes complete Figma specifications documenting spacing, layout rules, typography tokens, and language variants. These specs ensure consistency across platforms and allow localized versions of the UI to scale without breaking the layout.
Responsiveness & Viewport Adaptation
The Face Match module is fully responsive and adapts to a wide range of device sizes and aspect ratios. The comparison images, result icons, instructions, and CTAs remain visible, balanced, and properly aligned across platforms.
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Comparison images | Scale proportionally; circular crops preserved | Not the crop; surrounding styling yes |
| Selfie / ID labels | Reflow above each image | Text & color |
| Result icon & text | Centered; scale with viewport | Color & text |
| Buttons | Width adjusts to container | Color & text |
| Footer / watermark | Pinned to bottom safe area | Optional |
| Background surfaces | Expand to full viewport | Yes |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| Comparison layout | Users must understand which images are compared |
| Image crop proportions | Consistency and recognizability |
| Minimum text size | Readability & WCAG compliance |
| Minimum tap target sizes | Accessibility on mobile |
| Overall hierarchy | Prevents cognitive load at different sizes |
Desktop & Tablet Guidelines
The module adapts gracefully to larger viewports. The Figma file includes guidelines for layout adjustments, safe areas, proportion scaling, and interaction differences between touch and pointer-based devices.
Prototype & Transitions
Face Match includes predefined transition rules and micro-interactions that keep the experience smooth across comparison, processing, and result states. Timing and easing are documented directly in the Figma prototypes.
Localization
The Face Match module supports full localization and adapts to languages with different lengths, line breaks, and reading patterns. The Figma file includes examples for long, short, and multi-line translations to ensure layouts remain stable across regions.
Key considerations:
- All user-facing text is fully localizable.
- UI adjusts to prevent truncation and maintain readability.
- Buttons and CTAs automatically expand to fit translated labels.
- Selfie / ID labels remain clear across languages.
- Ensure localized strings preserve clarity and follow regulatory requirements when applicable.
Updated 1 day ago