{"id":50544,"date":"2024-10-08T02:57:22","date_gmt":"2024-10-08T09:57:22","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=50544"},"modified":"2024-10-08T02:57:27","modified_gmt":"2024-10-08T09:57:27","slug":"uxpin-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/","title":{"rendered":"UXPin Tutorial for Beginners in 10 Steps"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners-1024x512.png\" alt=\"UXPin tutorial for beginners\" class=\"wp-image-50545\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>UXPin is a versatile design and prototyping tool built to bridge the gap between design and development. With features that support high-fidelity prototyping, interactive components, and seamless developer handoffs, UXPin helps designers create prototypes that closely mimic the final product.<\/p>\n\n\n\n<p>In this tutorial, we will cover the essential steps to get started with UXPin, including basic navigation, creating interactive prototypes, and leveraging advanced features like Auto Layout and Merge. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for free to follow along<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">About UXPin<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Logo.png\" alt=\"Logo\" class=\"wp-image-54852\" style=\"width:250px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Logo.png 200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Logo-120x120.png 120w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure>\n\n\n\n<p>To give you a little background, UXPin has been in the design space for over 10 years. It was co-founded by designers, so a lot of time and effort has gone into making a tool that truly bridges the gap between design and development.<\/p>\n\n\n\n<p>The key differentiator between <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-prototyping-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin and other prototyping tools<\/a> like <strong>Figma, Sketch, InVision, and Adobe XD is that those tools come from a print paradigm<\/strong>. You\u2019re still working with vector or raster-based graphics and building static or flat designs using artboards. While they\u2019re great for visual design, they often <strong>require creating multiple screens for different states and interactions<\/strong>.<\/p>\n\n\n\n<p>This often leads to a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-vs-design-to-code-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">disconnect between designers and developers<\/a>, resulting in miscommunication, more <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/feedback-loops-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">feedback loops<\/a>, and time spent aligning on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">what\u2019s intended in design versus what\u2019s built<\/a>.<\/p>\n\n\n\n<p>In contrast, <strong>UXPin is a code-based tool<\/strong>, meaning you can create dynamic interactions that allow <strong>prototypes to feel like real products<\/strong>. This enables better feedback and collaboration, whether it\u2019s from <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">user testing<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UXPin Overview: Where Prototyping Gets Real\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/Shq01b1BVHk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-downloading-uxpin-for-desktop\">Step 1: Set up a UXPin account<\/h2>\n\n\n\n<p>UXPin can be <strong>used either through the web or desktop application<\/strong>. While the web version provides the same experience as the desktop version, downloading the desktop app allows offline work and helps mitigate any connectivity issues.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set up a trial account or <a href=\"https:\/\/www.uxpin.com\/pricing\" target=\"_blank\" rel=\"noreferrer noopener\">choose your paid plan<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/getting-started\/downloading-and-using-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Download the desktop application<\/a> for Mac or Windows.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-navigating-uxpin-s-dashboard\">Step 2: Navigating UXPin&#8217;s Dashboard<\/h2>\n\n\n\n<p>When you first open UXPin, you\u2019ll see a dashboard with three tabs:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"114\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-get-started-guide.png\" alt=\"uxpin get started guide\" class=\"wp-image-54855\" style=\"width:450px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-get-started-guide.png 718w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-get-started-guide-700x111.png 700w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/dashboard\/projects\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Projects<\/strong><\/a><strong>:<\/strong> View and manage all UXPin projects.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Design Systems<\/strong><\/a><strong>:<\/strong> Access your design systems or those shared with you.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" target=\"_blank\" rel=\"noreferrer noopener\">Import your library<\/a>:<\/strong> Allows you to import code-backed components (See: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>).<\/li>\n<\/ul>\n\n\n\n<p>Focus primarily on the <strong>Projects<\/strong> and <strong>Design Systems<\/strong> tabs as you begin working on your projects.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-getting-started-in-uxpin\">Step 3: Getting Started in UXPin<\/h2>\n\n\n\n<p>To start a project:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"318\" height=\"102\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-get-started-tutorial-new-project-button.png\" alt=\"uxpin get started tutorial new project button\" class=\"wp-image-54858\" style=\"width:250px\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the Project\u2019s dashboard, click the <strong>+ New Project<\/strong> button in the top left corner.<\/li>\n\n\n\n<li>Name your project and click <strong>Create New Project<\/strong>.<\/li>\n\n\n\n<li>Choose what you want to start with:\n<ul class=\"wp-block-list\">\n<li><strong>New Prototype<\/strong>: Open the UXPin design editor to create a new project from scratch.<\/li>\n\n\n\n<li><strong>Import Sketch, images, or documents<\/strong>: Upload files such as Sketch, PNG, JPG, PDF, or UXPin\u2019s UXP files.<\/li>\n\n\n\n<li><strong>Design with Merge Components<\/strong>: Use a predefined Merge library to start your project.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29-1024x475.png\" alt=\"Zrzut ekranu 2024 10 8 o 11.27.29\" class=\"wp-image-54861\" style=\"width:550px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29-1024x475.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29-646x300.png 646w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29-768x357.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29-1536x713.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/Zrzut-ekranu-2024-10-8-o-11.27.29.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Select the middle option \u2013 <strong>New Prototype<\/strong> to access the design editor and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">build your first prototype<\/a>. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-exploring-uxpin-s-design-editor\">Step 4: Exploring UXPin&#8217;s Design Editor<\/h2>\n\n\n\n<p>The design editor is divided into three main sections:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#pages\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Pages &amp; Layers<\/strong>:<\/a> Displayed on the left sidebar, this shows all layers and pages in your project. You can switch between layers, group elements, and view or add new pages.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/canvas\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Canvas<\/a><\/strong>: The central area where you build your designs. This displays the width and height of your canvas, as set in the properties panel.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a><\/strong>: Located on the right, it allows you to adjust properties for selected elements and manage global canvas settings.<\/li>\n<\/ol>\n\n\n\n<p>Our documentation provides a deeper dive into the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">design editor<\/a> and its features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pages-layers\">1. Pages &amp; Layers<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"503\" height=\"1024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers-503x1024.png\" alt=\"uxpin tutorial pages and layers\" class=\"wp-image-54864\" style=\"width:200px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers-503x1024.png 503w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers-147x300.png 147w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers-768x1565.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers-754x1536.png 754w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-pages-and-layers.png 796w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/figure>\n\n\n\n<p>Once you add elements to the canvas, they&#8217;ll appear in the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#layers\" target=\"_blank\" rel=\"noreferrer noopener\">Layers<\/a> sidebar, allowing you to select, group, and rearrange them here. You can view <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#pages\" target=\"_blank\" rel=\"noreferrer noopener\">Pages<\/a> at the top of this sidebar or click the <strong>+<\/strong> icon to add more.<\/p>\n\n\n\n<p>The Pages workflow is different from other design tools. In Sketch and Figma, you have all your screens for user flows on a single canvas; in UXPin, you have a separate Page per screen. You can click the <a href=\"https:\/\/www.uxpin.com\/docs\/tips-and-tricks\/tricks-and-tips\/#view-all-pages-at-once\" target=\"_blank\" rel=\"noreferrer noopener\">Overview icon (OPTION+O)<\/a> to view all your screens in one interface.<\/p>\n\n\n\n<p>Design System Libraries displays the components and assets for each design system. You can drag these onto the canvas to start prototyping or switch between libraries at the bottom of the sidebar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-canvas\">3. Design canvas<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"1024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-canvas-712x1024.png\" alt=\"uxpin tutorial canvas\" class=\"wp-image-54867\" style=\"width:200px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-canvas-712x1024.png 712w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-canvas-209x300.png 209w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-canvas-768x1105.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-canvas.png 794w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><\/figure>\n\n\n\n<p>The design canvas displays your screen&#8217;s width and height set in the properties panel. This is where you build your prototypes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-properties-panel\">4. Properties Panel<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"1024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-properties-panel-374x1024.png\" alt=\"uxpin tutorial properties panel\" class=\"wp-image-54870\" style=\"width:250px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-properties-panel-374x1024.png 374w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-properties-panel-110x300.png 110w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-properties-panel.png 566w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<p>The Properties Panel is where you control properties and interactions for components on the canvas. You can also set the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-grids-how-to-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">grids<\/a>, change the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/color-schemes-for-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">background color<\/a>, and other global canvas settings.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-s-interactive-prototyping-features\">Step 5: Building Your First Prototype<\/h2>\n\n\n\n<p>To get started with a basic prototype:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"348\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-new-prototype.png\" alt=\"uxpin tutorial new prototype\" class=\"wp-image-54873\" style=\"width:250px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-new-prototype.png 496w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/uxpin-tutorial-new-prototype-428x300.png 428w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the toolbar to add elements to the canvas, such as text boxes, buttons, images, or shapes.<\/li>\n\n\n\n<li>Arrange and group these elements using the <strong>Layers<\/strong> panel.<\/li>\n\n\n\n<li>Set up interactions and states using the <strong>Properties Panel<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>For an in-depth tutorial, follow: <em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-dashboard\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Build a Dashboard in 15 Minutes<\/a><\/em>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Adding Interactivity<\/h2>\n\n\n\n<p>Interactive prototyping is what sets UXPin apart from other design tools. Here\u2019s how to get started:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creating States:<\/strong> Define different visual states for a component, such as a button that changes color when hovered over or clicked.<\/li>\n\n\n\n<li><strong>Adding Interactions:<\/strong> Set up actions based on triggers like clicks or hover events. Choose from various options, including navigation to another page, changing component properties, or triggering an animation.<\/li>\n\n\n\n<li><strong>Using Variables:<\/strong> Store and manipulate data within your prototype. For example, capture a user\u2019s input and display it on another page.<\/li>\n\n\n\n<li><strong>Conditional Logic:<\/strong> Create complex interactions with if-then or if-else conditions, enabling different outcomes based on user actions.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-states\">1. States<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s States<\/a> allow you to <strong>create component states comparable to code<\/strong>. For example, you can <strong>program a button to have a default, active, disabled, and hover state<\/strong>, each one triggered by a separate user or system action.<\/p>\n\n\n\n<p>You can also use States to create complex UI components, like <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/carousel\" target=\"_blank\" rel=\"noreferrer noopener\">Carousels<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/accordion-menu\" target=\"_blank\" rel=\"noreferrer noopener\">Accordion Menus<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/multilevel-dropdown\">Multilevel Dropdown Navigation<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interactions\">2. Interactions<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Interactions<\/a> allow you to <strong>define what happens when users engage with your prototype<\/strong>. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#triggers\" target=\"_blank\" rel=\"noreferrer noopener\">Triggers<\/a>, including desktop and mobile, enable you to create realistic, intuitive prototypes.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#actions\" target=\"_blank\" rel=\"noreferrer noopener\">Actions<\/a> determine what happens after the trigger<\/strong>. UXPin provides 20+ actions, including <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/google-calendar-events\/#connect-your-ifttt-account\" target=\"_blank\" rel=\"noreferrer noopener\">API requests<\/a>, changing states, navigation, component property adjustments, playing video\/audio content, and more.&nbsp;<\/p>\n\n\n\n<p>UXPin also has <strong><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a> <\/strong>which allow you to <strong>set if-then and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#if-else-conditions\" target=\"_blank\" rel=\"noreferrer noopener\">if-else conditions<\/a><\/strong>, similar to Javascript. These conditions set the rules to trigger different scenarios based on user and system actions.&nbsp;<\/p>\n\n\n\n<p>For example, you can <strong>set up multiple form conditions to trigger error messages<\/strong> for incomplete required fields or incorrect data, like an invalid email address. If all this data is correct, only then will the prototype allow the user to submit the form successfully.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-variables\">4. Variables<\/h3>\n\n\n\n<p>Unlike image-based tools, UXPin&#8217;s forms are fully functional out of the box. You can <strong>use <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a> to capture data from these forms and use them elsewhere in the prototype<\/strong>. For example, capturing a user&#8217;s information during a checkout process and displaying it on a confirmation screen for them to verify.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-expressions\">5. Expressions<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Expressions<\/a> are the closest you&#8217;ll get to Javascript without writing any code. With Expressions, you can add another layer of complexity, including <strong>validating forms<\/strong>, <strong>checking password criteria<\/strong>, or <strong>building computational components for shopping carts<\/strong>.&nbsp;<\/p>\n\n\n\n<p>When combined, these four advanced prototyping features allow you to create <strong>realistic, dynamic prototyping experiences<\/strong> indistinguishable from the final product.<\/p>\n\n\n\n<p>Check out <a href=\"https:\/\/www.uxpin.com\/examples\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s example apps and patterns<\/a> to see what&#8217;s possible using States, Interactions, Variables, and Expressions. You can download these and import them to a UXPin project to look under the hood and see how these features work.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Advanced Features \u2013 Auto Layout &amp; Merge<\/h2>\n\n\n\n<p><strong>Auto Layout<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auto Layout helps organize elements dynamically. Select your components and use the Auto Layout feature to maintain consistent spacing, alignment, and sizing.<\/li>\n<\/ul>\n\n\n\n<p><strong>How to use Auto Layout:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select a group of elements.<\/li>\n\n\n\n<li>Click <strong>Auto Layout<\/strong> in the Properties Panel.<\/li>\n\n\n\n<li>Adjust spacing, alignment, and padding as needed.<\/li>\n<\/ol>\n\n\n\n<p><strong>Merge Technology<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Merge brings real, coded components into UXPin\u2019s design environment. This helps reduce drift between design and development and allows designers to build with the same components used in production.<\/li>\n<\/ul>\n\n\n\n<p><strong>How to use Merge<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Import components<\/strong> from your Git repo or bring ones from Storybook.<\/li>\n\n\n\n<li><strong>Drag and drop these components onto the canvas<\/strong>.<\/li>\n\n\n\n<li><strong>Modify properties <\/strong>using the same interface developers use in code.<\/li>\n<\/ol>\n\n\n\n<p>If you&#8217;re using <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s free trial<\/a>, you can access three <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/#built-in-design-libraries\" target=\"_blank\" rel=\"noreferrer noopener\">built-in Merge components<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ant-design-introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant Design<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fluent UI<\/a><\/li>\n<\/ul>\n\n\n\n<p>While these look like regular design elements from a UI kit, they&#8217;re actually <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">React components<\/a> pulled from a repository. We&#8217;ll use two seemingly identical buttons to illustrate the difference between Merge and a UI kit.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/AZbRPM7Tie1nBs52pVI4GeGWZvfYtrOoSSdJRxHzZfenROeyV3uzyescxJ1PMZS12ngRcybOL74AuLi9ktwNQS1TEVbtjqO6q4T58WQ0SgAmCs6tmJfRkG0MD-KdDySVrWBT0WeglqQS3Qh4Qi6s_a0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Both are Material Design buttons. The purple one is from Google&#8217;s Material Design UI kit, and the bottom one is from the MUI Design System\u2013which uses Material Design as a foundation.<\/p>\n\n\n\n<p>When we click the purple Material Design button, it displays UXPin&#8217;s standard Properties Panel, where you can create the component&#8217;s styling and interactions.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Vmr90nCwRvTjVjrlytqcAwlfWkBegyXxiWxngYwWSuN00QbeMu_xG0rHlWBRVNun5ccAk0x-4YgbAzxuYsMLzR-nSuXWvPeS7BsyV4UjiYvmc56Ssnj3EfSZ8qIblOFEn8d45jMouYN4D7lkUH8TiIU\" alt=\"\"\/><\/figure>\n\n\n\n<p>When we click the blue MUI button, the Properties Panel changes to the Merge variation. Instead of creating properties, you select them based on the React component&#8217;s available <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/authoring-and-managing-jsx-presets\/\" target=\"_blank\" rel=\"noreferrer noopener\">props<\/a>\u2013<em>or <\/em><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/#how-to-change-component-properties\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Args<\/em><\/a><em> if you&#8217;re working with the <\/em><a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Storybook Integration<\/em><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/vmMt8sslEAQVMZJkro6KeGZ5GBbxiVJNBfg-bpCuqY6uUmGIMwXsmwmudXXXklV8BVYC0qdgwl24kcN2VI90pVbEKnfzthpbs1dGZJYjwv5iYCTB8UDXr_IVTHdZseWzD2St0onng6m_yP9ByYL_RQQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>For example, opening the color dropdown displays the MUI button&#8217;s color properties which match <a href=\"https:\/\/mui.com\/material-ui\/api\/button\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI&#8217;s documentation<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/DQp2v0BdqhdpxURi-kETAHpiVt2ZUIDhnTEmuw6Fq3-Ne912BCPaIbNAbC9mib4-qbprQq9gZgb11OQCR6pZjcbUjc43n010rScAhxN0qGX7v13jMA0AEbb4EtR-AIrSSZ5gv10QWTHm_olhSMnx0YQ\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/9ImwHh7GvxgrSsRu4-2sFC0GkSRhfCIhcoBY4uoziPmy8TXDQBgSrBjtILPl1t-d_g5tnki0xejVBXW7sPgOBrGTk5PLntkat6-7585yBpkUYj5D1ikoXXjpe6WsFNv-nGlbwRBUlVP_DECGpZX3PXM\" alt=\"\"\/><\/figure>\n\n\n\n<p>These properties give product teams the necessary constraints to build prototypes with minimal drift or inconsistencies.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Using Figma Integration<\/h2>\n\n\n\n<p>If you\u2019re already working in Figma, you can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">import your designs directly into UXPin<\/a>.<\/p>\n\n\n\n<p><strong>How to import Figma designs:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In Figma, right-click on a frame and go to <strong>Plugins > Development > Export to UXPin<\/strong>.<\/li>\n\n\n\n<li>Copy and paste the Figma frame into UXPin.<\/li>\n\n\n\n<li>All your Figma layers and assets will be imported, allowing you to add UXPin\u2019s interactivity and advanced features.<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong> While UXPin will import layers and assets from Figma, it won\u2019t transfer Figma\u2019s native interactions. You\u2019ll need to recreate these using UXPin\u2019s interaction tools.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-who-is-merge-for\">Step 9: Collaborating &amp; Sharing Prototypes<\/h2>\n\n\n\n<p>Collaboration is seamless in UXPin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-1024x560.png\" alt=\"redlining\" class=\"wp-image-54876\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-1024x560.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-548x300.png 548w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-768x420.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-1536x841.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/redlining-2048x1121.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preview Links<\/strong>: Share a preview link with stakeholders. They don\u2019t need a UXPin account to view the prototype.<\/li>\n\n\n\n<li><strong>Comments<\/strong>: Collect feedback using public or team comments. Public comments are visible to anyone with the link, while team comments are internal.<\/li>\n\n\n\n<li><strong>Get Code Mode<\/strong>: Use Spec Mode for developer handoff, giving developers access to component details like spacing, color, and CSS properties.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10: Finalizing Your Prototype and Handoff<\/h2>\n\n\n\n<p>Once you\u2019ve completed your prototype, you can prepare it for handoff:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Use Get Code Mode<\/strong>: Developers can see the properties and specifications of each component.<\/li>\n\n\n\n<li><strong>Merge &amp; Handoff<\/strong>: If you\u2019re using Merge, developers can copy JSX code directly from the prototype.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-get-started-with-uxpin\">Get Started with UXPin<\/h2>\n\n\n\n<p>We hope you&#8217;ve enjoyed this UXPin beginner tutorial. If you haven&#8217;t got an account, sign up for a free trial. Build prototypes that can be easily translated to code. Enjoy a better design workflow. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Get started here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>UXPin is a versatile design and prototyping tool built to bridge the gap between design and development. With features that support high-fidelity prototyping, interactive components, and seamless developer handoffs, UXPin helps designers create prototypes that closely mimic the final product. In this tutorial, we will cover the essential steps to get started with UXPin, including<\/p>\n","protected":false},"author":3,"featured_media":50545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"class_list":["post-50544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-tutorials"],"yoast_title":"","yoast_metadesc":"Here's a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UXPin Tutorial for Beginners in 10 Steps | UXPin<\/title>\n<meta name=\"description\" content=\"Here&#039;s a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UXPin Tutorial for Beginners in 10 Steps\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-08T09:57:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-08T09:57:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"UXPin Tutorial for Beginners in 10 Steps\",\"datePublished\":\"2024-10-08T09:57:22+00:00\",\"dateModified\":\"2024-10-08T09:57:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/\"},\"wordCount\":1845,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/UXPin-tutorial-for-beginners.png\",\"articleSection\":[\"Blog\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/\",\"name\":\"UXPin Tutorial for Beginners in 10 Steps | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/UXPin-tutorial-for-beginners.png\",\"datePublished\":\"2024-10-08T09:57:22+00:00\",\"dateModified\":\"2024-10-08T09:57:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Here's a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/UXPin-tutorial-for-beginners.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/UXPin-tutorial-for-beginners.png\",\"width\":1200,\"height\":600,\"caption\":\"UXPin tutorial for beginners\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UXPin Tutorial for Beginners in 10 Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UXPin Tutorial for Beginners in 10 Steps | UXPin","description":"Here's a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"UXPin Tutorial for Beginners in 10 Steps","og_description":"Here's a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2024-10-08T09:57:22+00:00","article_modified_time":"2024-10-08T09:57:27+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"UXPin Tutorial for Beginners in 10 Steps","datePublished":"2024-10-08T09:57:22+00:00","dateModified":"2024-10-08T09:57:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/"},"wordCount":1845,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png","articleSection":["Blog","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/","name":"UXPin Tutorial for Beginners in 10 Steps | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png","datePublished":"2024-10-08T09:57:22+00:00","dateModified":"2024-10-08T09:57:27+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Here's a quick overview of what you can achieve with UXPin, one of the best design tool out there. Learn about its features.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/10\/UXPin-tutorial-for-beginners.png","width":1200,"height":600,"caption":"UXPin tutorial for beginners"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"UXPin Tutorial for Beginners in 10 Steps"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=50544"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50544\/revisions"}],"predecessor-version":[{"id":54881,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/50544\/revisions\/54881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/50545"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=50544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=50544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=50544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}