This page describes the Advanced mode properties panel (the Layout / Style / Logic tabs). In Simple mode the panel instead shows one high-level block controller per block, with curated controls and no raw tabs.
What the panel shows
The panel has a few modes, and it switches automatically based on your current selection:
The rest of this page covers the screen panel and the component panel. Zones have their own 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: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):
Style tab (content, type, fills, borders, effects):
Logic tab (behavior and tracking):
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:
The Root Stack (
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.