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 directly imports coded UI components into the design canvas, enabling pixel-perfect prototypes consistent with development.

  • Designers manipulate component properties rather than breaking apart code-driven components, preserving design fidelity.

  • Using Merge promotes harmony and a common language between design and development teams, reducing misunderstandings.

  • Component-driven prototyping allows building complex interfaces from atomic design principles, composing organisms from atoms.

  • Merge supports interactive behaviors baked into components, like button click ripples and dropdown menus, without additional coding.

  • Design changes in Merge are governed by design system rules ensuring brand consistency and limiting product drift.

  • Developers can extract exact JSX code specs from the components used within UXPin Merge prototypes for implementation.

  • Merge supports responsive media queries, preserving component behavior across device breakpoints.

  • Interactions between components can be created by linking events to properties, such as opening or closing modals.

  • The gap between design intent and development outcome is minimized by working from the same coded components as a single source of truth.

Notable Quotes

"We help teams onboard their coded components onto the UXPin platform so they can be enabled with component-driven prototyping."

"UXPin is a full-stack platform that bridges the gap between design and development disciplines."

"Component-driven prototyping means designing with coded UI components your development team already created."

"There’s a frustrating gap between what a designer envisions and what actually gets implemented, leaving live prototypes inconsistent."

"Merge translates code from Storybook, npm, or third-party libraries into interactive, visual components in the editor."

"You can’t just break apart these components and type; instead, you change their properties to adjust labels, colors, or icons."

"Designers and developers work from the same source of truth, promoting pixel-perfect parity and consistent user experience."

"All behavior your component is capable of, including responsive and interaction states, will work inside UXPin."

"Interactions are exposed as events on components, so you can define that on clicking a button, a dialog opens."

"Using Merge we’re closing the loop of documentation and empowering stakeholders to communicate via common jargon and components."

Ask the Rosenbot
Kristin Skinner
Group Activity: A Deep Dive Into Value and Outcomes
2019 • DesignOps Summit 2019
Gold
Russ Unger
Getting Out from Under Everyone: How to Escape the Paralysis of Getting Started
2016 • Enterprise UX 2016
Gold
Ana Ferreira
Designing Distributed: Leading Doist’s Fully Remote Design Team in Six Countries
2024 • DesignOps Summit 2020
Gold
Ted Booth
Discussion
2016 • Enterprise UX 2016
Gold
Billy Carlson
Ideation tips for Product Managers
2022 • Design in Product 2022
Gold
Jess Greco
Creating a Basis for Change: Scaling Design Maturity
2022 • Design at Scale 2022
Gold
Melissa Eggleston
Practical People Skills for Building Trust on Teams and with Partners
2021 • Civic Design 2021
Gold
Michelle Chin
The DesignOps Starter Kit
2021 • DesignOps Summit 2021
Gold
Mackenzie Guinon
M.C. Escher’s UX Research Career Ladder
2022 • Advancing Research 2022
Gold
Edgar Anzaldua Moreno
Using Research to Determine Unique Value Proposition
2021 • Advancing Research 2021
Gold
Kristen Guth, Ph.D.
Out of the FOG: A Non-traditional Research Approach to Alignment
2023 • Advancing Research 2023
Gold
Joerg Beringer
Scaling User Research with AI: Continuous Discovery of User Needs in Minutes
2025 • Designing with AI 2025
Gold
Rebecca Topps
Planning and conducting remote usability studies for accessibility
2020 • Advancing Research Community
Vanessa Varin
Feedback: The Other F-Word
2025 • DesignOps Summit 2025
Gold
Florence Okoye
AfroFuturism and UX Research
2023 • Advancing Research 2023
Gold
Steve Baty
Breaking Out of Ruts: Tips for Overcoming the Fear of Change
2016 • Enterprise UX 2016
Gold

More Videos

Elena Naids

"Don’t ever be afraid to have those difficult conversations because they’re the most important ones to have."

Elena Naids Liza McRuer

The Power of Difficult Conversations: A Case Study on How We Introduced Design Ops in the Federal Government Space

October 2, 2023

Audrey Crane

"If you’re paying for design today but it’s done poorly by non-designers, wouldn’t you want to spend that money more effectively?"

Audrey Crane

Shadow Design–Where Else is Design Happening in Your Organization?

April 20, 2023

Deanna Zandt

"The design of our systems should make room for messy, complicated human realities, not just positive illusions."

Deanna Zandt

The Unspoken Complexity of “Self-Care” with Deanna Zandt

July 21, 2022

Sheryl Cababa

"Systems thinking can help us design more explicitly for resilience, as seen in distributed manufacturing of PPE during the pandemic."

Sheryl Cababa

Expanding Your Design Lens with Systems Thinking

February 23, 2023

Eduardo Ortiz

"Keep legal as a proactive partner, not just someone you call when there’s a problem; build those relationships early over coffee or casual chats."

Eduardo Ortiz Robin Beers Rachael Dietkus, LCSW Bruce Gillespie Jess Greco Marieke McCloskey Renee Reid

Day 3 Theme Panel

March 13, 2025

Jemma Ahmed

"By bringing truth to power is how we bring excellence to our craft and define our value."

Jemma Ahmed

Theme 2 Intro

March 26, 2024

Theresa Slate

"We asked people to judge others’ feedback with an anti-bias lens instead of focusing on their own biases."

Theresa Slate Erin Robertson

Why Changing Hearts & Minds Doesn’t Work When Promoting DE&I Efforts, but Checklists Do

October 4, 2023

Erika Flowers

"We put high-fidelity designs in Mural so stakeholders unfamiliar with Figma can still comment and interact."

Erika Flowers

Introduction to MURAL for UX

June 11, 2021

Bria Alexander

"If you want your question asked, please put it in the Slack channel, because I cannot keep up with the rapid things happening live."

Bria Alexander Louis Rosenfeld

Opening Remarks Day 1

March 25, 2024