React for Designers – A Designer’s Guide to React
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. 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!
Key takeaways:
- React is a library that helps devs build interfaces with reusable components which makes apps scalable and easy to maintain.
- Designers can learn React to better understand development; there’s even a movement “React for designers” that advocate for this.
- Designers don’t need to learn React if they use UXPin Merge–a powerful design technology that lets them create prototypes with coded React components just as if they would use pixel-based UI components.
UXPin Merge allows you to sync UI coded components from a Git repository, npm or Storybook into UXPin’s design editor so designers can use the same UI elements (React, Vue, Angular, etc.) that engineers use for development. Learn how to request access to this revolutionary technology. Visit our Merge page.
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 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 interactive prototypes or, at the very least, better understand technical constraints and the development process.
Should Designers Learn React?
Designers don’t need to learn React, but if they take an introductory course, they can gain many attractive benefits.
Here are four common reasons why designers learn React:
#1: 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.
#2: 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.
#3: 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.
#4: 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.
UXPin Merge – The Fastest Way to Design with React
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 bring React to design, but the generated 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.
Read more: Design to Code or Code to Design?
UXPin is a code-based technology, meaning it 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 technology gives designers all the benefits of prototyping a React app or website 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.”
Try React Prototyping Tool
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.
