Design Interface

Updated

When you enter the Design interface, it might take a moment for the page to be generated. You can view the page generation status in the left sidebar. In this article, we’ll introduce our design interface step by step to help you edit your project.

Our design interface in the left sidebar consists of three parts: Page, Layer and History, in the right sidebar consists of two parts: AI Assistant and Design.

Getting started with these basic editing in our design interface：

1. Edit a Page

Select a Page

  • Once the page is generated, click a page from the 'page' list on left to check the layout, visuals and style.

    Selecting-a-page

Delete a Page

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

    Delete-a-page

  • Find the deleted pages in the lower left corner. Click 'cancel delete' to recall deleted pages.

    Cancel-delete

Revert to a Previous Version

History is updated only when new content is generated using AI.

  • Click 'History' in the left sidebar to view history and revert to a previous version.

    View-page-history

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

    Undo

2. Edit an Element

Select an Element

  • On a selected page, click an element to select it.

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

    Selecting-an-element

3. Check the Layer

  • Click 'Layer' in the left sidebar to check the layer of selected page or element.

    Clicking-layers

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

    Expand-layers

  • Drag the 'move handle' to rearrange layers or nest a child layer under a parent, which help you make adjustments quickly.

    Drag-move-handle

4. Design Mode

  • Our design interface supports dual design modes for flexible workflows: AI generate (AI Assistant) and precision editor (Design Panel).

AI Assistant

  • With AI Assistant, you can make any changes and regeneration to the selected page by inputting simple prompts. Welcome to pick and use our shortcut prompts!

    AI-assistant-page

Design Panel

  • With design panel, you can select an element to edit the style on the design panel, including the flex, dimension, typography, appearance, fill and stroke. And for Interactions, you can edit each element’s properties based on its input requirements—for example, enter a target URL for a link button and set the width for an image.

    Design-panel-page

To gain a comprehensive understanding of our AI Assistant and Design Panel, explore the sections below: AI Assistant and Precision Editor.