ux-app getting started guide

UX-App Getting Started Guide https://www.ux-app.com

https://www.ux-app.com/

Getting Started with UX-App

1 | P a g e

https://www.ux-app.com

Contents Keyboard Shortcuts ............................................................................................................................... 2

Basic Shortcuts .................................................................................................................................... 2

Component Manipulation ................................................................................................................... 2

Working with groups ........................................................................................................................... 3

Grid Control ......................................................................................................................................... 3

Context Menu ......................................................................................................................................... 4

User Interface ........................................................................................................................................ 5

Managing Your Projects ........................................................................................................................ 6

Adding a New Project ........................................................................................................................ 6

Changing an Existing Project’s Properties ...................................................................................... 7

Modifying a Component’s Appearance ................................................................................................ 8

Project Pages .......................................................................................................................................... 9

Document Outline ............................................................................................................................... 10

Account Settings .................................................................................................................................. 11

Interacting with Components ............................................................................................................. 12

Editing Containers ........................................................................................................................... 13



2 | P a g e


Keyboard Shortcuts Basic Shortcuts

Description Shortcut

Copy Ctrl + C

Cut Ctrl + X

Paste Ctrl + V

Duplicate Ctrl + D

Save Ctrl + S

Undo Ctrl + U

Redo Ctrl + Y

Select all components Ctrl + A

Component Manipulation


Edit currently selected component Enter

Finish editing component Esc

Increase component text size ]

Decrease component text size [

Increase component width Ctrl +

Decrease component width Ctrl +

Increase component height Ctrl +

Decrease component height Ctrl +

Bring component forwards Alt +

Send component backwards Alt +



3 | P a g e


Working with groups


Group selected components Ctrl + G

Finish editing component Esc

Ungroup components Ctrl + U

Convert to custom component Ctrl + H

Add components to multi-selection Shift

Disable grid snapping while moving components Shift + Mouse Move

Prevent component from being added to container Ctrl + Mouse Move

Grid Control


Toggle show/hide rulers Ctrl + R

Toggle show/hide guides Ctrl + H



4 | P a g e


Context Menu

Figure 1 Default Context Menu

Figure 2 Group Context Menu



5 | P a g e


User Interface

Components

Add new elements to

your document from this

tab.

Tip:

Type the name of a

component to quickly find

it in the list.

Properties

Change the text, border,

color and other

properties of the selected

component.

Pages & Layers

Add and remove pages.

Show and hide

components on the

current page.

Comments

Add notes to the page,

project or attached to a

specific component.



6 | P a g e


Managing Your Projects Adding a New Project

Create New project

Click the + symbol to add

a new project to your

account.

New Project

Enter a project name and

click Ok



7 | P a g e


Changing an Existing Project’s Properties

Use the Project Properties panel to

Change project name

Switch between Desktop and Mobile project types

Clear project data

Modify Current Project

Click the gear icon to

modify the current

project’s propterties



8 | P a g e


Modifying a Component’s Appearance

Steps

1. Select a component

2. Switch to the Properties tab

Pre-sets

Choose a pre-set color to

quickly modify appearance.

Additional Options

Don’t forget to scroll to see

additional styling options

for a component.

Component Properties

Select this tab to see visual

styles that can be applied to

the current selection.



9 | P a g e


Project Pages

Project Pages & Outline

Select this tab to manage

pages and hide/show

components using the

document outline.

Page Order & Nesting

Drag and drop pages to

re-order and/or nest one

page inside of another.

Add Page

Page Actions

Hover over the page to show

the Edit/Clone/Delete

options.

Tip:

Use the arrow icon on

nested pages to assist in re-

ordering a page.

Change Page Name

Double click a page name to

change it’s label.



10 | P a g e


Document Outline

Project Pages & Outline

Select this tab then choose

the Document Outline

sub-tab to view the outline.

Document Outline

The document outline helps

you have a clear picture of

how components are

organized. In the screen

shot, the button is in the

first tab.

Visibility

Hide/show components

using the eye icon.

Lock

Lock/Unlock components

using the padlock icon.



11 | P a g e


Account Settings

Account Settings

Add/Remove Developers

Add and remove linked

developers from your

account.

Account Details

Modify your subscription

details, upgrade/downgrade

at any time.



12 | P a g e


Interacting with Components Unlike other applications, which make you to work with basic stencils, in UX-App each UI widget

is real, functioning HTML component.

Simply drag-and-drop to nest one component inside of another. Here is an example of adding a

button to a tab container. The green overlay indicated that component nesting will occur.

Tip: If you like to move an object without nesting, simply hold the Ctrl key while dragging.

Editing

Double-click any object to

edit it. This applies to simple

buttons and complex

containers such as the tab

container.

Drag & Drop



13 | P a g e


Editing Containers To edit a container simple double click on it. From here you can add more sub-panels, rearrange

elements and add or delete sub components.

Tip: Pressing the Enter key will go into editing mode for the selected component. Pressing the Esc

key will apply your changes.

Editing Mode

When you are in editing

mode, the breadcrumbs

will help you navigate

nested objects.

Sub Object

Certain containers will have

additional options when

editing, such as adding or

removing panels.


ux-app getting started guide

Documents