Designers spend a lot of time creating principles and guidelines that guarantee great user experience. Developers rely on those guidelines to bring their designs to life. The problem that product teams face is a disconnection between the design and the final solution. Even the perfect guidelines don’t guarantee that an engineering team will be able to implement them properly. No matter how great your design looks, if it’s not feasible, it won’t make much sense. That’s why bridging the divide between design and development is the major goal that product teams have.
In this article, I want to introduce a
beneficial tool that allows building a bridge between design and development.
This tool is called React Native. Consider this article as a quick guide to React for designers.
Meaning we won’t focus much on development, rather we’ll show how a person with
basic coding skills can use React Native to get things done.
What is React Native
React (ReactJS) is a library that doesn’t require any introduction for anyone who is working in the front-end development space. This JavaScript library can be used in web design (i.e., as a base in the development of a single-page website). One thing that makes React different from other libraries is that React does not attempt to provide a complete “application framework.” It is designed specifically for building user interfaces.
In 2012 Mark Zuckerberg said, “The biggest mistake we made as a company was betting too much on HTML as opposed to native.” He promised that Facebook would soon deliver a better mobile experience. After months of development, Facebook released React Native – a React UI framework for developing native apps for Android and iOS created by Facebook.
Blurring the lines between design and code with components
One thing that makes React Native especially
great is that it actually uses native components. When designers start
designing for a platform using React Native, they do it with the base UI
components for that native platform. A core set of platform-agnostic native
components like View, Text, and Image map directly to the platform’s native UI building blocks.
They are well-defined, both visually and in terms of interactions. So you will
build an app exactly as you would in Apple XCode or Android Studio, except that
you will use JavaScript instead of Swift or Java.
React UI components. Image by Facebook.The
component-based approach has the following benefits:
- Components let you build a
domain-specific language. Both design and development teams share the same
language.
- Components in React Native are
shared across the boundaries, meaning as soon as you have a component on a
design canvas, you see the source code for them.
- Component code is very
approachable. Even people who don’t have basic coding skills can play with it.
- It’s possible to create
platform-specific versions of components so a single codebase can share code
across platforms. React components wrap existing native code and interact with
native APIs via React’s declarative UI paradigm and JavaScript.
Seamless cross-platform design and development with React Native. Image by Facebook.How designers can use React Native
Don’t worry about platform guidelines
Creating consistent design is a major goal
for most design teams. Designers spend a lot of time on this activity. When the
development team builds a solution, the design team conducts a design review
and analysis. This procedure slows the team down and takes a lot of time and
effort.
Thanks to React, the design team doesn’t
need to think about implementation details. It’s also much easier to make the
design consistent both for iOS and Android without much effort. As a result,
the product team reduces the time required for coding for iOS and Android.
Fast iterations
“Test early, test often” is the most important rule that any product designer should follow. With React Native, it’s very easy to try various things and see what works and what doesn’t. Using the Expo library, it’s easy to change things on the fly and see how your design looks and works on the iOS device. You can access device capabilities like camera, location, notifications, sensors, haptics, etc.
Using Expo to preview the design on a device.If you are happy with your solution, you
can share it with your team and see whether it makes sense for them. The beauty
of React is that you can send the tangible presentation of your idea to the
engineering team and hear their thoughts on your solution. The engineering team
can also iterate on your idea and make it more powerful.
Visibility and feasibility of motion language
The problem of sharing motion language is one of the typical challenges that many product designers face. All too often, design teams prepare special animation guidelines that contain a detailed description of animated effects used by the team. Guidelines simplify the task of coding animated effects, but no matter how good animation guidelines are, the engineering team will need to spend some time implementing the effects. React Native allows the use of a single codebase for designers and developers. And it means that the engineering team can reuse the code of your solution.
With React Native, it’s possible to design complex UX reactions such as a multi-state transition. In multi-state transitions, two or more components should communicate with each other. For example, a component with a content preview card should communicate with its detailed state. Libraries like Redux allow you to manage your states from anywhere in your app. Thanks to Redux, any screen in your app will have access to the shared states.
Use real-world data in design
Dozens of articles are written about the danger of using fake content during the design phase. When a team designs products using dummy content, they often face problems when a product populates with real data.
React Native allows using real data in design right from day one. With React Native, it’s possible to get the data by API. For example, you can store your data in a content management system like Contentful and populate the app with data from this system. The CMS will be a database for your content. You can define different types of content models there and access the data by API.
Easy to design adaptive layout
The layout you create in React Native will be completely adaptive and will work great on smaller devices such as mobile phones but also larger devices such as the iPad. The fact that components are responsive to screen size makes design easily scalable.
Conclusion
When it comes to product design, it’s essential to use the right tools to be efficient. It’s easy to get caught up in various design tools and libraries that are not friendly for designers and make the design process more tedious. But React Native is different. This tool creates a bridge between design and development and makes both teams works better together.