Set up your workspace

MODO separates the appearance of the application from the appearance of the project you are designing.

Choose the app appearance

Open Appearance and choose the system, light or dark setting. System follows the operating system's preference. This changes panels, menus and controls; it does not change your website's design tokens.

The project's light/dark mode selects its design values. Switch that mode to inspect your design, then compare the page Preview. A project needs corresponding values or styles for its modes to look different.

English is the default application language. The language of the website is a separate project setting: set it under Settings → Targets and versions. Changing the application language does not translate your content.

Create a playground

From Welcome, start a new project, choose its template and check Add a free Playground page. Name the project and use Choose folder & create…. Open the added playground from Pages.

In an existing project, open Pages → Add Playground, give the page a name, and choose Create. No new project is needed. This page has no preset frames, saves with the project, and is excluded from publishing. The same action is available in Search as Add Playground….

Use this space for experiments, components or arrangements that do not need a published route. You can also place design material outside page frames on the canvas. Material outside exported page roots does not automatically become website content.

Save experiments as .modo copies when you want a portable checkpoint. A playground still uses the same local persistence and recovery model as other projects.

Navigate precisely

• Use the compact vertical rail to choose Layers, Pages, Assets, Components, Tokens or CMS.
• Double-click a layer's icon in Layers to bring the whole layer into view on the canvas.
• Double-click its name to rename it.
• Scroll the layer tree horizontally to read deeply nested or long names.
• Open the layer context menu on the canvas or in Layers for actions on that selection.
• Use View commands for zoom, rulers, guides and the work grid. The work grid helps alignment; a frame's Grid layout arranges its children and is a different feature.
• Use View → Keyboard shortcuts for the bindings in your current build and platform.

If spacing looks wrong, select the containing frame and inspect its layout before changing individual coordinates. See spacing and sizing.