Sal AI – Figma Plugin
Conceptual design for a Figma plugin providing AI-based text and image generation
My Roles
UX Design
UI Design
User Testing
Research
Timeline
April – May 2023
Figma
Midjourney
ChatGPT
Tools
Team
Solo Project
Putting AI tools where the designers are
(i.e. in Figma)
The Challenge
Esoteric interfaces can limit adoption of generative tools
Generative AI tools often feature complex interfaces or manners of operation that are confusing for a new user and can impede work flows or product adoption.
The Solution
Simplify the user interface and refine the tools provided
Sal AI is a Figma plugin for AI-generated text and images that provides a clear and simple-to-use interface.
I began the ideation phase with a “Blue Sky” brainstorming workshop in which I asked my design classmates to draw their ideal interface for a Figma plugin that generates text and images.
Examples of participant’s sketches
I then performed a competitive analysis to determine the current user‘s mental models for generative tools
Notable common features included:
Sliders controlling level of stylization
Tone of voice control
Pre-made image style settings
“Jargon” terms (such as “Steps” and “Guidance Scale”)
With the information I had gathered, I was able to begin developing initial screen designs
My initial round of user testing made it clear that not all users had any sort of idea how to use AI tools or the meaning of “common” AI terms
Changing language to match terms used outside of cutting edge AI tools and minimizing tool availability and complexity allowed for a more simplified user experience
The final prototype allows for robust customization while still limiting the amount of controls and technical information so as not to overwhelm newer users
Lessons Learned
What is most “correct” is not always the most useful
I designed this plugin after having spent multiple months using and learning about a variety of AI-based generative tools. My familiarity with the interfaces used by those tools led me to believe that certain terms would be clearly understood by other users. However, I found that the most technically “correct” term was not always the most informative to the user.
Less precise terminology that was more comprehensible to a wider audience was more successful in my product than the “correct” term that was understood only by a few.
Information only becomes useful when it is accessed
As I was aiming to design for a wide range of experience levels related to generative tools, I included a significant amount of informational modals and explanations in my design.
However, during user testing, I found that users would often search for the way in which to complete a task without ever accessing these resources.
This implies that, in order to be useful, information must be provided in a manner which is accessible or attractive to the user.
When providing my testers with specific tasks to complete, I found they would often be quick to give up on finding a solution if one was not immediately clear. Often, the user would take the fault on themselves, claiming they “just couldn‘t figure it out.”
However, when I allowed users to explore the plugin on their own without any particular goal, many accessed areas of the tool that they had not found when trying to solve a specific task.
Free exploration is an important aspect of learning new tools and moving forward, I would like to be more proactive in discovering ways to build this type of experience into testing formats to give users the benefit of this practice.
Unguided exploration can be highly educational
Next Steps
Testing this plugin with limited abilities to represent content generation was difficult because so much of the importance of the interface relates to how well it can adapt to a wide variety of user needs.
A clear next step for the next generation of the plugin would be to determine how to make explanatory information more accessible to users. I think a landing page/on-boarding process that some Figma plugins provide would go a long way in achieving this goal.
I am currently learning more about how to actually create a plugin for Figma. I would be excited to eventually bring this design to fruition as a real plugin available to the Figma Community!