Rosenverse

This video is only accessible to Gold members. Log in or register for a free Gold Trial Account to watch.

Log in Register

Most conference talks are accessible to Gold members, while community videos are generally available to all logged-in members.

How to Build Prototypes that Behave like an End-Product
Gold
Tuesday, December 6, 2022 • Design in Product 2022
Share the love for this talk
How to Build Prototypes that Behave like an End-Product
Speakers: Jack Behar
Link:

Summary

Get more meaningful feedback, achieve UI consistency, and scale design process — that’s just three out of multiple improvements you will see once you build prototypes with interactive components. Take part in UXPin’s session and see what you can do to make prototyping interactive by default.

Key Insights

  • UXPin Merge allows designers to use real coded components from the development team’s design system, ensuring prototypes match production code exactly.

  • Traditional prototyping tools create only mid-fidelity prototypes lacking true interactivity and pixel parity, causing the design-development gap.

  • Merge imports components from Storybook, npm packages, or third-party libraries like Material UI into UXPin’s design canvas as editable visual components.

  • Designers modify component properties (like color, size, icons) instead of altering code, enabling easy and governed customization.

  • Complex components such as cards and headers are composed of smaller coded components that can be nested, reordered, or replaced visually.

  • Interactions like opening a modal dialog are implemented by linking component events and properties within UXPin without coding.

  • Using coded components promotes maintaining a single source of truth, limiting product drift and ensuring consistent user experience.

  • Merge supports responsive behaviors and media queries within prototypes, preserving real app responsiveness.

  • Merge empowers collaboration by giving designers, developers, and stakeholders a common language and live documentation linked to components.

  • UXPin’s version control allows switching between different versions of design systems, supporting scalable design management.

Notable Quotes

"We can build prototypes that behave like an end product right out of the box without any code or complicated process."

"UXPin’s mission has been to bridge the gap between design and development disciplines."

"Merge translates UI components into a visual, configurable, interactive library in the UXPin editor, working from a single source of truth."

"This is not a simple flip of artboards; this is actually contained code with real interactivity baked in."

"We are now working with high fidelity by default because all coded functions and behavior of components are already there."

"You can drag coded components onto the canvas and modify their properties like color, size, and icons without breaking their code."

"When designers and developers use the same coded components, we achieve pixel-perfect parity and consistent user experiences."

"Interactions like clicking a button to open a modal are built by linking component events and properties, no code required."

"Merge closes the loop of documentation, empowering everyone to communicate via the same jargon and reference the same components."

"Responsive behaviors like media queries continue to work inside UXPin prototypes when using coded components."

Bria Alexander
Opening Remarks
2021 • DesignOps Summit 2021
Gold
Smitha Papolu
Theme 3 Discussion
2024 • Enterprise Experience 2020
Gold
Christian Crumlish
Morning Insights Panel
2022 • Design in Product 2022
Gold
Katy Mogal
But Do Your Insights Scale?
2021 • Advancing Research 2021
Gold
Adam Cutler
People + Places + Practices = Outcomes
2016 • Enterprise UX 2016
Gold
Sylvie Abookire
A Civic Designer's Guide to Mindful Conflict Navigation
2022 • Civic Design 2022
Gold
Christian Rohrer
Insight Types That Influence Enterprise Decision Makers
2015 • Enterprise UX 2015
Gold
Bram Wessel
Enterprise Information Architecture (Videoconference)
2020 • Enterprise Community
Dan Willis
Enterprise Storytelling Sessions
2015 • Enterprise UX 2015
Gold
Scher Foord
Turn the Ship Around: How to Apply Design Thinking Across Your Organization
2021 • Design at Scale 2021
Gold
Saara Kamppari-Miller
Theme Three Intro
2023 • DesignOps Summit 2023
Gold
Jeff Gothelf
The Intersection of Lean and Design (Videoconference)
2019 • Enterprise Community
Kathleen Asjes
Research Democratization: the Good, the Bad and the Ugly
2022 • Advancing Research 2022
Gold
Sam Ladner
How Research Can Drive Strategic Foresight
2022 • Advancing Research 2022
Gold
Sheryl Cababa
Thinking in systems to address climate with Sheryl Cababa (Videoconference)
2024 • Climate UX Interest Group (Rosenfeld Community)
Greg Petroff
Software as Material—A Redux
2023 • Enterprise UX 2023
Gold

More Videos

Monty Hammontree

"Celebrating learning—especially when invalidating a hypothesis—is a key cultural value we embrace."

Monty Hammontree

The Future of UX Research (Videoconference)

December 3, 2020

Liz Ebengo

"Will you become an advocate for the world’s most vulnerable voices muffled in complex systems?"

Liz Ebengo

The Burden on Children: The Cost of Insufficient Post-Conflict Services and Pathways Forward

December 4, 2024

Billy Carlson

"Wireframes plus a little bit of storytelling is awesome."

Billy Carlson

Tips to Utilize Wireframes to Tell an Effective Product Story

June 6, 2023

Saara Kamppari-Miller

"Design operations is designing how we design, and inclusive design is design ops we need to be intentional about."

Saara Kamppari-Miller

Inclusive Design is DesignOps

September 29, 2021

Ian Swinson

"Your career is the only design project you will ever own, so own it consciously and actively."

Ian Swinson

Designing and Driving UX Careers

June 8, 2016

Jonathon Colman

"Just because you can solve a hard technical problem doesn’t mean you’re solving a real problem for real people."

Jonathon Colman

How to Maximize the Impact of Content Design

January 8, 2024

Maria Skaaden

"One eye on the horizon and the other on the next wave—that's the perspective product teams need to deliver quality digital products."

Maria Skaaden

Continuous Design: One eye on the horizon and the other on the next wave

November 8, 2018

Bryce Benton

"I'm not a Python developer. I've used Python, but I'm getting a lot of assistance from ChatGPT to help me write that."

Bryce Benton

[Demo] AI-powered UX enhancement: Aligning GitHub documentation with USWDS at Austin Public Library

June 4, 2024

Marc Fonteijn

"The satisfaction score is going down even though average salary is going up — that’s something interesting we should dig into."

Marc Fonteijn

First Insights from the 2025 Service Design Salary(+) Report

December 4, 2024