Using You.i Engine One’s Designer Workflow to Reuse UI Components Across Mobile and TV Platforms

Andrei Calazans
Andrei Calazans

I’ve talked before about You.i Engine One saving hours of development time when building across platforms. Today, I want to talk about another use case of You.i Engine and that is leveraging the designer workflow for component reusability on any form factor (mobile, tablet, or TV).

You.i Engine One’s Designer Workflow allows designers to create user interfaces in Adobe After Effects (AE) and then seamlessly pass off their concepts to developers. The UIs render directly to the platform through component references provided by Engine One. UIs can also be created using JSX thanks to You.i Engine’s React Native bridge.

Note: the After Effects workflow has much more to it than this, and could be covered more broadly in another article (or by reading the documentation). In this article, I will be focusing just on the re-use of components between form factors.

The benefit of AE

AE gives the designer the power to control how the UI looks in the app. The group of layers and nodes that come together to compose the UI is called a Composition.

You.i Engine allows for the designer to specify under a folder in After Effects for all the designs related to the targeted platform. For instance, all designs related to handsets are under a single folder, same for TV and tablets. There is also an option for defaults that can be reused across platforms.

designer workflow-project structure

Snapshot from After Effects Project structure

You.i Engine is configured to bundle the right assets with your project and build according to the platform. The asset locator is responsible for this. It also allows you to configure it to switch on any arbitrary factor, such as DPI, accessibility, dark mode, branding, etc.

The AE approach to design empowers the designer to be able to make changes to how the app looks without changing any code. Once the code that references a design is written, the design can change as much as it wants, as long as it does not break the contract by modifying the name and layer structure of AE.

For example, take the following trial button.

designer workflow-free trial

Its tree hierarchy in the design is:

designer workflow-hierarchy

Once this design is in place and exported, it can be referenced in code and rendered to the screen.

The reference in code looks like the following:

import { Composition, ViewRef, TextRef, TextInputRef, ButtonRef } from '@youi/react-native-youi';

export default class TrialButtonExample extends React.Component {
  render() {
    return (
      <Composition source="MyAEComposition_Screen">
        <ViewRef name="ProductDescriptionView">
          <ButtonRef name="TrialButton" />
        </ViewRef>
      </Composition>
    )
  }
}

https://gist.github.com/AndreiCalazans/c2385e16a36ac42c4b3fa48553117dad

The ViewRef in this example is optional, it will not fail if you only write the ButtonRef under Composition. Following this pattern resolves ambiguity when you have multiple sibling layers with the same name. This is a common pattern with animations, for instance.

Once this reference is in place, the design team can make any changes to the design. As long as the tree structure and names of each layer are not changed, no updates are required in code.

Reuse UI References Across Platforms

Let’s see how we can leverage code reuse of UI references.

Despite all the visual possibilities for each platform, there is a pattern in UI compositions. Let’s imagine a sign-in screen. There are multiple ways to design this. Nevertheless, you can expect every sign-in screen to have two inputs, a forgot password button, and a sign-in button. Visually for each platform, they can be very different, but structurally they can be the same.

The AE structure for a log-in screen can be as follows:

designer workflow-login-design tree

Login Design Tree

You.i After Effects plugin allows you to compose your UI out of different layers.

designer workflow-component categories

Component Categories

In our login design tree, Main is a Container layer, which has two Container layers as children (InputsContainer and ButtonsContainer) and a Text layer (Title). We can replicate this same tree structure for TV, handset, and tablets. However, despite following the exact same tree structure, you can layout it out as you want. Here is how this design structure could be applied to the UI on different form factors.

designer workflow-handset-log in

Handset Log In Screen

designer workflow-tablet-log in

Tablet Portrait Log In Screen

designer workflow-TV-log in

TV Log In Screen

These skeleton UIs would serve as a starting point for the designers. The advantage is we need only one JSX component referencing these layers for all three platforms. And as long as the contract is never broken no code would need to be changed. This reduces a lot of code.

import {
  Composition,
  ViewRef,
  TextRef,
  TextInputRef,
  ButtonRef
} from '@youi/react-native-youi';

export default class Login React.Component {
  render() {
    return (
      <Composition source="Login_Main">
        <TextRef name="Title" text="Your Cool Brand" />
        <ViewRef name="InputsContainer">
          <TextInputRef name="UsernameInput" />
          <TextInputRef name="PasswordInput" />
        </ViewRef>
        <ViewRef name="ButtonsContainer">
          <ButtonRef name="LogInBtn" />
          <ButtonRef name="ForgotPasswordBtn" />
        </ViewRef>
      </Composition>
    )
  }
}

Login JSX Component https://gist.github.com/AndreiCalazans/f28d1f427e18277aa111ebd16a22496e

What About A Movie Lander

Movie landers are usually composed of a hero image with a title and a large list of provided movies to watch. We could structure it as follows:

designer workflow-design tree-movie lander

Movie Lander Design Tree

Hero and MovieThumbnail are just container layers composed of different nodes as children.

designer workflow-hero-container layer

Hero Container Layer

designer workflow-thumbnail-container layer

Once we have designed this for each platform we are targeting and structure it equally, we can write a single JSX component to reference it.

import {
  Composition,
  ViewRef,
  TextRef,
  TextInputRef,
  ButtonRef
} from '@youi/react-native-youi';
import { Hero, MovieThubnail } from './shared-components';

export default class MovieLanderRef React.Component {
  render() {
    return (
      <Composition source="Movies_Main">
        <Hero />
        </ViewRef>
        <ListRef
          name="MoviesList"
          data={moviesArray}
          renderItem={({ item }) => <MovieThumbnail {...item} />}
        />
      </Composition>
    )
  }
}

https://gist.github.com/AndreiCalazans/02ba7e05d2ad79a4e179b9f11fdd44be

This design structure can render completely different layouts according to the platform. These differences can be made within After Effects by a production designer. Take the following as an example:

designer workflow-movie lander-handset

Movies Lander on Handset

designer workflow-movie lander-tablet

Movies Lander on a Tablet

designer workflow-movie lander-TV

Movies Lander on TV

Conclusion

The main idea behind this approach is to structure your UI tree with the same names and layers. This way you can reuse the same component references. An important part of this architecture decision is to properly separate domain logic from UI. If you couple this logic it will be hard to maintain and scale your codebase. I recommend you watch Uncle Bob’s Architecture the Lost Years talk and read this other post I wrote about the separation of concerns in React apps if you want to study this subject further.

Here’s something similar we think you’ll enjoy.