![\"Layout](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/image10-3-656x300.png\")
<\/p>\nA blank canvas can be an intimidating place to start. Luckily, many tools, menus, and widgets accompany UXPin\u2019s canvas, turning you into an efficient design powerhouse.<\/p>\n
The Editor is your tool to create wireframes, mockups, and prototypes. It includes tools, element libraries, and a working canvas upon which to construct great mockups.<\/p>\n
The editor is organized into distinct areas: Toolbars, elements, canvas and breakpoints, and layers.<\/p>\n
<\/p>\n
Look under the View Options menu to customize your interface to better suit your workflow and screen space.<\/p>\n
![\"Editor](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/View-options.png\")
<\/p>\n
From here you can:<\/p>\n
\u201cAdvanced\u201d mode lets you add code specifications per element (see below<\/a>) and work with multistate elements<\/a>; \u201csimple\u201d mode hides these features to de-clutter the interface.<\/p>\n UXPin\u2019s hundreds of design elements are organized into \u201clibraries.\u201d If you don\u2019t need every element in your work, you can control which elements are available to use and search for by clicking the \u201clibraries\u201d button on the right, then clicking \u201cmanage libraries\u201d at the bottom of the library-select list.<\/p>\n Type cmd-F (Mac) or ctrl-F (Windows) to call forth UXPin\u2019s search panel. Elements appear as soon as you type two or more letters. From there you can drag any element onto the canvas. Search remembers the last few elements you used, making them conveniently available for reuse.<\/p>\n To choose an element for your work, drag it from the search results into your canvas.<\/p>\n The search feature looks for elements in your active element libraries (see the next section).<\/p>\n The right-hand panel is context-sensitive, meaning it changes depending on which element you\u2019ve selected \u2014 if any. For example, choosing a box element<\/a> will let you control its color, border, corner radius, typography, custom CSS, and more.<\/p>\n Learn more about working with elements<\/a>.<\/p>\n Sometimes we want to reuse standard code snippets that make future updates easy. To keep everyone \u2014 including developers \u2014 from inventing non-standard code, you can assign code and comments to specific elements. To add \u201cspecifications,\u201d first make sure you\u2019re using the advanced editor view located in the bottom left corner of the editor. Then select an element and click the \u201ci\u201d tab on the right-hand panel. Choose code, then a language, and add your snippet to the field provided.<\/p>\n You can assign use-case notes to each element in a design with the Documentation feature. Click \u201cDocumentation\u201d at the top of the Editor to enter commenting mode. Entering notes on the right, which support Markdown-like editing, produces a \u201ctarget\u201d icon. Click that icon, then an element, to assign the note. Numbered orange markers indicate which notes belong to which elements; a blue marker indicates the one you\u2019ve selected.<\/p>\n Type shift-return to add a new line to the current note, or just a plain return to create a new note.<\/p>\n You have many options to share your prototype and get direct feedback from your team. Anyone with the \u201ccollaborate\u201d URL can test interactions and leave comments on your work, even if they don\u2019t have the live link.<\/p>\n Sharing options include the ability to share the prototype by email, SMS, Slack, and even QR code. Here you can also find the \u201cexport\u201d options, which include saving as HTML\/CSS\/JS files, PDFs or a set of PNGs.<\/p>\n Iterations are \u201csnapshots\u201d or saved states of your project to which you can revert if you want to undo a series of changes after closing your browser tab. Each iteration has a unique live preview URL and its own set of comments, letting you start anew as you respond to team feedback.<\/p>\n To create an iteration or view old ones, look for \u201cIterations\u201d in the \u201cmore actions\u201d menu (lower right corner of the Editor). Each iteration has several options: you can preview it to see its comments, for example, or \u201croll back\u201d to that version to continue your work.<\/p>\n Creating interactions the first step; testing them is the second. You can test your mockups and prototypes live<\/a> when you press the \u201cpreview\u201d button at the top center of the Editor\u2019s toolbar.<\/p>\n This presents your work in a new tab, simulating a real website or app.<\/p>\nManaging libraries<\/h2>\n
![\"Managing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Managing-libraries.gif\")
<\/p>\nSearching for elements<\/h2>\n
![\"Searching](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Searching-1.png\")
<\/p>\nEditing elements<\/h2>\n
![\"Box](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Box-properties.gif\")
<\/p>\nSpecifications<\/h2>\n
![\"Adding](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Adding-spec-code.gif\")
<\/p>\nDocumentation<\/h2>\n
![\"Adding](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Adding-documentation.gif\")
<\/p>\nShare with your team<\/h2>\n
![\"Sharing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Sharing-button.png\")
<\/p>\n![\"Sharing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Share-panel.png\")
<\/p>\nIterations<\/h2>\n
Viewing live<\/h2>\n
![\"Preview](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Preview-button.png\")
<\/p>\nRelated resources<\/h2>\n
\n
\n <\/a><\/li>\nAsk a question<\/h2>\n