Using You.i Engine One’s Designer Workflow to Reuse UI Components Across Mobile and TV Platforms
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 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 which can be reused across platforms.
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.
Its tree hierarchy in the design is:
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:
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:
You.i After Effects plugin allows you to compose your UI out of different layers.
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.
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.
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:
Hero and MovieThumbnail are just container layers composed of different nodes as children.
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.
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:
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.
