Post on 25-Oct-2021
transcript
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
Getting Started with UX-App
2 | P a g e
https://www.ux-app.com
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
Description Shortcut
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 +
Getting Started with UX-App
3 | P a g e
https://www.ux-app.com
Working with groups
Description Shortcut
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
Description Shortcut
Toggle show/hide rulers Ctrl + R
Toggle show/hide guides Ctrl + H
Getting Started with UX-App
4 | P a g e
https://www.ux-app.com
Context Menu
Figure 1 Default Context Menu
Figure 2 Group Context Menu
Getting Started with UX-App
5 | P a g e
https://www.ux-app.com
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.
Getting Started with UX-App
6 | P a g e
https://www.ux-app.com
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
Getting Started with UX-App
7 | P a g e
https://www.ux-app.com
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
Getting Started with UX-App
8 | P a g e
https://www.ux-app.com
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.
Getting Started with UX-App
9 | P a g e
https://www.ux-app.com
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.
Getting Started with UX-App
10 | P a g e
https://www.ux-app.com
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.
Getting Started with UX-App
11 | P a g e
https://www.ux-app.com
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.
Getting Started with UX-App
12 | P a g e
https://www.ux-app.com
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
Getting Started with UX-App
13 | P a g e
https://www.ux-app.com
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.