ASSET MANAGER — CUSTOM FIGMA PLUGIN

Creating a Custom Tool for Consistent Assets Across the Platform

Timeline

August 2023 - October 2023

Skills

Figma plugin APIs

Product design

Design tools

Interaction design

Summary

Asset Manager is a Figma plugin that stores assets such as illustrations and data used within the Trulioo Platform for quick access and input.

I led both the design and development efforts for this project, collaborating daily with leadership and the design team to ensure product fit. I conducted audits, facilitated workshops and led the visual, interaction and user flow tracks all while leading the technical implementation of the tool from conception to launch.

Swap assets directly onto the canvas — providing direct integration into designer workflows.

User journey map and related problem origins

01
Overview

The problem

The Trulioo platform comprises of a diverse range of products, each overseen by its own dedicated team. This led to isolated work environments, where teams operated in silos with limited cross-team communication.

These isolated teams gave rise to inconsistencies in assets across the various products , necessitating time-consuming review sessions and error-checking processes.

Three empty states with different illustrations and text

The goal

Ensure a unified asset experience across the platform. Assets include illustrations and reusable text throughout the platform.

Example asset combinations

02
Pinpointing the core problem

What we started with

The current platform had an abundance of inconsistent asset usage across its different products.

An audit of the production environment and all designs handed off within the last six months revealed that every product had different variations in common asset use cases.

52

Unique illustration usages
23

Unique use-cases
2.26

Average variations

Analyzing the user journey

Structuring the user journey allowed me to identify the pain points in the asset selection process.

Designers had been referencing different designs and use-cases when using assets, resulting in conflicting usage across teams. In addition, the current process required a significant time investment in the designer workflows due to the neccessity for manual coordination between designers.

User journey map and related problem origins

03
Tackling the Backbone of the Project

Creating an asset repository

To create a unified asset repository, I lead several workshops with our design team to consolidate each inconsistent asset usage found in the audit, making sure that each unique use case had a single set of illustration and text combinations.

Having established an asset repository, I was prepared to create the tool for managing and housing this repository.

Consolidating similar use cases together

Consolidating different asset combinations

Rethinking the user journey

I addressed the issues found with the previous user journey by mapping out what the journey would look like with a design tool.

By integrating a design tool into the user journey, we are able to significantly decrease the time investment necessary in addition to ensuring consistent asset usage.

Updated user flow

Deciding on a tool

Several tools were suggested to house our asset repository, including tools like Google Docs and custom Figma plugins.

I made the decision to create a custom Figma plugin because of its superior integration capabilities into designer workflows. While the development period would be higher, the plugin would cut down on the asset selection journey and allow designers to focus on delivering great user experiences.

04
Design iteration

Testing initial designs

Once the initial designs were complete, I ran moderated user tests with three designers and iterated on the designs based on the gathered insights.

Improving asset organization and searchability

The first iteration of designs featured a tag filter system that allowed users to filter results by the asset type.

I improved this with the implementation of a tab list component to separate out illustration and text assets into individual screens and replacing the tag filter system with a more robust filter and sort mechanism.

Organization and filter system improvements

Improving the asset insertion screen

Initial designs for inserting/swapping assets required users to click on individual rows and the actual swap vs insert interaction was determined whether the designer had anything selected within the frame. This combination was extremely confusing for first time users and lacked a clear micro interaction structure.

I improved this by separating out the insert and swap functionality into two separate buttons within each row. This allows better signifiers into the available options for the designer. Additional design changes described below.

Improved descriptions

Descriptions were expanded to include "Use case" and "Products" sections to give designers better context on which asset to use.

"Back to results" icon button

The outline button was replaced with an icon button to reduce visual emphasis, allowing the user to focus on more important information within the screen.

Editable string text

String text is contained within input fields for greater control over the text customization.

Individual asset screen improvements

05
Development

Diving into implementation

The following section is a quick dive into the technical implementation of the plugin. If you're more interested in the designs, feel free to jump to the launch section to see the final designs and implementation.

I lead development efforts for both the frontend (UI) and backend logic and collaborated with developers on code best practices and implementation.

For this section, I'll focus mainly on the component insertion logic, namely adding and swapping assets. If you'd like to learn more, you can visit the source code or reach out to me for more information!

Keys, keys, keys

In order to insert the assets onto the canvas, we first have to import the component through its master component key. I utilized the Node Inspector plugin to find the keys for all listed assets and stored them along with their specific use case information within a JSON file for quick lookup.

"Add asset" logic

To add an asset onto the page, we first call the importComponentByKeyAsync(key) function in order to import desired component into the plugin.

Once an instance is imported, we call the createInstance() function and place the instance in the center of the viewport. Lastly, we center the newly created instance within the viewport.

"Swap asset" logic

Swapping assets differs slightly in the logic required due to two main factors, the amount of items selected and the types of the items selected. Because the user has the possibility to select more than one item, we'll have to iterate through every selected item using a for-loop. Before performing any swaps, we'll additionally have to validate that each item is an "INSTANCE" object.

Once these conditions are satisfied, it becomes much more simple. We'll import the desired component with the importComponentByKeyAsync(key) function, swap the item with the desired component using swapComponent(importComponent) function, and we are done!

06
Final experience

Efficient organization

The asset manager provides organization of assets under two tabs, "Illustrations" and "Text", empowering users to locate specific assets swiftly through efficient search, filtering, and sorting functionalities.

Centralized Assets

The individual pages draw assets from the centralized repository, ensuring that users are always using the most up-to-date illustrations and text.

Swap and add assets

Users have the option to either swap the current selection or add individual assets directly onto canvas, providing direct integration into the user's workflow.

Swap groups

For text assets, users have the option to swap entire groups of content at once rather than swapping out content individually.

07
Impact and what's next

Shipped and integrated

The asset manager tool has been officially released to the entire design team and integrated into every designer's workflow, leading to great improvements in both the efficiency and consistency of new features.

In addition, stakeholder interest in future design tooling projects skyrocketed with several ideas in the pipeline for the future.

KPI results since release

Where are we going?

We are still experimenting and collecting metrics on how the Asset Manager can be improved in the future adoption and impact-wise, but as a start, here are some things we're looking at for the future of the Asset Manager!

Cross-functional implementation

Being able to integrate to the entire design team is great, but what if we could integrate to the entire organization. Developers could be pulling from the same database as designers, ensuring 100% accuracy and consistency in both design and development implementation.

Cloud database integration

Currently, component keys and asset information is being stored locally within the plugin source code. Moving it to an external database would allow designers to update, add and remove assets without releasing a new version of the plugin.

Analytics and metrics tracking

The Asset Manager could track all insertions of assets across all projects, allowing the team to get deeper insight into what assets are being used, not used, and edited.

08
Retrospection

What I learned

During this project, I was able to gain valuable experience in collaborative design and stakeholder management. Because this project affects the design process of all designers in our team, I had to ensure that I got feedback and buy in from stakeholders and designers.

In addition, I was able to work hand-in-hand with developers on not only the design process, but also the development process. Not only did I foster a great relationship with them, but I also got hands-on insight on the developer's thought process.

Lastly, I was able to continue polishing up my skills in Figma plugin development and bring great results to our design system!

Next projects:

Get in touch below or directly at christophersu02@gmail.com!

Resume

Designed and developed by Christopher Su

Creating a Custom Tool for Consistent Assets Across the Platform