The NFC Scan 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 NFC Scan module is fully responsive and adapts seamlessly to a wide range of device sizes and aspect ratios. The layout is designed to remain consistent and predictable whether the user is on a small phone, large phone, foldable device, or tablet.
How the layout adapts across devices
| Breakpoint | Behavior |
|---|---|
| Small phones (e.g., iPhone SE) | UI elements adjust vertically; passport illustration scales down to maintain visibility. |
| Standard phones (iPhone 12–16) | Full layout shown; spacing and hierarchy remain consistent. |
| Tall/narrow Android devices | Vertical spacing is redistributed; title and illustration remain pinned to the top. |
| Foldables (e.g., Pixel Fold) | Larger illustration and more balanced white space; content remains centered. |
| Tablets | Increased layout margins; illustration and bottom sheet scale proportionally. |
| Desktop web | Centered layout with controlled max-width; additional safe area padding applied. |
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Passport illustration | Scales proportionally by viewport height | No |
| Title text | Remains centered in the layout and pinned at the top | Yes, text is fully localizable |
| Progress bar | Width adjusts to container width | Color |
| Bottom sheet | Height adapts to content; anchored to bottom | Limited (background color) |
| Buttons | Width adjusts to container; vertical spacing adapts | Color & text |
| Footer / watermark | Pinned to bottom safe area | Optional |
| Background surfaces | Expand to full viewport | Yes |
| Header area | Scales padding according to device safe insets | Limited (color only) |
| Icons | Remain centered and maintain distance to the title | Color & style |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| NFC chip reading logic | Must remain consistent for reliable chip detection. |
| Progress bar behavior | Tied to actual scan progress; cannot be visual only. |
| Cancel button availability | Must always be reachable regardless of screen size. |
| Minimum text size | Required for readability & WCAG compliance. |
| Minimum tap target sizes | Ensures accessibility on mobile. |
| Overall hierarchy | Prevents cognitive load at different sizes. |
Design Notes
- The passport illustration always remains the dominant visual element, regardless of screen size.
- Horizontal spacing is fluid; vertical spacing uses fixed-safe thresholds.
- The bottom sheet anchors to the bottom of the viewport — avoid adding custom UI that may overlap with it.
- Multiline text is handled gracefully, but avoid extremely long localized strings.
Prototype & Transitions
NFC Scan includes predefined transition rules and micro-interactions that ensure a smooth user experience across all states — from the chip presence check and tutorial, through the active scan and progress feedback, to success and error outcomes. Timing, easing, and animation guidelines are documented directly in Figma prototypes.
Localization
The NFC Scan module supports full localization and is designed to adapt 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, including scan instructions, status messages, error labels, and button labels.
- UI adjusts to prevent truncation and maintain readability across all screen states.
- Spacing and vertical rhythm adapt to accommodate longer languages.
- Buttons and CTAs automatically expand to fit translated labels.
- The bottom sheet title and subtitle are independently localizable to allow precise control over tone per region.Ensure localized strings for scan instructions preserve clarity — ambiguous phrasing can cause users to move the phone and fail the scan.
- Incode supports a variety of languages.