Moio documentation
These pages cover the concepts that set Moio apart and the advanced ones that take some explaining: layout that adapts, components with states, inputs and slots, variables and expressions, interactions, and a preview rendered as HTML and CSS. They are written for experienced designers. If you also know a bit of CSS, much of the layout model will look familiar.
How the pieces fit
- You design on artboards with layers, using Flex and Grid layout where the design should adapt.
- Repeating parts become components. Variants and states make them interactive, inputs make them configurable, slots leave room for content that differs per instance.
- Variables hold values that properties follow and that actions change.
- Interactions are events with lists of actions: navigate, switch a variant, set a variable, branch on a condition.
- Preview renders the document as HTML and CSS and updates while you edit. It is what you share with other people.
I want to…
| Task | Start with | Then |
|---|---|---|
| Bring in a design from another tool | Import from Figma, Sketch and XD | What to rebuild after an import |
| Give a component hover, pressed or checked states | Variants and interactive states | Overrides |
| Build a text field or a form | Text fields and forms | Variants and interactive states |
| Make a component with editable text, color and a content area | Component inputs | Binding properties, Slots |
| Build a page that adapts to its width | Sizing | Grid layout, Size Enters Range and Size Exits Range |
| Build a prototype that remembers things — tabs, counters, toggles | Variables | Binding properties, Set Variable |
| Make something scroll in preview | Scrolling in preview | |
| Make layers draggable, resizable or sortable | Draggable, Resizable and Sortable objects | |
| Understand why a click does nothing | How interactions run | Events and actions reference |
| Use a component in another document | Reusing content across documents | |
| Find out why a prototype misbehaves | Debugging a prototype | How interactions run |
| Work in a document with other people | Collaboration and comments | Permission levels |
| Fill a design with generated text | AI content generation | |
| Send a prototype to a stakeholder | Sharing documents and prototypes | Permission levels, Seats and billing |
| Find out what happens when you delete or move something | Projects, moving, deleting and trash | |
| Look up a shortcut, an expression function or a color format | Keyboard shortcuts | Expression functions, Color formats |
Conventions
Shortcuts are written for Windows and Linux. On macOS, use ⌘ for Ctrl and ⌥ for Alt; where a shortcut differs in any other way, the macOS form is given next to it.
Names in bold are labels as they appear in the app.
To report a problem, use Report a bug: in the editor it is in the settings menu at the right end of the header (tooltip Even more options), in preview in the header's menu (tooltip More options).