---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/face-match-screens-and-states/"
section: "design-and-ux"
group: "Module Customization / Face Match Design"
version: "v1.1"
status: "live"
---
# 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://developer.incode.com/assets/109d700928410263c62bb692d8fe85fa.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://developer.incode.com/assets/3ae2c56301b62d96362b147e9cac08c0.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://developer.incode.com/assets/f26263209a65a4efe1d9552dd56c9793.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://developer.incode.com/assets/a7437e4eca14064807c29d3d31b124b1.png" />

<br />