# Screens & States

A complete view of all screens the user may encounter during the Face Match experience. Each state includes a brief description and a direct link to its source in Figma.

**Open Full Screen and Specs in [Figma](https://www.figma.com/design/BXeJ6Q3TXahJVWEt8QoMVA/Face-Match---In-Production?node-id=18-19332)**  
Source of truth for layout, visual specs, interactions, and platform variations.

***

## Face Comparison

Comparison screen showing the images from the ID and Selfie. It animates automatically when comparing the images to clearly communicate the step to the user.

<Image align="center" src="https://files.readme.io/b9038eece14fcea02f4cb5fa2ff9a7eaf3b2169375adaf6ba33edcbed983fa13-customization-1.png" />

<br />

## Compact Mode Face Comparison

This is a configurable alternative to the Face Comparison screen. The images from the ID and Selfie are not shown, and a loader is displayed while the match is performed.

<Image align="center" src="https://files.readme.io/316a1b45c42e6408bc1e1cdf320eaf425d1a6bc8ec4ab0fcd603227df9929a9d-screens-and-states-2.png" />

<br />

## Success

Shown when the face match is successful. The user can proceed to the next verification step without additional input.

<Image align="center" src="https://files.readme.io/815b3113bd79102443fe920132a2ecd3473d270833d1d322e505801a715a9afa-screens-and-states-3.png" />

<br />

## Error

Shown when the face match has resulted unsuccessful. The user may continue to the next step, depending on the configuration of the flow.

<Image align="center" src="https://files.readme.io/cab2e9d93ba253b5d0a79ace9c2726a09cb6ea2d102e88d4a19d2d63a4504beb-screens-and-states-4.png" />

<br />