The properties panel is the panel on the right side of the editor. It always shows the settings for whatever you have selected. Select a screen and you get screen settings. Select a component and you get that component’s settings, split across three tabs. Select nothing and the panel tells you to pick something.
The panel is resizable. Drag its left edge to make it wider when you are editing something with many fields.
What the panel shows
The panel has a few modes, and it switches automatically based on your current selection:
| You selected | The panel shows |
|---|
| Nothing | ”Select a screen or component to view properties” |
| A screen (in the Layers panel) | Screen settings (see below) |
| A component on the canvas or in Layers | Component settings, in Layout / Style / Logic tabs |
| A custom component | The custom component’s inputs, interactions, and size |
| A zone or a component inside a zone | Zone settings (covered on the Zones page) |
When a screen is selected
Click a screen in the Layers panel (or click empty canvas to deselect a component). The panel shows these collapsible sections, top to bottom:
| Section | What it does |
|---|
| Basic Properties | The screen name. |
| Background | The screen’s layered background. See Backgrounds. |
| Screen Transitions | The enter and exit transition for this screen, or “Using flow default”. See Zones and transitions. |
| Animation Speed | A Speed Multiplier slider from 0.25x (slower) to 2.0x (faster), default 1.0x. It scales every animation duration and delay on this screen. See Animations. |
| Particle Effect | An auto-play particle effect for the screen (confetti, snow, sparkles, and more), triggered On Appear or After Delay, with an optional loop. See Particles. |
| Timeline | The screen-level animation timeline that sequences component animations. See Animations. |
| Behavior & Layout | Two switches: Include in Progress Steps (count this screen in the progress bar, on by default) and Hide All Zones (hide the navigation bar, footer, and overlay on this screen, off by default). |
| Danger Zone | Delete this screen. The button is disabled when it is the only screen in the flow. |
There is no screen-level padding or safe-area control. Padding is set per component (the Spacing section), and the screen’s content lives inside its Root Stack, which you can pad and align like any other stack.
When a component is selected
Select any component (a click on the canvas or in the Layers panel). The component panel has two parts.
The overview strip
A non-collapsible strip at the top shows the component’s name, an eye icon to show or hide it, and actions to duplicate or delete it. The Root Stack is the exception: it has no duplicate or delete and you cannot rename it.
Three tabs: Layout, Style, Logic
Below the overview, sections are bucketed into three tabs so you see a handful of sections at a time instead of all of them. The tab you last used is remembered, and Style is the default.
Layout tab (size, placement, and how children are arranged):
| Section | What it does |
|---|
| Stack Settings | Axis, alignment, spacing, wrap, and scroll for stacks and buttons. See Layout and sizing. |
| Size | Width and height (Auto / px / %), plus optional min and max. |
| Position | Normal, Relative, Absolute, Fixed, or Sticky, with offsets and z-index. |
| Spacing | Padding and margin. |
| Section | What it does |
|---|
| Content | The kind-specific content fields (text, image source, icon, or input). |
| Typography | Font, weight, size, spacing, alignment, and color for text and inputs. See Colors and typography. |
| Component settings | Per-kind controls (Button, Toggle, Slider, Ring Progress, Lottie, Comparison Chart, Progress Bar). |
| Layer | Background fill, opacity, visibility, and overflow. |
| Border | Border style, width, color, opacity, and corner radius. |
| Effects | Drop shadow and blur. |
| Text Effects | Typewriter, count-up, rotating text, and similar (text only). See Animations. |
| Section | What it does |
|---|
| Interactions | Actions that run on events like tap or appear. See Interactions and actions. |
| Animations | Enter, exit, and attention animations, stagger, and press feedback. See Animations. |
| Experiment Flags | Mark the component as belonging to an A or B variant for in-screen experiments. See Running experiments. |
| Metadata | The component ID and an optional analytics tag. |
Which sections appear for which component
Every component has the Layer, Border, and Effects sections (Style), the Spacing section (Layout), and the four Logic sections. Most also have Size and Position. On top of those, each kind adds its own sections:
| Component kind | Sections it adds |
|---|
text | Content, Typography, Text Effects |
input | Content, Typography |
image | Content |
icon | Content |
stack | Stack Settings |
button | Stack Settings, Button settings |
toggle | Toggle settings |
slider | Slider settings |
ringProgress | Ring Progress settings |
lottie | Lottie settings |
comparisonChart | Comparison Chart settings |
progress | Progress Bar settings |
custom | Inputs, Interactions, Size (a separate panel, see Custom components) |
screenRoot) shows only Stack Settings and Spacing. It always fills its screen, so it has no Size or Position section.
A button that has a goBack or closeFlow action is treated as a Back or Close button and shows its own button settings. These usually live in a zone.
Dynamic (bound) values
Many fields have a small chip next to them that reads Static. Click it to switch that field from a fixed value to a dynamic value: a value that changes based on a variable or a condition. Once a field is bound, the chip shows the bound state instead of “Static”. Full coverage is on the Dynamic values page.
Common mistakes
- Looking for a section that only exists for another kind. Typography only appears on text and inputs. Stack Settings only appears on stacks and buttons. If a section is missing, you probably have the wrong component selected.
- Editing a value that is bound. If a field is bound to a dynamic value, typing a static value will not stick. Switch the chip back to Static first, or edit the binding.
- Expecting Size or Position on the Root Stack. The Root Stack always fills the screen. To inset content, add padding in its Spacing section or nest a smaller stack inside it.
Related pages
