Designing a Figma plugin for Streamline
Building a powerful plugin for designers
TIMELINE
3 weeks
MY ROLE
UX Design,
Visual/UI
TEAM
Vincent Le Moign
Victor Carvalho
TOOLS
CONTEXT
About Streamline
Streamline is a design tool offering a premium collection of high-quality icons, illustrations, and other vector assets. You can save them in collections, customize them endlessly, and use them in your designs, presentations, and code.
The Why?
UX and UI designers, who make up the majority of its user base, needed a more seamless way to access and use icons within their design workflows. To address this, Streamline developed a Figma plugin, allowing users to directly browse, search, and incorporate icons into their projects without leaving the Figma environment. This solution streamlined the process and aligned with designers' needs, enhancing their overall experience.
Goals
The primary goal for a product designer creating the Streamline Figma plugin would be to deliver a seamless, user-friendly tool that integrates effortlessly into designers' workflows. Key objectives includes:
Seamless integration and accessibility
Design an intuitive plugin that provides easy access to the entire Streamline library.
Consolidating all web features
Enable users to customize icons directly within the plugin, streamlining workflows and solving pain points like switching tools or manual imports.
Scalability
Ensure the plugin is scalable for future updates, maintains consistency.
Ideation
I began by studying the guidelines for designing a Figma plugin and collaborated closely with the engineer to understand the scope for creativity, identify technical constraints, and determine where to set boundaries.
Next, I built on the basic structure by exploring and adding features while ensuring they aligned with the workflow of UI and UX designers using the tool. I leveraged insights from user interviews conducted during the Streamline website redesign, using those notes as a key reference to design effectively for power users.
Flaws in iteration 1:
Navigation
No way to return to the home page
UI Constraints
Limited space in the thin strip for features like outline stroke and multiple select
Redundant Features
Color feature was unnecessary since Figma allows vector coloring
Discoverability
Asset types and set details (name, category) were hidden, hindering easy navigation and discovery
To address these issues, I created an improved version of the plugin.
Final design
The final design focused on enhancing usability and discoverability. It featured clear navigation options, allowing users to easily return to the home page. The interface was streamlined to fit essential features without clutter, and redundant elements, like the color feature, were removed. Asset types and set details (name, category) were made visible, improving accessibility and ensuring users could quickly find what they needed.
Impact
Winner of 'Favourite Graphic Resource' by Figma!
Liked by 4k users
Most users who tried using the app for the first time ever would bounce and never come back to the app.
Used by 316k users
Out of total users who used the app more than once, only 0.9% opted to pay for a subscription.
Learnings
