WWW… Wednesday! UXPin

by Taylor Slattery | October 3, 2019

UXPin - User Interface - User Experience

UXPin is a tool for rapid, collaborative UI prototyping and design. Its simple set of features and non-intimidating interface makes it approachable for users of any experience level. Unlike other UI design tools, UXPin is based on HTML, CSS, and JavaScript code, which makes for a seamless handoff between designer and developer. By removing the need to convert vector objects to code, UXPin cuts costly hours, streamlining the design process and allowing for easier revisions and more freedom to experiment. An added benefit to being based on code is the ability for designers with some HTML knowledge to tag elements with small code-based annotations with info pertinent to the developers.

UXPin leaves nothing to the imagination. It comes with a suite of interactive states and animations, allowing designers to interact with the elements, toggling between their various states. To get an even better idea of how the design will look on a mobile device, simply scan an automatically generated QR code with the device of your choice to access a live version of the project. If you can’t find what you’re looking for in the library of animations, UXPin also supports custom animations.

UXPin is built for collaboration. Team members can be assigned various permissions and design simultaneously, while others watch the process live and provide feedback in a trackable timeline of comments. UXPin also has Slack integration, which makes it more accessible and allows it to fit neatly into many work environments. UXPin utilizes cloud-based libraries that allow teams to store their design systems. Without having to refer to a style guide, team members can quickly drag and drop fonts, icons, colors, and other elements, ensuring cohesion across all projects. Because changes made to the library sync across any project that uses it, designers can focus on functionality and worry less about stylistic choices. The library system aids a great deal in scaling a design. Additional features and layouts can be quickly constructed using elements of the established design system.

uxpin app layout

When it’s time to hand off the project to the developer, UXPin generates all the necessary code for your design systems, eliminating any guesswork and ensuring cohesiveness.

uxpin ebook layout

For those looking to jump ship, UXPin is compatible with Photoshop and Sketch files. UXPin is available for both Mac and Windows and even has a browser-based version as well. You can learn more and try it for free here.