Working with the Mobile App Designer

Lucy's Mobile App Designer provides a visual interface that allows users to create visually appealing and functional mobile apps without the coding knowledge. It offers drag-and-drop components for designing the layout, adding elements like buttons, text fields, and images, and configuring the app's behavior. By simplifying the design process, it allows developers and other users to create mobile apps more efficiently and effectively.

To access the mobile app designer, go to the Mobile App tab on the sidebar in Lucy and click on it.

Mobile App Designer

Elements in the Mobile App Designer

These are the essential elements you encounter when designing your mobile app using the Lucy web app.

1. Sections Tab

2. Fields Tab

3. Mobile Device Mockup

4. General Tab

5. Properties panel

6. Save Button

7. Undo and Redo

8. Zoom in and Zoom out

1. Sections Tab

The Sections tab in the Mobile App Designer lists horizontal sections that you can add to your mobile pages. Each section is customisable and can be easily arranged by dragging and dropping. These sections provide unique functionalities to enhance the user experience.

To add horizontal sections, set the Type to 'Section' when adding a tab to mobile app's bottom navigation bar.

Available Sections

These are the available sections: Custom UI Section, Icon Section Widget, Image Card List, Horizontal List of Cards, Currency Converter Widget, and Configurable Search Widget.

For detailed information on the sections, find the article here.

2. Fields Tab

The Fields tab in the Mobile App Designer lets you add individual elements to mobile app pages. These fields can collect user input or display information, and can be easily arranged by dragging and dropping.

To add Fields, set the Type to 'Section' when adding a tab to mobile app's bottom navigation bar.

These are some Fields available under the Fields tab: Rich Text, Heatmap, Horizontal Container, Tab Layout, Text Label, Text Input etc.

These fields also appear in the widget designer when designing widgets such as Forms, Item List etc.

3. Mobile Device Mockup

In the mobile designer, you will see a 3D rendered image of a mobile device showcasing how your mobile app looks in an actual device.

Mobile Device Mockup

4. General Tab

Use the General tab in the mobile app designer to customise the general settings of your mobile app's login page and home page.

Customising the Home Page

The following are some home page settings: customise the app bar header properties, add header icon buttons and customise bottom navigation bar.

Find the article related to customising your home page from here.

Designing the Homepage

Customising the Login Page

These are the Login page settings: add a custom logo and add a background image.

Find the article related to customising your login page from here.

Designing the Login Page

5. Properties Panel

In the mobile app designer, the Properties Panel is a dynamic sidebar that appears on the right when you click on a specific element (e.g., section, header icon button, bottom tab navigation bar ) within the mobile app mockup interface.

Properties panel

6. Save Button

Save button - Once you make a change to your mobile app using the mobile app designer, you can save it. Then it will be reflected in your actual mobile app.

7. Undo and Redo

Undo button - Used to reverse the change previously done to your mobile app in the mobile app designer. Reverses the most recent action you performed.

Redo button - Used to restore a change done to your mobile app in the mobile app designer that was accidentally undone.

8. Zoom in and Zoom out

Zoom in button- Increase the size of the mobile mockup in the mobile app designer.

Zoom out button- Decreases the size of the mobile mockup in the mobile app designer.