From Prototyping to Design Systems: Exploring an All-In-One UX Tool
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.