{"id":14898,"date":"2016-07-01T08:32:38","date_gmt":"2016-07-01T15:32:38","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14898"},"modified":"2020-10-26T01:46:26","modified_gmt":"2020-10-26T08:46:26","slug":"working-with-elements","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/working-with-elements\/","title":{"rendered":"Working with Elements"},"content":{"rendered":"

The UXPin editor lets you build prototypes with elements,<\/em> from simple shapes to icons to pre-built components. Here\u2019s how to find and organize elements in your design.<\/p>\n

Everything is a layer<\/h2>\n

As in Illustrator or Sketch, every element is a unique “layer,” or object. That means you can place elements above or below other elements, like navigation buttons above a background. To see your layers, click the stack-like icon near the bottom left corner of the editor.<\/p>\n

\"Where<\/p>\n

The layers menu is detachable so you can move it to a convenient place above the canvas as you work, if you need the space. Look for the three-bar \u201cpop out\u201d\u00a0icon in the upper right corner of the layers menu itself.<\/p>\n

\"Detaching<\/p>\n

Adding elements to the canvas<\/h2>\n

Building both quick wireframes and advanced prototypes with basic parts is a snap. On the left side of the editor you’ll find a collection of design elements like buttons, text fields and icons. Drag one into the canvas to add it to your prototype.<\/p>\n

\"Adding<\/p>\n

Searching for elements<\/h2>\n

Although UXPin organizes its elements into libraries, sometimes you need to find one by name. To that end, the element search feature (cmd\/ctrl-F or that icon in the top bar) lets you type a name, then drag and drop your choice into place.<\/p>\n

\"The<\/p>\n

Groups<\/h2>\n

A \u201cgroup\u201d is a collection of elements that act as one. Re-positioning one element in a group moves them all, and hiding the group hides its elements. <\/p>\n

Groups can be cropped to hide certain elements they contain, making them partially or completely hidden. Turn on grouping in General Properties. To reveal a group\u2019s cropped elements, activate the group\u2019s horizontal or vertical scrolling options, also in General Properties. Cropping is useful when you want to simulate smaller viewports or iframes.<\/p>\n

\"Cropping<\/p>\n

Above, creating a group with a crop.<\/p>\n

Align elements with the layout grid<\/h2>\n

The horizontal layout grid (opt\/alt-G) helps you create orderly designs, especially with wider apps and sites.<\/p>\n

\"Setting<\/p>\n

Resources<\/h2>\n