Find every major Designer surface, understand what changes with the active page type, and know which controls edit the document versus only the current view.
Where: Open a standalone Designer project or open Designer from a supported Flowgen editor card.
Key ideas
- One top bar, one active page: The top bar combines the design name, page dropdown, canvas mode, device or shape, refresh, undo/redo, exposed fields, art direction, design system, selection status, collaboration state, Add page, and Share & export. Every document edit below it targets the active page.
- Four canvas modes are separate verbs: Edit selects and changes elements, Draw creates annotations or drawn input, Comment places discussion pins, and Preview runs the page. Direct manipulation does not call the AI, and an annotation does not silently mutate the document.
- Page type changes the workspace: Responsive pages show Desktop/Tablet/Mobile. Fixed-stage pages such as slides, reels, ads, motion, and logos scale an exact artboard. Ratio-based work shows a shape picker. Media and Design system are hosted pages that replace the canvas and timeline with native full-page views.
Steps
- Use the page dropdown to select the document you intend to change. Rename, duplicate, reorder, refresh, save to the page library, or add another typed page from the same page controls.
- Choose Edit, Draw, Comment, or Preview before acting on the canvas. If clicks run links instead of selecting elements, return to Edit.
- For a responsive page, choose Desktop, Tablet, or Mobile. For a supported fixed/ratio page, choose the intended shape instead; Designer never shows both controls for the same page.
- Select an element to open contextual editing. Use the Layers dock to select hidden/nested elements, re-parent them, or remove them.
- Open exposed Fields from the top bar when the page declares reusable text/style/variable controls. These are document inputs, not arbitrary new CSS properties.
- For time-based pages, open the beat/timeline rail, scrub or play the current range, and edit the motion specification.
- Use Refresh to restart the running frame from the beginning. Refresh does not revert, save, regenerate, or replace the page.
- Check role/save/presence status before editing a shared project, then use Share & export only after the active page and project outputs are ready.
Top-bar map
- Brand/menu and editable design name
- Pages dropdown plus the clay Add page action
- Edit / Draw / Comment / Preview
- Device width or aspect/shape, depending on page type
- Refresh and undo/redo
- Fields, Direction, and Design system chips
- Selection count with clear/delete actions
- Role, save state, collaborator roster, Share & export
Right dock and conversation rail
- Layers is the only persistent right-side panel.
- The Media icon is a door to the full Media page, not a 288px dock tab.
- Brain is not a right-dock tab; it is reached from the dashboard, the composer’s From your Brain picker, record mentions, saved-research flow, and Brain tools.
- The conversation rail can move sides and resize independently of the document. Its Design/Plan/Ask setting controls the assistant tool permissions, not the canvas mode.
Compact-width behavior
- Mode remains visible because it changes what a canvas click does.
- Device, refresh, and undo/redo move into the overflow menu when space is tight.
- Status and roster details yield before Share & export, so delivery actions do not disappear behind a long title or selection label.
Current stage navigation and Draw delivery
The stage now exposes a Page | Canvas wheel-behavior switch beside Fit and exact zoom levels. Draw Send is a full assistant turn that carries structural marks, an inked visible-band screenshot, the shared note, and every attachment; drawing history remains separate from page undo.
- Page: wheel scrolls the rendered page
- Canvas: wheel pans the workspace
- Space-drag pans in Page mode
- Fit, 50%, 100%, and 200%
- Draw tools: Pen, Box, Text, Arrow, Pick
- Designer chrome and hosted resource surfaces follow the active light or dark app theme
Tips
- Clear the selection before a broad AI request: a selected element scopes the conversation unless the prompt explicitly says otherwise.
- Use Layers when a decorative overlay or nested item is hard to click directly.
Limitations and important notes
- Hosted Media and Design system pages have no normal iframe canvas, device width, exposed field strip, or timeline.
- Undo is page-specific; it does not rewind another collaborator’s active page or an already exported file.
- Preview runs supported document behavior but remains distinct from the public shared/exported result.
Troubleshooting
Desktop/Tablet/Mobile is missing.
The active page is fixed-stage, ratio-based, or hosted. Use its shape control where available, or switch to a responsive page type.
The canvas reloads but my changes remain.
Refresh restarts the live frame. Use undo/history for document changes.
Related guides
- Designer page types, pages, slides, and responsive stages
- Designer chat: Design, Plan, Ask, files, references, mentions, and skills
- Share, present, export, and reuse Designer artifacts
- Designer stage navigation: Page, Canvas, Fit, zoom, and pan
- Designer Draw mode: mark the canvas and send one complete AI turn