screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile space design flow examples

Search the library

Rooms: Creating a Room

Open recorded flow

  1. Step 1 · 7:56

    Rooms: Header with title and icon, followed by a horizontal row of three template cards, a divider, and a grid of four larger remixable project cards.See the flow
    Rooms

    Header with title and icon, followed by a horizontal row of three template cards, a divider, and a grid of four larger remixable project cards.

  2. Step 2 · 8:21

    Rooms: Top notification banner, followed by a header with search and category tabs, and a large scrollable grid of 3D assets.See the flow
    Rooms

    Top notification banner, followed by a header with search and category tabs, and a large scrollable grid of 3D assets.

  3. Step 3 · 8:27

    Rooms: Top 3D editor viewport with transform handles, bottom half-screen drawer for asset selection.See the flow
    Rooms

    Top 3D editor viewport with transform handles, bottom half-screen drawer for asset selection.

  4. Step 4 · 9:29

    Rooms: Top navigation bar, 3D scene view in the background, centered modal overlay, and a bottom grid of selectable assets.See the flow
    Rooms

    Top navigation bar, 3D scene view in the background, centered modal overlay, and a bottom grid of selectable assets.

  5. Step 5 · 9:41

    Rooms: Top navigation bar, central 3D viewport, editing tool row, large color palette grid, and bottom mode switcher.See the flow
    Rooms

    Top navigation bar, central 3D viewport, editing tool row, large color palette grid, and bottom mode switcher.

  6. Step 6 · 10:03

    Rooms: Top navigation bar, central 3D object preview, instructional card, tool selection row, and a large color palette grid at the bottom.See the flow
    Rooms

    Top navigation bar, central 3D object preview, instructional card, tool selection row, and a large color palette grid at the bottom.

  7. Step 7 · 10:15

    Rooms: Top navigation bar, central modal menu overlaying a 3D workspace, and a bottom color palette picker.See the flow
    Rooms

    Top navigation bar, central modal menu overlaying a 3D workspace, and a bottom color palette picker.

  8. Step 8 · 10:30

    Rooms: Top navigation bar, central 3D viewport, bottom project metadata, and right-aligned action buttons.See the flow
    Rooms

    Top navigation bar, central 3D viewport, bottom project metadata, and right-aligned action buttons.

  9. Step 9 · 11:21

    Rooms: Top navigation bar, central 3D workspace with a loading modal, and a bottom drawer panel for creation tools.See the flow
    Rooms

    Top navigation bar, central 3D workspace with a loading modal, and a bottom drawer panel for creation tools.

Planner 5D: AI Home Design: Editing a 2D Floor Plan

Open recorded flow

  1. Step 1 · 5:18

    Planner 5D: AI Home Design: Top-left rendering modal, right-side vertical toolbar, central design canvas, bottom navigation bar.See the flow
    Planner 5D: AI Home Design

    Top-left rendering modal, right-side vertical toolbar, central design canvas, bottom navigation bar.

  2. Step 2 · 5:23

    Planner 5D: AI Home Design: Top header, central 3D workspace with a modal overlay, and a bottom action bar.See the flow
    Planner 5D: AI Home Design

    Top header, central 3D workspace with a modal overlay, and a bottom action bar.

  3. Step 3 · 5:53

    Planner 5D: AI Home Design: Top navigation bar followed by a grid of selectable 3D room shape cards.See the flow
    Planner 5D: AI Home Design

    Top navigation bar followed by a grid of selectable 3D room shape cards.

  4. Step 4 · 6:15

    Planner 5D: AI Home Design: Top area shows the 2D floor plan editor, bottom area shows a modal sheet with category tabs and a list of items.See the flow
    Planner 5D: AI Home Design

    Top area shows the 2D floor plan editor, bottom area shows a modal sheet with category tabs and a list of items.

  5. Step 5 · 6:41

    Planner 5D: AI Home Design: Top bar with close button, central canvas with grid and selected object, right sidebar with tools, and a large bottom sheet for object selection.See the flow
    Planner 5D: AI Home Design

    Top bar with close button, central canvas with grid and selected object, right sidebar with tools, and a large bottom sheet for object selection.

  6. Step 6 · 6:59

    Planner 5D: AI Home Design: Top-down 2D floor plan view occupying the upper two-thirds, with a bottom-anchored modal panel for property editing and a vertical toolbar on the right.See the flow
    Planner 5D: AI Home Design

    Top-down 2D floor plan view occupying the upper two-thirds, with a bottom-anchored modal panel for property editing and a vertical toolbar on the right.

  7. Step 7 · 7:36

    Planner 5D: AI Home Design: The screen is split between a top canvas area showing the floor plan and a bottom modal overlay for color selection.See the flow
    Planner 5D: AI Home Design

    The screen is split between a top canvas area showing the floor plan and a bottom modal overlay for color selection.

  8. Step 8 · 8:30

    Planner 5D: AI Home Design: Top bar with close button, central canvas with grid and furniture, right-side vertical toolbar, bottom drawer for object details.See the flow
    Planner 5D: AI Home Design

    Top bar with close button, central canvas with grid and furniture, right-side vertical toolbar, bottom drawer for object details.

  9. Step 9 · 8:47

    Planner 5D: AI Home Design: Top-down 3D view of a room with a vertical toolbar on the right and a bottom control panel.See the flow
    Planner 5D: AI Home Design

    Top-down 3D view of a room with a vertical toolbar on the right and a bottom control panel.

Planner 5D: AI Home Design: Adding and Customizing Items

Open recorded flow

  1. Step 1 · 9:48

    Planner 5D: AI Home Design: Top horizontal navigation bar followed by a vertical list of categorized items.See the flow
    Planner 5D: AI Home Design

    Top horizontal navigation bar followed by a vertical list of categorized items.

  2. Step 2 · 9:54

    Planner 5D: AI Home Design: A modal overlay with a top header bar followed by a scrollable grid of product thumbnails.See the flow
    Planner 5D: AI Home Design

    A modal overlay with a top header bar followed by a scrollable grid of product thumbnails.

  3. Step 3 · 10:15

    Planner 5D: AI Home Design: Grid workspace background with a vertical toolbar on the right and a bottom-anchored modal sheet for furniture selection.See the flow
    Planner 5D: AI Home Design

    Grid workspace background with a vertical toolbar on the right and a bottom-anchored modal sheet for furniture selection.

  4. Step 4 · 10:20

    Planner 5D: AI Home Design: Top grid area for floor plan editing, bottom modal sheet for furniture selection.See the flow
    Planner 5D: AI Home Design

    Top grid area for floor plan editing, bottom modal sheet for furniture selection.

  5. Step 5 · 10:25

    Planner 5D: AI Home Design: Top-down floor plan editor in the background with a bottom-half modal overlay for furniture selection.See the flow
    Planner 5D: AI Home Design

    Top-down floor plan editor in the background with a bottom-half modal overlay for furniture selection.

  6. Step 6 · 10:38

    Planner 5D: AI Home Design: Top 2D floor plan editor area with right-side toolbar, bottom modal sheet for furniture selection.See the flow
    Planner 5D: AI Home Design

    Top 2D floor plan editor area with right-side toolbar, bottom modal sheet for furniture selection.

  7. Step 7 · 10:47

    Planner 5D: AI Home Design: The screen is divided into a top 2D floor plan editor area and a bottom sheet overlay containing a list of lighting categories.See the flow
    Planner 5D: AI Home Design

    The screen is divided into a top 2D floor plan editor area and a bottom sheet overlay containing a list of lighting categories.

  8. Step 8 · 11:10

    Planner 5D: AI Home Design: Split screen with a 2D design canvas on top and a character selection modal sheet on the bottom.See the flow
    Planner 5D: AI Home Design

    Split screen with a 2D design canvas on top and a character selection modal sheet on the bottom.

  9. Step 9 · 11:24

    Planner 5D: AI Home Design: Top bar with close button and 3D toggle, central grid workspace with furniture, right-side vertical toolbar, bottom category drawer.See the flow
    Planner 5D: AI Home Design

    Top bar with close button and 3D toggle, central grid workspace with furniture, right-side vertical toolbar, bottom category drawer.

Found an example you like?See the whole story.

See the full library See plans