Open a website or video project, choose Focus or Studio, make a safe first edit, preview the real target, and understand save, share, export, and publish boundaries.
Where: Dashboard → open or create an f0 Website or f0 Video project.
Key ideas
- One document, two chrome levels: Focus keeps the canvas and contextual controls prominent. Studio reveals the full panels and production controls. The choice may follow the account default or a project override.
- Selection drives context: Select a page element, layer, section, shot, or timeline item before looking for its contextual tools. Different objects expose different property and motion controls.
- Preview is a separate job: Editing selection and handles are not visitor behavior. Use Preview/Interact and the target widths or playback controls to test what will actually ship.
- Save is not publish: Autosave/local project state, backups, share links, staging preview, export, and production publishing have different effects and destinations.
Steps
- Open the project and confirm its name, current page/shot, and save state.
- Choose Focus for a simplified shell or Studio for complete panels. Clear the project override when it should follow the account default.
- Use the Pages/Layers surfaces to select the intended structure, then select the exact element on the canvas.
- Make one direct content or style change and verify the selection did not move to a parent, repeated class, or another breakpoint.
- Use Insert for a new element or section; prefer the existing design-system tokens and components over one-off styling.
- Add animation or timeline work only after the static state is correct. For a stagger, select the parent and animate children.
- Enter Preview and test responsive devices for websites or playback/timing for video. Test interactions in Interact mode where selection is disabled.
- Check save status, create a named backup before a risky round, and then choose the correct delivery path: share, staging preview, export, or publish.
Focus is best for
- Prompt-led revision
- Direct selection with a compact contextual bar
- A clearer canvas while reviewing layout and motion
Studio is best for
- Pages and Layers navigation
- Insert and Assets workflows
- Design-system, interaction, timeline, settings, and export controls
- Detailed troubleshooting across breakpoints or complex selections
Tips
- Name a backup before structural edits, large imports, or broad AI changes.
- Test once as an editor and once as a visitor; the two modes intentionally behave differently.
Limitations and important notes
- Focus is not a separate document format.
- Changing device width does not create a separate page.
- Preview does not replace accessibility, content, or production-domain checks.
Troubleshooting
My project always opens in the unexpected view.
Check the project override first, then Account → Preferences for the f0 default, then the selected dashboard work mode.