UMA UI Components

The screens and UI components used in this doc are available to download in an open-source Figma library. This library contains common UMA-specific UI components like UMA address-logo lockups, custom keypads, address input fields, and amount input fields.
The components are fully equipped with variants for different sizes, interaction states, errors, truncation, and more. Feel free to download and adapt these components to your own product’s design system.
Consider elevating the experience with a custom keypad to improve the polish and UX of entering an amount.
Custom keypad
  • Use simple language to set expectations and communicate what's next when a user taps or clicks a button.
  • Use one word when possible.
    Buttons
Consider how you want to collect recipient information based on the types of input formats your app or service supports.
When you support many address formats, UMA should natively live alongside any others you support. Here is an example of the different stages of a multi-format input.
Multi format input
When you only support UMA, take advantage of the ability to make the user experience as easy as possible to enter an UMA. Here is an example of the different stages of a single-format input fitted with a leading dollar sign and helpful placeholder text.
Single format input
  • The UMA logo is made to be used in products as a trust cue. It's a useful sign of trust that you can use in different ways to show that something is legitimate. Here are some simple rules to think about when using it in your product:
  • It should be small, but legible enough to read. If it's too big, it can add unnecessary tension to the user experience.
  • It should be used sparingly. Try to avoid using the logo repeatedly used on a screen to reduce the visual weight of the element in the experience.
  • Use a high-contrast color.
  • Don't use or manipulate the UMA logo for any type of form validation.
    UMA logo
The UMA logo is helpful in many use cases. For example, you might want to closely associate the UMA logo with an address to make the complete address look like one element on a transaction confirmation screen. You may also want to place it next to terms like "verified" to help build users' trust in an end-to-end flow.
Placement