UXPin Tutorial for Beginners
UXPin is your all-in-one prototyping tool that helps designers collaborate seamlessly with devs, build production-ready prototypes, and streamline design systems’ scale and maintenance. Let’s see how you can use the tool to build a prototype. Let’s get you started.
Key takeaways:
- UXPin offers advanced interactive prototyping features like States, Interactions, Variables, and Expressions, allowing designers to create prototypes that are almost indistinguishable from the final product.
- UXPin’s design technology, Merge, merges design and development by bringing code components into the design process, increasing prototyping quality and scope.
- UXPin allows you to test advanced prototyping features and Merge technology while still on trial.
Follow this tutorial step by step. Get a trial of UXPin and tests its every feature, from prototyping to design handoff. Sign up for free.
Downloading UXPin for Desktop
Firstly, we recommend downloading UXPin’s desktop app. UXPin works in the browser, or you can download the desktop application for Mac or Windows.
While the experience is indistinguishable between the web and desktop environments, the desktop application allows you to work offline. It also mitigates any internet issues–your browser requires a stable internet connection, whereas the desktop app does not.
Navigating UXPin’s Dashboard
When you first open UXPin, you’ll see an empty dashboard with four tabs at the top of the screen:
Projects: This screen displays all your UXPin projects and files.
Design Systems: Displays any design systems you have created or people have shared with you.
Merge Component Manager: Shows your open-source npm imports.
Manage your team: View and manage team members you share projects with.
For this tutorial, we’ll focus on Projects and touch on Design Systems.
Learn about Merge Component Manager and the npm integration here.
Getting Started in UXPin
From your Project’s dashboard, click the + New project in the top left to create a project. Name your project and click Create New Project.
What do you want to start with today?
The next screen will ask you, “What do you want to start with today?” with three options:
- New prototype: opens UXPin’s design editor to start working from scratch.
- Import Sketch, images, or documents: opens a window on your computer to upload Sketch files, JPGs, PDFs, PNGs, or UXPin’s file format, UXP.
- Design with Merge components: opens UXPin’s design canvas with the selected Merge library, or you can +Add a new library–learn more about this later in the article when we cover UXPin’s Merge technology :)
Click New prototype to open the design editor.
Exploring UXPin’s Design Editor
We’ll give a quick overview of the design editor for this tutorial. Our documentation provides a deeper dive into the design editor and its features.
There are three primary workspaces in UXPin’s design editor:
- Pages & Layers and Design System Libraries on the left
- Design canvas center
- Properties Panel on the right
Pages & Layers
Once you add elements to the canvas, they’ll appear in the Layers sidebar, allowing you to select, group, and rearrange them here. You can view Pages at the top of this sidebar or click the + icon to add more.
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 Overview icon (OPTION+O) to view all your screens in one interface.
Design System Libraries
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.
Design canvas
The design canvas displays your screen’s width and height set in the properties panel. This is where you build your prototypes.
Properties Panel
The Properties Panel is where you control properties and interactions for components on the canvas. You can also set the grids, change the background color, and other global canvas settings.
UXPin’s Interactive Prototyping Features
Interactive prototyping sets UXPin apart from its competitors, allowing you to accurately replicate a final product experience. UXPin has four unique features for prototyping that you won’t find in other design tools:
- States
- Interactions
- Variables
- Expressions
States
UXPin’s States allow you to create component states comparable to code. For example, you can program a button to have a default, active, disabled, and hover state, each one triggered by a separate user or system action.
You can also use States to create complex UI components, like Carousels, Accordion Menus, and Multilevel Dropdown Navigation.
Interactions
UXPin’s Interactions allow you to define what happens when users engage with your prototype. Triggers, including desktop and mobile, enable you to create realistic, intuitive prototypes.
Actions determine what happens after the trigger. UXPin provides 20+ actions, including API requests, changing states, navigation, component property adjustments, playing video/audio content, and more.
Conditional Interactions
Conditional Interactions let you set if-then and if-else conditions, similar to Javascript. These conditions set the rules to trigger different scenarios based on user and system actions.
For example, you can set up multiple form conditions to trigger error messages 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.
Variables
Unlike image-based tools, UXPin’s forms are fully functional out of the box. You can use Variables to capture data from these forms and use them elsewhere in the prototype. For example, capturing a user’s information during a checkout process and displaying it on a confirmation screen for them to verify.
Expressions
UXPin’s Expressions are the closest you’ll get to Javascript without writing any code. With Expressions, you can add another layer of complexity, including validating forms, checking password criteria, or building computational components for shopping carts.
When combined, these four advanced prototyping features allow you to create realistic, dynamic prototyping experiences indistinguishable from the final product.
Check out UXPin’s example apps and patterns to see what’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.
Component-Driven Prototyping With Merge Technology
Now we move on to UXPin’s Merge technology. Aptly named because it merges design and development by bringing code components into the design process.
If you’re using UXPin’s free trial, you can access three built-in Merge design systems in your Design System Libraries:
While these look like regular design elements from a UI kit, they’re actually React components pulled from a repository. We’ll use two seemingly identical buttons to illustrate the difference between Merge and a UI kit.
Both are Material Design buttons. The purple one is from Google’s Material Design UI kit, and the bottom one is from the MUI Design System–which uses Material Design as a foundation.
When we click the purple Material Design button, it displays UXPin’s standard Properties Panel, where you can create the component’s styling and interactions.
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’s available props–or Args if you’re working with the Storybook Integration.
For example, opening the color dropdown displays the MUI button’s color properties which match MUI’s documentation.
These properties give product teams the necessary constraints to build prototypes with minimal drift or inconsistencies.
Who is Merge for?
Merge is ideal for anyone–from startups to enterprises–who builds digital products using a design system. You can use one of UXPin’s built-in UI libraries or import your product’s design system for prototyping and testing.
If you have a design system, it must have code components for Merge to import from a repository. Learn more about design system maturity here.
Why use Merge?
Using code components in the design process enables designers to build prototypes that accurately replicate the final product. These code-based prototypes give stakeholders and users a realistic user experience, resulting in meaningful feedback for designers to iterate and improve.
Prototyping with Merge is also much faster than using traditional design tools. In one experiment, a client was able to build a one-page prototype in under 10 minutes vs. over an hour using an image-based design tool–and the Merge prototype had significantly more functionality and interactivity.
Bridging the gap between design and development
With traditional product development workflows, there’s a definitive handoff process from design to engineering. Engineers must convert prototypes and mockups into code.
With Merge, design handoffs are more seamless because devs already have the exact same components pulled from the exact same repository. Merge produces production-ready JSX so engineers can simply copy/paste to replicate the prototypes.
Get Started with UXPin
We hope you’ve enjoyed this UXPin beginner tutorial. If you haven’t got an account, sign up for a free trial. Build prototypes that can be easily translated to code. Enjoy a better design workflow. Get started here.
