Specs & Guidelines
The Manual Upload ID 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.
Open Screens Specs in Figma
Responsiveness & Viewport Adaptation
The Manual Upload ID 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; upload rows and hint area scale 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 upload rows remain pinned to the top. |
| Foldables (e.g., Pixel Fold) | Larger upload area and more balanced white space; content remains centered. |
| Tablets | Increased layout margins; upload rows and buttons scale proportionally. |
| Desktop web | Centered layout with controlled max-width; additional safe area padding. |
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Upload rows | Scale proportionally by viewport width | Limited (colors and labels) |
| Title text | Remains centered in the layout and pinned at the top | Yes, text is fully localizable |
| Tab selector | Width adjusts to container | Color & text |
| Buttons | Width adjusts to container, vertical spacing adapts | Color & text |
| Hint area | Expands to container width; text wraps gracefully | 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 |
|---|---|
| Upload validation logic | Must remain consistent for accurate document collection. |
| Continue button disabled state | Cannot be bypassed 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
- Upload rows always remain the dominant UI elements, regardless of screen size.
- Horizontal spacing is fluid; vertical spacing uses fixed-safe thresholds.
- Avoid adding custom UI above or below the module — it may break alignment.
- Multiline text is handled gracefully, but avoid extremely long localized strings in tab labels or button labels.
Open Screens Responsiveness in Figma
Desktop & Tablet Guidelines
The module is fully responsive and 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.
Open Desktop & Tablet Guidelines in Figma
Prototype & Transitions
Manual Upload ID includes predefined transition rules and micro-interactions that ensure a smooth user experience from document type selection and file upload, through the uploading state, to the ready for verification and error outcomes. Timing, easing, and animation guidelines are documented directly in Figma prototypes.
Open Prototype & Transitions in Figma
Localization
The Manual Upload ID 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 tab labels, upload row labels, hint text, button labels, and error messages.
- UI adjusts to prevent truncation and maintain readability.
- Spacing and vertical rhythm adapt to accommodate longer languages.
- Buttons and CTAs automatically expand to fit translated labels.
- Tab labels should remain short to avoid overflow; use abbreviations where appropriate for longer language variants.
- Ensure localized strings preserve clarity and follow regulatory requirements when applicable.
- Incode supports a variety of languages.
Open Screens Localization in Figma
Updated about 3 hours ago