# Import from Figma, live product editing, and realtime agents This major update makes it easier to bring designs into Mode, work directly against your real product, create production-ready layouts, and see design agents work on the canvas. ## Bring Figma designs into Mode Copy frames or elements in Figma and paste them directly into Mode as editable canvas elements. Layouts, gradients, shadows, text styles, icons, and spacing are preserved instead of being flattened into an image. ## Design directly inside your codebase portal Select elements in the running product and edit their styles using the design panel. Pending changes remain available across preview sessions, keeping the visual design workflow connected to the real page. ## Build CSS Grid layouts visually Configure grid templates and auto-flow, switch between layout types, and reposition elements directly on the canvas. Grid overlays make complex layouts—including `repeat()` and `minmax()` structures—easier to understand and edit. ## Realtime design agents with visual feedback Watch designs take shape as skeleton blocks progressively load into the finished interface. The canvas shows the design coming together while agents work, rather than making you wait for one final result. ## Other updates ### While designing - **Speak your prompts:** Use voice input to turn spoken ideas directly into prompts. - **More familiar canvas controls:** Improved Shift, Alt, dragging, multi-element resizing, and selection-aware undo make editing feel more natural. - **Find captured work faster:** New captures highlight immediately, and snapshot elements can reveal their source inside the live product. ### Projects and code - **Publish to GitHub:** Turn uploaded projects into GitHub repositories without losing the work already created in Mode. - **Smarter project imports:** Better support for monorepos, route groups, dynamic routes, resumable imports, and clearer progress. - **Configure projects safely:** Add environment variables and masked secrets while Mode verifies that the project still starts correctly. - **Preserve rich text in code:** Keep bold, italics, links, line breaks, and nested formatting when designs become code. - **Open the correct project page:** The codebase portal opens on the page you were already working on. ### Previewing your work - **Faster, persistent previews:** Pages are prepared before opening and retain their state when previews are closed and reopened. - **Clearer loading and recovery:** Portals show useful loading and error states and retry automatically when a page fails to start. ## Fixes - **More reliable design agents:** Longer design tasks finish correctly, while genuinely stalled work stops cleanly. - **Cleaner conversations and history:** Duplicate agent replies and checkpoints have been removed. - **More stable portals and previews:** Portal sessions no longer overlap and reconnect more reliably after project restarts. - **More reliable GitHub connections:** Connections recover from login, Safari, reinstall, webhook, and network issues. - **Reliable import progress:** Imports no longer stall or create conflicting progress records. - **Design-panel and canvas polish:** Controls, resizing, text alignment, overlays, and pointer interactions behave more consistently.