UI design glossary
Short, plain definitions of the screen patterns, UI elements and design-system terms you meet when designing apps in Figma. 56 terms, grouped so you can jump straight to the one you need.
Screen patterns
Checkout
The screens where someone reviews an order, adds delivery and payment details and pays. Good checkouts are short, show the total clearly and avoid surprises at the last step.
See checkout examples in real apps
Related: Paywall
Empty state
What a screen shows when there is nothing to display yet, such as an empty inbox, no search results or a new account. A good empty state explains why it is empty and offers a next step.
See empty state examples in real apps
Related: Loading and skeleton screen
Feed
A scrolling stream of content, such as posts, videos or updates, usually ordered by time or by relevance. Feeds are built from repeated cards or list rows and often load more as you scroll.
Filter and sort
Controls that narrow a list of results (filter) or change its order (sort). On mobile they often open in a bottom sheet or full-screen modal, with chips showing which filters are on.
See filter and sort examples in real apps
Related: Chip, Bottom sheet
Live Activity
Also called: Dynamic Island
An iOS feature that shows live, glanceable progress on the Lock Screen and in the Dynamic Island, such as a delivery, a ride or a match score.
Loading and skeleton screen
Also called: Skeleton, Placeholder
A placeholder shown while content loads. A skeleton screen draws grey blocks in the shape of the coming layout, which feels faster than a spinner on its own.
See loading and skeleton screen examples in real apps
Related: Empty state
Onboarding carousel
Also called: Walkthrough, Intro slides
A short series of swipeable screens that introduce what an app does before sign-up. A page indicator shows progress, and a Skip button lets people leave early.
See onboarding carousel examples in real apps
Related: Page indicator, Carousel, Permission request
Paywall
Also called: Upgrade screen, Subscription screen
A screen that asks people to subscribe or pay to unlock features or content. Mobile paywalls usually list the benefits, compare plans, highlight a free trial and include restore-purchase and terms links.
See paywall examples in real apps
Related: Checkout
Permission request
Also called: Priming screen, Pre-permission
A screen that explains why the app needs access to something, such as notifications, location or the camera, before the system dialog appears. Asking in context, with a clear reason, gets more people to say yes.
See permission request examples in real apps
Related: Dialog
Settings screen
Also called: Preferences
A list of preferences and account options, grouped under section headers. Each row either toggles a setting in place or opens a more detailed screen.
Splash screen
Also called: Launch screen
The first screen shown while an app launches, usually just a logo on a brand colour. It should disappear as soon as the app is ready; on iOS it is called a launch screen.
See splash screen examples in real apps
Related: Onboarding carousel
Verification code screen
Also called: OTP screen, One-time passcode
A screen where people type a one-time code sent by text or email to confirm their phone number, email or sign-in. It usually pairs a code input with a resend link and a countdown.
See verification code screen examples in real apps
Related: Code input
UI elements
Accordion
Also called: Disclosure, Expandable section
A stack of headers that each expand to reveal more content, used to keep long pages such as FAQs short.
Action sheet
A list of choices about the current task that rises from the bottom of the screen, such as Save, Share or Delete, with a Cancel option. Destructive actions are shown in red.
See action sheet examples in real apps
Related: Bottom sheet, Context menu
Badge
A small marker on an icon or item that shows a count or status, such as unread messages or "New".
Bottom sheet
Also called: Sheet, Half sheet
A panel that slides up from the bottom of the screen to show extra options or details while keeping the screen behind it in view. It can often be dragged between half and full height.
See bottom sheet examples in real apps
Related: Action sheet, Scrim, Full-screen modal
Card
A container that groups an image, text and actions about one thing, such as a listing or a post. Cards repeat in feeds and grids, so they are almost always built as components.
Carousel
A horizontally scrolling row of cards or images, often with the next item peeking in to show there is more.
See carousel examples in real apps
Related: Page indicator, Card
Checkbox
A box that can be ticked or cleared, used to pick any number of options from a list or to agree to terms.
See checkbox examples in real apps
Related: Switch
Chip
Also called: Pill, Tag
A small rounded label that can be tapped to filter, select or remove something, such as a category or an active filter.
See chip examples in real apps
Related: Filter and sort, Badge
Code input
Also called: OTP input, PIN field
A row of boxes, one per digit, for entering a one-time code. It often fills in automatically from a text message.
See code input examples in real apps
Related: Verification code screen
Dialog
Also called: Alert, Modal dialog
A small window in the middle of the screen that interrupts to confirm a decision or show something important, with one to three buttons.
See dialog examples in real apps
Related: Scrim, Full-screen modal
Full-screen modal
A screen that covers the app for a self-contained task, such as writing a post, and closes with Cancel or Done instead of a back button.
See full-screen modal examples in real apps
Related: Bottom sheet, Dialog
Large title
An iOS navigation style where the screen title starts large and bold, then shrinks into the navigation bar as you scroll.
See large title examples in real apps
Related: Navigation bar
List row
Also called: List item, Cell
One item in a vertical list, typically with a leading icon or avatar, a title, optional subtitle and a trailing chevron, value or switch.
See list row examples in real apps
Related: Settings screen
Mini player
A compact bar, usually just above the tab bar, that keeps audio or video playing while you browse. Tapping it opens the full player.
See mini player examples in real apps
Related: Tab bar
Page indicator
Also called: Page dots, Pagination dots
A row of small dots that shows how many pages a carousel has and which one you are on.
See page indicator examples in real apps
Related: Carousel, Onboarding carousel
Scrim
Also called: Overlay, Backdrop
A semi-transparent dark layer placed behind a sheet, dialog or drawer to dim the content underneath. Tapping it usually closes the overlay.
See scrim examples in real apps
Related: Bottom sheet, Dialog
Search bar
A text field for typing a search, usually with a magnifying-glass icon, a clear button and sometimes a cancel button or recent searches beneath it.
See search bar examples in real apps
Related: Text field, Filter and sort
Segmented control
A compact set of two to five joined buttons where only one can be selected, used to switch views or filter content in place.
See segmented control examples in real apps
Related: Top tabs
Side drawer
Also called: Navigation drawer, Hamburger menu
A panel that slides in from the side of the screen with navigation links or account options, usually opened from a menu icon.
See side drawer examples in real apps
Related: Tab bar
Slider
A track with a handle you drag to choose a value from a range, such as volume, brightness or a price limit.
Status bar
The strip at the very top of a phone screen showing the time, signal and battery. It belongs to the system, but designs must leave room for it and choose light or dark content to suit the background.
See status bar examples in real apps
Related: Safe area
Switch
Also called: Toggle
An on/off control that takes effect immediately, common in settings. Use a checkbox instead when the choice is only saved after a confirm button.
See switch examples in real apps
Related: Checkbox, Settings screen
Tab bar
Also called: Bottom navigation
A bar of three to five destinations along the bottom of an app, each with an icon and label. It lets people switch between the main sections in one tap. Android calls it a navigation bar.
See tab bar examples in real apps
Related: Navigation bar, Top tabs
Text field
Also called: Input, Text input
A single-line input for typing text, with a label, placeholder text, and room for helper or error messages.
See text field examples in real apps
Related: Code input, Search bar
Toast
Also called: Snackbar
A brief message that appears and disappears on its own to confirm an action, such as "Saved". Android’s version, the snackbar, can include one action like Undo.
Tooltip and coach mark
A small callout that points at part of the interface to explain it. Coach marks are tooltips shown on purpose, often in sequence, to teach a new feature.
See tooltip and coach mark examples in real apps
Related: Onboarding carousel
Top tabs
A row of tabs below the navigation bar that switches between related views of the same content, such as "For you" and "Following". You can usually swipe between them.
See top tabs examples in real apps
Related: Segmented control, Tab bar
Design systems and Figma
Auto layout
A Figma feature that arranges layers in a row or column with set spacing and padding, so frames grow, shrink and reflow as content changes, much like CSS flexbox.
Component
A reusable design element in Figma, such as a button or card. The main component defines it, and every copy follows changes made to it.
Component properties
Controls on a component that let people change it without detaching, such as text content, showing or hiding an icon, or swapping a nested instance.
Design system
The shared set of components, styles, tokens and rules a product team uses to build consistent interfaces. In Figma it usually lives in a published library.
Related: Design tokens, Component, UI kit
Design tokens
Named values for design decisions, such as colour-primary or spacing-16, stored once and reused in design and code. Change a token and everything that uses it updates. In Figma, tokens are usually set up as variables.
Related: Variables (Figma), Variable modes
Instance
A copy of a component placed in a design. You can override its text, colours and properties while it stays linked to the main component; detaching breaks that link.
Related: Component, Component properties
Safe area
The part of a phone screen that is not covered by the status bar, notch, Dynamic Island or home indicator. Important content and controls should stay inside it.
Related: Status bar
Text and colour styles
Saved Figma properties, such as a type scale or a colour, that you apply by name. Editing a style updates every layer that uses it.
Related: Variables (Figma), Design tokens
UI kit
A ready-made collection of screens and components you can copy into your own designs. A UI kit is a starting point; a design system adds the rules and tokens that keep it consistent.
Related: Design system
Variable modes
Also called: Light and dark mode
Alternative sets of values for the same variables, such as light and dark, or two brands. Switching a frame’s mode swaps every value at once.
Related: Variables (Figma)
Variables (Figma)
Figma’s way of storing reusable values for colour, number, text and true/false. Applied to fills, spacing, radius and more, they let you restyle a whole file by editing a few values.
Related: Design tokens, Variable modes
Variants
Versions of one component grouped into a set, such as a button in primary, secondary, disabled and pressed states. You switch between them from the properties panel instead of swapping components.
Related: Component, Component properties
See these patterns in real apps
Every SuperDuper UI clone is built from real components: tab bars, bottom sheets, paywalls and more, ready to edit in Figma.