Design Interface

Updated

When you enter the Design page, it may take a few moments for your page to load. You can track the page generation progress in the left sidebar. In this article, we'll introduce our Design Mode and explains how to edit your project.

The Design Mode consists of two sections that can be switched between AI Assistant and Precision Editor.

AI Assistant supports making app-wide changes using natural language; while Precision Editor lets you manually refine individual elements on a page.

Get started with the basic editing features in our Design Interface：

1. Edit a Page

Select a Page

  • Once your page is ready, select a page from the Page list on left to review the layout, visuals,and styling.

Zoom in & Out and Quick Toolbar

  • For mobile app projects that may required zooming in to inspect details, you can use Sketchflow's quick toolbar to select the page zoom ratio and toggle between click and pan modes.

Shortcuts

  • Fit to Screen: Ctrl+0
  • Zoom in: +
  • Zoom out: -
  • Hand tool: H
  • Move: V

This allow you to better verify detailed modifications as well as the overall page state.

Delete a Page

  • Click the [trash icon] on the upper right corner of selected page to delete it.

  • Deleted pages appear in the lower-left corner.

  • Click 'cancel delete' to restore deleted pages.

  • Click 'Batch Delete Pages' and select the pages you want to permanently delete. Once this action is confirmed, you won't be able to restore the deleted pages from the lower-left corner.

Save Version

A new history version is created only when AI generates new content or modifies some elements.

You can save the current design version after using AI assisted editing, for future reversion.

  • Click 'Save version' on the upper side to name and save the current design version.

Revert to a Previous Version

  • Click the Clock icon beside Save version button to view history and revert to a previous version.

  • Click [the left-turn arrow] or use shortcuts Ctrl+Z to undo the latest changes on the selected page.

2. Edit an Element

Select an Element

  • On the selected page, click [Edit] on the toolbar to switch to Edit Mode from Preview, then click an element to select it.

  • Click the buttons in the upper right corner to move, duplicate, or delete the selected element.

3. Check the Layer

  • Check 'Layer' in the Page Style sidebar to view the layer hierarchy of the selected page or element.

  • Click [the right-facing arrow] to expand all nested layers.

4. Design Mode

Enjoy the flexibility of two powerful editing modes: AI Assistant for app-wide transformations through natural language, and Precision Editor in Page Style for fine-tuning individual elements with pixel-level control.

AI Assistant

  • Use AI Assistant to modify or regenerate the selected page using natural language prompts. The modifications will also be automatically reflected in the product’s user journey flows in Plan Mode.

Design Panel

  • In the design panel, you can select an element to customize the selected element's properties on the design panel, including the flex, dimension, typography, appearance, fill and stroke.

  • And for Interactions, you can configure each element according to its available properties—for example, enter a destination URL for a link button and set the width for an image.

To learn more about these features: AI Assistant and Precision Editor, see: AI Assistant and Precision Editor.