diff --git a/packages/docs/learn/ask-ai/prompt-to-design.mdx b/packages/docs/learn/ask-ai/prompt-to-design.mdx index c41d87db..fcd71d07 100644 --- a/packages/docs/learn/ask-ai/prompt-to-design.mdx +++ b/packages/docs/learn/ask-ai/prompt-to-design.mdx @@ -63,8 +63,7 @@ Each chat is labeled with the page, component, or flow it last worked on. Click Ask AI includes additional tools: - **[Adding context with @](/learn/ask-ai/adding-context)** — Reference other pages, components, snippets, and docs in your prompt -- **[Upload image](/learn/ask-ai/image-to-design)** — Add reference images -- **[Import from Figma](/learn/ask-ai/image-to-design#import-from-figma)** — Import Figma designs using the image model +- **[Upload image](/learn/ask-ai/image-to-design)** — Add reference images, including [Figma frames pasted as PNGs](/learn/ask-ai/image-to-design#import-from-figma) - **[Reference a web page](/learn/ask-ai/image-to-design#reference-a-web-page)** — Paste a URL to use a live web page as a reference - **[Personalize AI](/learn/ask-ai/personalizing-ai)** — Configure project-wide context diff --git a/packages/docs/learn/editor/overview.mdx b/packages/docs/learn/editor/overview.mdx index 6e72b5d9..8e2ed290 100644 --- a/packages/docs/learn/editor/overview.mdx +++ b/packages/docs/learn/editor/overview.mdx @@ -30,7 +30,7 @@ You can use the mode buttons in the top-right of the editor to switch between th -[Ask AI](/learn/ask-ai/prompt-to-design) is available in every mode — click the **Ask AI** button in the toolbar or press Cmd + / to open the docked panel and generate pages, components, and theme changes from a prompt. +[Ask AI](/learn/ask-ai/prompt-to-design) is available in every mode. The docked panel opens by default and stays open as you switch projects — press Cmd + / or click the **Ask AI** button in the toolbar to toggle it. Use it to generate pages, components, and theme changes from a prompt. ## Editor layout @@ -42,11 +42,15 @@ The editor consists of three main areas: left panel, canvas (center), and Inspec ### Left panel -You have the following panels available to you: +The top of the left panel is the **Project** section, which brings your project's navigation into one place: -**Pages** — Switch between pages and flows in your project. Navigate to different designs or subcomponents when editing components. +- **All pages** — Jump to any page in your project. +- **Design system** — Browse your Theme, Components, Snippets, Icons, and Documentation. +- **Flows** — Open a flow to work on its pages together. -**Layers** — View and organize the element hierarchy for the current page. Select, reorder, or group elements. Shows the complete component tree. +Below it, the **Layers** section shows the element hierarchy for the page you're editing. Select, reorder, or group elements in the tree. Drag the divider between the sections to resize them. + +{/* TODO: Update image — the left panel now leads with a combined Project section (All pages, Design system, Flows) above Layers */} ### Canvas (center)