React for Designers – Build React-Based Prototypes without Coding

Learning React for designers–is it necessary? Can you build code prototypes without learning to code? These are common questions among product development teams and designers.

Most designers don’t want to learn to code. And rightly so. Learning React or even the basics of HTML, CSS, and Javascript takes a lot of time. A designer’s time is better spent investing in user experience and solving design challenges.

It’s a bit of a catch-22 because to improve usability testing and user experiences, you need high-quality prototypes that look and feel like the final product–something image-based tools don’t facilitate. For most designers, better prototyping capabilities drive the motivation to learn React.

What if you could get all the benefits of React for prototyping and testing without relying on engineers or writing code yourself? A solution already exists with UXPin Merge!

UXPin Merge allows you to sync code components from a repository into UXPin’s design editor so designers can use the same UI elements (React, Vue, Angular, etc.) engineers use for development. Visit our Merge page for more details and how to request access to this revolutionary technology.

What is React?

React is an open-source front-end Javascript library developed by Facebook. According to an August 2022 survey, React is still the most widely-used front-end framework–a position React has held for several years.

React’s component-based workflow enables engineers to create reusable components they can call anywhere in a user interface by writing a single line of code. This component-based approach makes React an excellent framework for component libraries and design systems.

What is the difference between React and React Native?

React is a web-based technology that interacts with the DOM, meaning it renders in a web browser and doesn’t work with mobile operating systems. React Native is the mobile equivalent of ReactJS used for cross-platform native and web applications.

In short:

• ReactJS: websites and web applications
• React Native: native and web applications

Many organizations use React for their websites and web applications because it offers better browser performance than React Native.

What is React for Designers?

React for designers is a movement to educate designers about React and other front-end frameworks. The idea is that learning React will empower designers to build basic prototypes or, at the very least, better understand technical constraints and the development process.

Should Designers Learn React?

An introductory course to React will only reap positive benefits for designers. But, like any language, if you don’t practice it regularly, you’ll lose it. So, it depends on your goals and motivations for learning React.

Here are three common reasons why designers learn React:

Career development: programming expertise is advantageous if you plan to climb the corporate ladder–even within Design. The higher you climb, the more important it is to learn the technical aspects of product development for communication, collaboration, and decision-making.

Higher paying jobs: a natural transition for a UX designer who codes is to a front-end developer or UX engineer. According to Glassdoor, the average UX designer makes under $100k in the United States, while the average UX engineer earns over $120k. On average, engineers earn more than designers. Design and development expertise increases your value to an organization and earning potential.

Skills development: understanding the engineering aspects of digital product development can improve cross-functional collaboration. Learning React can also help designers understand technical impacts on user experience and how to solve these problems during the design process.

Better prototyping: unfortunately, image-based design tools limit what designers can test during the design process. To improve prototyping capabilities, designers must rely on engineers to build code-based prototypes–a time-consuming and expensive process. Designers who code can make these prototypes themselves to enhance usability testing.

Can you Design a React App Prototypes Without Learning React?

The short answer–yes, you can with UXPin Merge. UXPin Merge allows designers to import React (and other frameworks) component libraries into UXPin to build fully functioning React prototypes–without writing a single line of code!

Designers use these React components in UXPin like any other design tool, dragging and dropping UI components to build user interfaces. The only difference is that Merge components are fully interactive and include colors, spacing, typography, sizing, and other properties defined by the component library or design system.

What do React components look like in UXPin?

This text field from MUI’s component library demonstrates how designers see and edit React components in UXPin. The text field is fully functional and ready to prototype out of the box.

The properties displayed in UXPin’s Properties Panel relate to React props from the component library’s repository. Designers can switch modes and view the component’s React props in JSX. 

This JSX also makes design handoffs much easier because engineers simply copy/paste the code for front-end development.

Code-based vs. image-based design tools

Image-based design tools use plugins and extensions to achieve similar results, but this code is rarely usable for engineers. Why? Because these plugins scan UIs and “guess” what the code should be. There are many ways to develop React components, so this code is usually redundant, meaning it’s faster for the engineers to code from scratch than restructure plugin-generated code.

Merge is a code-based technology, meaning UXPin renders code as it’s written in the repository instead of vector graphics. Engineers already have exact versions of the components in their repo, so it’s a matter of adding the component library as a project dependency and copying the JSX from UXPin to develop the final product.

UXPin Merge gives designers all the benefits of learning React without learning React!

Examples of Companies Prototyping with React Components

From startups to agencies, and enterprise design teams, here are examples of companies prototyping with React components during the design process.

PayPal

PayPal’s internal product development team switched to UXPin Merge in 2019. Erica Rider, UX Lead EPX at PayPal, discovered Merge while looking for tools and systems to scale her 5-person UX team, which serviced 60+ products and supported 1,000+ engineers!

PayPal uses a React Fluent UI design system with custom components, patterns, and templates. Erica and her team have built the library to minimize design decisions, so product teams only focus on creating products to solve user problems.

The system works so well that PayPal’s product teams build one-page prototypes 8X faster than experienced UX designers using image-based tools could previously.

“Before, with our limited resources and designers, a one-page product would take two or three months just to design mockups. Now product teams can design and deliver a product within the same time frame.” – Erica Rider – UX Lead EPX at PayPal.

TeamPassword

TeamPassword uses UXPin Merge slightly differently. With no UX team, TeamPassword’s engineers must do all the prototyping and testing. The two-person team used to do this with code, but it took a lot of time to test, edit, and iterate.

TeamPassword’s engineering team now uses UXPin Merge for developing and testing new products using a custom MUI component library. With production-ready React code, TeamPassword’s engineering team saves significant resources by not writing front-end code to deliver new products and UI updates.

dotSource

German-based digital product consulting and development agency dotSource uses UXPin’s Storybook Integration to import libraries for multiple frameworks, including React, Vue, Angular, Ember, etc. This flexibility means dotSource’s design team can use UXPin Merge with almost every client and product the company collaborates on.

One of the most significant benefits of using UXPin Merge is that design system properties are “baked in” to every component. As an agency collaborating with various organizations and their internal teams, these baked-in React properties create constraints that guarantee ultimate UI consistency.

Using code components in the design process also makes cross-functional collaboration easier for dotSource’s teams while facilitating smooth, effortless design handoffs–which are usually more challenging when working with external contractors.

Iress

Financial services software developer Iress uses UXPin Merge to create a single source of truth for the organization’s design system. With designers and engineers using the same component library, there’s better cross-functional alignment and understanding of technical constraints.

“UXPin Merge will help us create more interactive and realistic prototypes. People can tab around or see the same interactions – hover styles, animations, etc. – as they would expect in a real app. We can do more insightful user testing and discover usability issues much earlier in the process.” Nick Elliott – Design System Product Owner and Regional Head of Product Design at Iress.

Like PayPal, Nick sees the benefit of UXPin Merge for non-designers “It will give non-designers access to a tool, whereby they can also experiment and have exposure to the same design considerations.”

Design With React Components in UXPin Merge

There are three ways designers can get started designing with React components using UXPin Merge:

• npm Integration: import open-source React component libraries available as npm packages into UXPin using the Merge Component Manager (the quickest and easiest way to get started as a designer).
• Git Integration: sync a React repository directly to UXPin. Requires engineering collaboration to set up.
• Storybook Integration: supports more front-end frameworks via Storybook, including Vue, Angular, React, Ember, and more.

Designers can also take advantage of UXPin’s MUI integration which comes standard with all Merge plans.

Ready to get started? Visit our Merge page for more details and how to request access.