Prototyping tasks
A prototype responds in preview: components switch between their states on their own, and interactions run actions when events fire. States, their transitions and forms are set up on the component, so their pages live in Components; this page lists them together with the pages of this section.
Tasks
- Make an interactive button: Variants and interactive states — hover, pressed and checked states that a component behavior switches without an interaction.
- Animate a state change: Transitions between states — what animates when a component switches state.
- Build a form: Text fields and forms — typeable fields, checkboxes, toggles and radio buttons.
- Add navigation or actions: Interactions — events, the actions they run, and which layers an action can target.
Pages in this section
- Preview — opening the preview, its address and viewport, and who can open it.
- Interactions — how events and their action lists run.
- Draggable, Resizable and Sortable objects — pointer gestures that need no events.
- Scrolling in preview — why nothing scrolls by default, and the Scrollable and Pannable behaviors.
- Debugging a prototype — symptoms and their causes, the debug console and the Validation console.
- Events and actions reference — every event and action with its options.