Screens and components

Build screens from text, images, controls, and reusable designs.

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

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 for how these choices work.

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.

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.

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.