One Figma Plugin to generates and documents all your button states
Story worth talking about
To enhance design efficiency by creating a customised and fully documented component set with a least decision making effortswhich can be reused and updated as per user's needs.
Timeline
May 2024 - Ongoing
Panel Size
Ashish Sharma
UX Designer + Developer
Lakshya Raj
Ideation and UI Developement
Design Colleagues
Product Testing
Research Approach
Competitor Analysis
Heuristics Analysis
How might we questions
[Approach 1]
My research approach placed a strong emphasis in understanding the existing platforms and how they are solving for creating a component set. it was discovered that they had very little feedback in case of both positive and negative aspects.
Even though their wider audience was happy it was identified that creating something that involves the best functionality of all three components could solve the objective that was initially developed.
[Approach 2]
Upon conducting heuristics it was discovered that there could be many things that could be used for creating a plugin that can reduce human efforts like, a preview option in Design system generator, styles to explore with a certain theme. and finally figuring out how to document it.
It was discovered that other plugins were just creating a component set but not generating document in order to kick start a project.
Design Approach
MoSCoW Prioritization
UI WorkFlow & Release
Usability Testing
UI Documentation
[Approach 1]
After understanding the how might we questions it became clear to distinguish the features that might be most required vs least required when creating the plugin design.
This also later helped in creating the visual hierarchy of the components displayed when creating the plugin.
[Approach 2]
The decision work as per trial and error method was taken as we did not have much data in terms of how the users would feel when using the newly developed iteration.
Hence usability test was conducted with 3 participants in order to understand if the target was met. This also needed the design to be developed asap.
Challenges & learnings (1)
What was the Problem?
With a limited feedback available for competitive plugins what could be an other way to figure out our user needs?
How can we make sure the user doesn't get overwhelmed in the process of creating a component set? What solutions can help?
Should the preview section be the prominent part of the plugin? if so how can we implement it in such a way that user benefits from it the most?
How was I solving? 🧠
The main challenge was limited user feedback, which was addressed through interviews and usability testing.
User interviews revealed the need for basic features like font search, border radius, and padding, as seen in competitor heuristics. A preview section was also confirmed to be beneficial before generating the button set.
The preview section evolved from showing just 3 button states to including secondary and tertiary variations. It became integral to the plugin, addressing both user needs and marketing by showcasing the generated output in the first fold.
Challenges & learnings (2)
What was the Problem?
Can we use only the primary button to create a set of button states? If so, how can we implement an algorithm making sure the it helps during development as well?
Is there a need for editing the plugin? What components can be the most useful for a user when edits are made within the plugin? What hierarchy could be the best heuristically?
How was I solving? 🧠
The decision to pick just primary button was initiated to keep the minimal design, reducing decision making efforts, and designing an algorithm based on color hierarchy and altering saturation & brightness of primary hue.
By Usability testing and trial and error method the components hierarchy was tested.
Key Takeaways
Reflection on the outcomes
New challenges do still arrive, but identifying them is a key. For instance, right now bringing new button designs to the plugin is what I'm trying to pull of in such a way that I can also develop a code for it as well. Next is finding time to test the design one more time.