App Designer is an environment for building MATLAB® apps. It simplifies the process of laying out the visual components of a user interface. It includes a full set of standard user interface components, as well as a set of gauges, knobs, switches, and lamps to create control panels and human-machine interfaces.

App Designer integrates the two primary tasks of app building – laying out the visual components and programming app behavior. You can quickly move between visual design in the canvas and code development in an integrated version of the MATLAB Editor. The embedded editor allows you to add new properties, callbacks, and other functions with a single click.

App Designer generates object-oriented code. This format makes it easy to share data between parts of the app. The compact structure of the code makes it easier to understand and maintain. Apps are stored as a single file containing both layout and code. You can share apps using this single file, or you can package them with supporting code and data and install them in the App Gallery.

App Designer Features

  • Drag and drop visual components from the Component Library to the design canvas (1).
  • Use alignment hints to get a precise layout of user interface components (2).
  • Specify common component properties through specialized property sheets (3).
  • Set axes properties in the design environment (4).
  • Build user interfaces with a set of standard components such as text fields, buttons, and dropdown lists (1).
  • Create apps with tabbed panels (2).
  • Use the Numeric Edit Field component to restrict input to a specified numeric range (3).
  • Create control panels or human-machine interfaces using instrumentation components (1).
  • Use knobs and switches to change parameters in the app (2).
  • Display results with gauges and lamps (3).
  • Edit app code within App Designer using an integrated version of the MATLAB Editor (1).
  • Use the App Layout pane to identify the names of the components in the code (2).
  • Use the Component Browser to add callbacks or navigate to existing callbacks (3).
  • Use programming alerts to avoid common coding errors (4).
  • Implement the behavior of your app as an object-oriented program (1).
  • Access the user interface components as properties of the app (2).
  • Create custom properties for data that is shared between different parts of the app (3).
  • Define callback functions as methods to control the behavior of the app (4).

Comparing App Designer and GUIDE

Building a MATLAB app requires you to perform a number of tasks including laying out components in the canvas, creating and editing callbacks, and managing data shared between different parts of the app. There are important differences between how these tasks are carried out in App Designer and the way they are traditionally done in GUIDE.

View a list of differences between GUIDE and App Designer.

Graphics Support

App Designer has limited MATLAB graphics support. You can use App Designer to build apps with 2D plots. App Designer does not support custom interaction through mouse and keyboard callbacks. App Designer does not provide components for creating menus or toolbars. 

View the complete list of supported graphics capabilities in App Designer.

App Designer Examples

Mortgage App

Download a simple mortgage amortization calculator, which uses standard user interface components including the new Numeric Edit Field component.

Blood Pressure Analysis App

Download a data analysis application that uses scatter plots.

Pulse Generator App

Download a pulse generator example that uses the Knob, Switch, and Lamp components.