Getting Started Guide

Transcription

1 UX-App Getting Started Guide

2 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 Account Settings Interacting with Components Editing Containers P a g e

3 Keyboard Shortcuts Basic Shortcuts Description Copy Cut Paste Duplicate Save Undo Redo Select all components Shortcut Ctrl + C Ctrl + X Ctrl + V Ctrl + D Ctrl + S Ctrl + U Ctrl + Y Ctrl + A Component Manipulation Description Edit currently selected component Finish editing component Shortcut Enter Esc Increase component text size ] Decrease component text size [ Increase component width Decrease component width Increase component height Decrease component height Bring component forwards Send component backwards Ctrl + Ctrl + Ctrl + Ctrl + Alt + Alt + 2 P a g e

4 Working with groups Description Group selected components Finish editing component Ungroup components Convert to custom component Add components to multi-selection Disable grid snapping while moving components Prevent component from being added to container Shortcut Ctrl + G Esc Ctrl + U Ctrl + H Shift Shift + Mouse Move Ctrl + Mouse Move Grid Control Description Toggle show/hide rulers Toggle show/hide guides Shortcut Ctrl + R Ctrl + H 3 P a g e

5 Context Menu Figure 1 Default Context Menu Figure 2 Group Context Menu 4 P a g e

6 User Interface Components Add new elements to your document from this 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. 5 P a g e

7 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 6 P a g e

8 Changing an Existing Project s Properties Modify Current Project Click the gear icon to modify the current project s propterties Use the Project Properties panel to Change project name Switch between Desktop and Mobile project types Clear project data 7 P a g e

9 Modifying a Component s Appearance Steps 1. Select a component 2. Switch to the Properties tab Component Properties Select this tab to see visual styles that can be applied to the current selection. 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. 8 P a g e

10 Project Pages Project Pages & Outline Select this tab to manage pages and hide/show components using the document outline. Add Page Change Page Name Double click a page name to change it s label. Page Order & Nesting Drag and drop pages to re-order and/or nest one page inside of another. Page Actions Hover over the page to show the Edit/Clone/Delete options. Tip: Use the arrow icon on nested pages to assist in reordering a page. 9 P a g e

11 Document Outline Lock Lock/Unlock components using the padlock icon. Visibility Hide/show components using the eye icon. 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. 10 P a g e

12 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. 11 P a g e

13 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. Editing Double-click any object to edit it. This applies to simple buttons and complex containers such as the tab container. 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. Drag & Drop 12 P a g e

14 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. Sub Object Certain containers will have additional options when editing, such as adding or removing panels. Editing Mode When you are in editing mode, the breadcrumbs will help you navigate nested objects. 13 P a g e