Wireframes

Under the wireframe header, screens hold UI controls. One to three screens render side by side, each inside a device frame. It is the fastest way to sketch an app or web layout without drawing a single box.

wireframe
title: Onboarding

screen Login [phone] {
  heading: Welcome back
  input: Email
  input: Password
  button: Sign in [half]
  button: SSO [half]
  navbar: Home | Feed | Profile [active: 0]
}

Screens and frames#

screen Name [frame] { controls }. The frame is phone (the default), tablet, browser, or window. Give two or three screens to show a flow.

wireframe
screen Phone [phone] {
  statusbar
  heading: Inbox
  list: Alice | Bob | Carol
  tabbar: Home | Search | Me [active: 0]
}
screen Desktop [browser] {
  heading: Inbox
  search: Search mail
  list: Alice | Bob | Carol
}

A phone and a browser frame side by side.

Controls#

A control is kind or kind: label, plus optional attributes. Widths are positional: full (default), half, third, or two-thirds. Consecutive controls pack onto one row while their fractions fit. The full list of kinds is in the reference.

wireframe
screen Form [window] {
  heading: Create account
  input: Full name
  input: Email [half]
  input: Phone [half]
  dropdown: Country
  textarea: Bio
  checkbox: Email me updates [checked]
  button: Submit [half]
  button: Cancel [half]
}

Half-width controls pair up on one row.

Values#

Controls carry state through positional values:

on / checked for on and off for off (checkbox, radio, toggle).
60% or 0.6 for a slider or progress fill.
active: N for the selected item (navbar, tabs, pagination, and so on).
info / success / warning / error for alert severity.
Multi-item kinds write their items as A | B | C in the label.

wireframe
screen Dashboard [browser] {
  tabs: Overview | Reports | Settings [active: 1]
  search: Find a report
  paragraph: Your weekly summary
  slider [60%]
  progress [80%]
  toggle: Dark mode [on]
  radio: Weekly [half]
  radio: Monthly [half]
  alert: Storage almost full [warning]
}

For a couple of fuller layouts, a mobile shopping app across two screens (a product list and a cart) using the mobile-specific controls.

wireframe
title: Shop app

screen Browse [phone] {
  statusbar
  search: Search products
  segmented: All | Popular | New [active: 0]
  card: Sneakers · $89
  card: Backpack · $59
  tabbar: Shop | Cart | Account [active: 0]
  fab
}
screen Cart [phone] {
  statusbar
  heading: Your cart
  list: Sneakers | Backpack
  divider
  paragraph: Subtotal $148
  button: Checkout
  tabbar: Shop | Cart | Account [active: 1]
}

A settings page in a browser frame.

wireframe
screen Settings [browser] {
  breadcrumbs: Home | Account | Settings [active: 2]
  heading: Account settings
  avatar [third]
  input: Display name [two-thirds]
  input: Email
  toggle: Two-factor auth [on]
  toggle: Marketing emails [off]
  divider
  dropdown: Language [half]
  dropdown: Timezone [half]
  button: Save changes [half]
  button: Discard [half]
}