UX Case Study: Font Swap — Building a Figma Plugin

Creating Font Swap — A Figma Plugin to find and replace fonts in three easy steps.

My Role and Objective

Motivated by the desire to create a meaningful product, I embarked on this project after a discussion with my senior, who expressed frustration with the limitations of existing options in Figma. Throughout the process, I conducted design research and synthesis, ideation, analyzed competitors, Usability Testing, and overcame various challenges. Let’s dive into the details!

Problem Statement

A colleague at my company lacks a suitable option within Figma to change fonts for specific layers, requiring a solution that streamlines this task.

Secondary Research

• Explored Figma’s dedicated series on building and publishing plugins. It was a miracle!!!
  Build your First Plugin
• Acquired proficiency in JavaScript, HTML, and CSS to lay the foundation for plugin development.
• Engaged with fellow designers to gather insights into font-related challenges.
• Iteratively refined the problem statement to include font styles and weights.

Competitor Analysis

• Analyzed existing font-related plugins like “Font Replacer”, “Font Changer” and “easy font swap”.
• Identified their strengths and weaknesses, noting the gaps in functionality and user experience.
• Derived inspiration from "Font Replacer" to inform the approach and functionality of Font Swap.
• Created wireframes based on insights gained from the competitor analysis, with iterative improvements.

Design and Development

• Developed the Font Swap plugin using a combination of personal coding and assistance from Chat GPT.

• Conducted multiple iterations to refine and enhance the plugin’s functionality.

Latest Iteration with added user accessibility

• Implemented logging calls like “console.log()” for effective design testing.

// Access the selected font details for further use within the page
console.log('Selected Font Name:', selectedFont.fontName);
console.log('Selected Font Styles:', selectedFont.fontStyles);

• Ensured seamless integration with Figma’s interface and smooth user experience.

Overcoming Challenges

• Successfully resolved persistent errors related to handling mix-styled fonts through trial and error.
• Implemented innovative solutions to traverse text nodes within the page selection.
• Developed a progress indicator to track changes made by the plugin.
• Persevered through challenges, taking breaks and revisiting documentation when needed.

Future Enhancements

• Planned iterations to refine the visual design of the Font Swap plugin for improved aesthetics and usability.
• Considered incorporating UX functions, such as an estimated update time feature.
• Aimed to optimize the plugin’s processing speed for enhanced performance.
• Envisioned conducting future research and usability testing to gather insights for further improvements.
• Explored the possibility of introducing a payment feature to support ongoing usability updates and sustain the plugin’s development.

Testimonials

[Updated: 30th Nov 2023] This makes me immensely happy to see it being found as a useful tool among my fellow designers. Here are some of them I have received on Figma Community comments and Twitter & LinkedIn posts.

Conclusion

Through this UX case study, I shared my journey of developing Font Swap, a Figma plugin addressing the challenge of changing fonts for specific layers. By conducting research, analyzing competitors, and navigating through design and development, I overcame challenges to create a meaningful solution. Font Swap showcases the power of perseverance and the rewards of pushing boundaries in the field of UX design.

To experience the convenience and efficiency of Font Swap yourself, you can download the plugin from Font Swap plugin link. I encourage you to try it out and provide feedback for further improvements.

Remember, design is an iterative process, and I look forward to continuing the journey of refining Font Swap based on user needs and insights.