Banking UI Kit — EU Verification of Payee Screens (Figma)

For designers of bank, neobank and fintech transfer screens in the EU. Type the payee name your customer entered and the name on the account — see which of the four payee check states your screen has to show, and since when.

What the free check is — and is not

The Instant Payments Regulation (EU) 2024/886 makes the payer's bank compare the payee name with the IBAN before the payer authorises a credit transfer, and report one of four results: match, close match (showing the account holder's name), no match or check not possible. It does not prescribe a matching algorithm — each bank sets its own. The rules on this page are illustrative: case, accents and punctuation are ignored (match); a missing legal form, a changed word order, a missing or extra name part or a small typo count as close match; anything else is no match; an empty account name means the check was not possible. Use it to see every state on your screen, not to replace your bank's engine.

Free: the payee check result alert, 4 variants

Match (MTCH) · Close match (CMTC) · No match (NMTC) · Not possible (NOAP) — as a Figma plugin, SVGs and a .sketch. That is the whole Verification of Payee result on your transfer screen.

Full kit: the screens around the alert

8 components, 29 variants, 29 SVGs, one .sketch and the plugin source. Once the alert is on screen you need the input that triggers the check, the wait while the payee's bank answers, the confirmation before "Send anyway", the status of the payment and — for business customers who submit bulk files — the opt-out switch.

Why not a free kit? Free Figma Community banking UI kits draw balances, cards and charts but no payee name check, and a chatbot will not draw you component variants.

Yardstick: rival banking UI kits on this shelf list at up to $168 (our shelf measurement, 2026) without the payee check states.

How to get it into Figma

1. In Figma, drag the .sketch file onto the file browser to open it. It holds the variants as named, coloured shapes without text layers.
2. Copy an SVG and paste it into a frame — it comes in as vectors with its label.
3. Plugin: it ships as TypeScript source (code.ts). Run tsc to get code.js, then import manifest.json as a development plugin; it rebuilds the components as real variant sets with text.
4. Replace #0B6E4F with your brand colour in Selection colors.