---
title: "Screens and components"
description: "Build screens from text, images, controls, and reusable designs."
search:
  tags: ["Features"]
  keywords: ["add screen", "layers", "reusable component"]
---

Screens are the views users move through in an Experience. Each screen contains components such as text, images, buttons, and inputs. You can arrange them directly or ask Nuxie to change the design, and reuse components when several screens need the same look or behavior.

## Add a screen

1. **Add the screen**

    Open **Canvas**, choose **+** in the bottom toolbar, then choose **Screen**. Select the new screen to change its size and appearance in the inspector. You can rename it in **Layers**.

2. **Build its layout**

    Selecting a screen reveals tools beside **+** for adding a stack, text, image, video, or button. Choose **Add stack** to start a layout, then add the content it should contain. A selected stack receives new layers inside it; selecting another layer adds new content beside that layer.

3. **Connect it to the flow**

    [Connect the screen to the flow](/docs/guides/screens-and-interactions#screens-and-branches) to make it part of the Experience. Adding it to the Canvas alone doesn't decide when users see it.

<span id="arrange-a-screen" />

## Layout and content

Stacks keep related elements together. Use one for a heading and description, a list of benefits, or a row of plan options. Text and images sit within that layout, alongside the controls users interact with.

Select a screen or layer to edit its properties in the inspector. You can also describe the change in the Task:

> On the plan screen, put the benefits above the plan options and move the secondary explanation below the purchase button.

### Screen properties

Select the screen itself for settings that apply to the whole view. **Frame** sets the device frame and orientation, while **Size** sets its width and height. Use **Appearance** for visibility, background, and overlay, and **Style** to choose the design system.

The device frame helps you compose the screen at a particular size. The SDK integration and delivery settings determine which apps receive it.

### Layers

**Layers** shows the screen's contents as a hierarchy. Expand a group to select nested content, rename layers to make them easier to find, or toggle visibility from the list. Selecting a layer shows its styling and interactions in the inspector.

Duplicate a selection to make a variation. Undo and redo let you move through your changes; press **⌘/** on macOS or **Ctrl+/** on Windows for the full shortcut list.

## Reusable components

A reusable component gives you one design with several instances. For example, a plan card can expose a title, price, and selected state. The monthly and annual options then share the same design, with different values supplied to each card.

Edit the source component to update its instances. For a change that belongs to one instance, set that instance's inputs instead. An input can use the component's default, a value you enter, or compatible screen data.

The input's source menu includes **Use screen data**, **Unbind**, and **Reset to default**. See [Data and bindings](/docs/guides/data-and-bindings#reusable-component-inputs) for how these choices work.

<span id="reuse-a-consistent-design" />

## Shared styling

Shared colors and text styles keep separate components consistent, too. A button and a plan card can both use your primary color without being instances of the same component. Changing that shared color updates both; a local override affects only the selected element. See [Styling and themes](/docs/guides/styling-and-themes).

<span id="add-behavior" />

## Inputs and actions

Inputs collect values, and actions use them to move the Experience forward. A goal selector might save an answer, while Continue sends an event that opens the next screen.

Select a layer to see its **Interaction** summary and the Journey steps connected to it. **Not connected** means an event has no next step. Add its destination in the [flow](/docs/guides/screens-and-interactions).

Screens can also have capabilities. **Add capability → Response** attaches a collection for the screen's answers. **Add capability → Paywall** adds the Product placements used by its purchase controls.

## Animation

Choose **Animate** with a screen or reusable component selected to open its timelines and state machines.

### Timelines

A timeline changes properties over time. You can create, rename, duplicate, and delete timelines, move their keyframes, and scrub the playhead to see any point in the animation. Play it once, use **Loop** to repeat it, or **Ping Pong** to alternate forward and backward playback.

### State machines

State machines choose between animations as data changes. A transition can have conditions, a crossfade duration, and rules for when the current state can leave. For example, a selected state can respond to the same data used by a plan option.

While a state machine plays, change the screen data to see how it responds. Those changes affect the live preview. To try it together with the screens and actions that supply the data, run the complete [Experience preview](/docs/guides/preview).