From Prototyping to Design Systems: Exploring an All-In-One UX Tool

  •  0 Comments

Look around the design space today and you’ll find dozens of prototyping, wireframing, and UX tools. In fact, it seems like a new tool pops up every couple weeks.

What if there was the “one tool to rule them all”? That’s exactly what UXPin aims for when it comes to simplifying the UX workflow.

UXPin started as a wireframing tool in 2011, but has since grown into an end-to-end UX platform that helps close the gap between design and development.

The platform currently supports the 5 parts of the design process in one place:

  • Design Systems – Create a design system of patterns, colors, text styles paired with metadata and code snippets.
  • Prototyping – Quickly design lo-fi and hi-fi prototypes across devices.
  • Collaboration – Gather feedback and iterate quickly.
  • Documentation – Document design decisions and use cases.
  • Developer Handoff – Automatic specifications, CSS, style guides for developers.

Today, we’ll dive into how to use each of the 5 feature groups above to design better and faster.

Design Systems

To automate design consistency through different projects, it’s best to start with a design system based on a library of interactive components.

In UXPin, the foundation of each design system is a design system library. You can create one from scratch or use your existing assets in UXPin or Sketch.

Design Systems

For your design systems library, you can add colors, text styles, assets, and UI patterns to reuse in projects. You can set any of these to be a Symbol, in which case they automatically update everywhere. You can also customize the metadata for each element – for example, the Javascript code, use cases, notes for developers, etc.

As you use elements from your design systems library, the metadata follows along. If you update the metadata, it will also reflect across all projects.  This way, every element you use in a prototype includes the documentation from your design system.

The interactive nature of the design system and the attached metadata is what really makes the UXPin design system platform stand out from competitors. It’s much more than a pattern library or style guide.

Style Guide

In the design system itself, you can describe best practices and use cases alongside elements from your design system library. You basically create a “living inventory” of the product which acts as the source of truth.

Design System

Both the design system and the library can be managed by a specified group of people with appropriate permissions, to make sure only authorized changes are made.

Design system and library

Multi-Device Prototyping

With a design system and documentation in place, every team member can build their prototypes quickly and consistently with an approved set of building blocks, patterns, and rules.

Multi-Device Prototyping

UXPin includes a pretty powerful prototyping tool that works for lo-fi and hi-fi design.

When prototyping, you can choose from dozens of UI libraries and built-in interactions or create customized states and animations. You can also design for different devices with preset and custom breakpoints. 

Custom breakpoints

Design Collaboration and Iteration

Between sprints, share the preview of your work with Stakeholders, Project and Product managers, and other Designers to gather feedback on proposed solutions and layout. Everyone can now be a part of the design review using a single link to connect all the departments.

Just grab the share link by clicking the “Preview” tab at the top.

Add comments on different parts of the design and assign them to specific people as tasks to improve accountability.  You can keep all project members updated with automatic notifications through Slack and email.

Design Collaboration and Iteration

At any given moment your team can save the current version of the design as an iteration and start working on updates and changes requested in the feedback. This helps eliminate version control issues and lets people review iterations and revert to a previous one when needed.

Version Control

Documentation and Handoff to Developers

While prototyping, you also want to communicate the reasoning behind your design decisions or call out any interesting details – edge cases, failure states, design principles, or code references.

Use the Free Flow Documentation feature to eliminate misunderstanding—write your comment and pin it to anything imported from Sketch or created in UXPin. All the notes will travel with elements and are an integral part of your design preview in UXPin, giving everyone instant context. Your teammates and developers will see exactly how the product should behave and be built.

Documentation and Handoff to Developers

When your design is documented and you’re ready for developer handoff, send your developers a single preview link from which they can source all the information they need using our Spec Mode and provided notes.

Spec Mode auto-generates specs, assets, style guides, and CSS for any element created in UXPin or imported from Sketch. Opening the specification tab on preview allows to measure distances and sizes and check specific styles, so they’ll know exactly how to build the product.

With automatically generated style-guide, they can see a birds-eye-view of all the crucial styles and download all icons and images in a single click. No more back-and-forth while looking for the right assets, it’s all stored in one place.

Documentation and Handoff to Developers

Additionally, upon inspecting the elements, the developers will be able to see any documentation and metadata that was added to the pattern from the design system. It’s all automatically populated, so no manual work is required.

Next steps

By bringing the entire design process under one roof, UXPin helps teams to focus more on designing and less on process and workflow. It creates an Agile process where consistency, collaboration, and efficiency come naturally.

If you’re interested in trying what you’ve seen here, go ahead and start a free UXPin trial.

UXPin

Newsletter

0 Comments

No comments yet

Leave a Reply

*
* Minimum length: 20 characters