Clip
Clip
Designing a plugin to help figma users copy and paste more.
Designing a plugin to help figma users copy and paste more.
My role
My role
Product designer
Product designer
UI/UX Desing
UI/UX Desing
Research
Research
Interviews
Interviews
Introduction
Introduction
Clip is an idea I had for a plugin on Figma, it is supposed to allow users, copy multiple elements and paste and their convenience. It will be able to hold these elements-text, rectangles, frames, etc- in a clip board, and allow users, access these elements whenever they want.
Clip is an idea I had for a plugin on Figma, it is supposed to allow users, copy multiple elements and paste and their convenience. It will be able to hold these elements-text, rectangles, frames, etc- in a clip board, and allow users, access these elements whenever they want.
Goals
Goals
The main goal of Clip is help figma users manage more elements during their workflow, helping reduce time on managing multiple elements within a single file.
The main goal of Clip is help figma users manage more elements during their workflow, helping reduce time on managing multiple elements within a single file.
Solution
Solution
The solution designed is a simple plugin that can be accessed on the figma, which would help users copy and paste multiple elements, be easy to use, and not obstruct the workflow of the figma user.
The solution designed is a simple plugin that can be accessed on the figma, which would help users copy and paste multiple elements, be easy to use, and not obstruct the workflow of the figma user.
I asked questions
I asked questions
As a designer myself, I could have gone in and just cooked up something in figma and delivered as the solution, but something I've learnt in my little time is that you almost are never designing for your self. So I asked question from other figma users, to see what they thought, and if it was something that was going to help in the workflow process. I developed a questioner and sent it out
As a designer myself, I could have gone in and just cooked up something in figma and delivered as the solution, but something I've learnt in my little time is that you almost are never designing for your self. So I asked question from other figma users, to see what they thought, and if it was something that was going to help in the workflow process. I developed a questioner and sent it out
So here is what I found:
So here is what I found:
Figma users expressed interest in a plugin that would improve their workflow
Figma users expressed interest in a plugin that would improve their workflow
3/5
3/5
Indicated that they would benefit from a plugin that helps manage multiple elements
Indicated that they would benefit from a plugin that helps manage multiple elements
60%
60%
Insights
Insights
From the research, I found that it would be beneficial to some people(fairly above the average number) to provide a tool that helps improve workflow efficiency, and this was the push I needed to go ahead.
From the research, I found that it would be beneficial to some people(fairly above the average number) to provide a tool that helps improve workflow efficiency, and this was the push I needed to go ahead.
Ideating the experience with wireframes(on paper)
Ideating the experience with wireframes(on paper)
I found out that I actually like to sketch my wireframes during the ideation of Clip, it really helped me iterate on ideas quickly, and also imagine how different things would look, without having to waste time on colors or anything.
Here are some sketches(dont mind the writing).
I found out that I actually like to sketch my wireframes during the ideation of Clip, it really helped me iterate on ideas quickly, and also imagine how different things would look, without having to waste time on colors or anything.
Here are some sketches(dont mind the writing).
Adding more detail
Adding more detail
The wireframing done on paper helped me identify the features that would be included in the coming designs, and iterations.
The wireframing done on paper helped me identify the features that would be included in the coming designs, and iterations.
1
Getting started
Getting started
I chose to include a getting started screen to help new users start using the plugin easier
I chose to include a getting started screen to help new users start using the plugin easier
2
Empty states
Empty states
Empty states are really important, because they inform users of what is happening on the interface, and triggers them to do something
Empty states are really important, because they inform users of what is happening on the interface, and triggers them to do something
3
Expand and collapse
Expand and collapse
This is a feature that allows the user to collapse the plugin and expand it and their convenience, providing space when they need, and access to the elements
This is a feature that allows the user to collapse the plugin and expand it and their convenience, providing space when they need, and access to the elements
4
Target
Target
The target button is made to find elements anywhere on the figma file.
The target button is made to find elements anywhere on the figma file.
4
Delete
Delete
After some thinking through the process, and also looking at some clipboards, it was a good idea to add a delete button.
After some thinking through the process, and also looking at some clipboards, it was a good idea to add a delete button.
Things I learned
Things I learned
There are always things you figure out along the way, and i figured out some.
There are always things you figure out along the way, and i figured out some.
Always try to communicate your ideas with other people, you can find some depth just talking about it.
During the initial stages, when you are sketching, or wireframing, anything goes, it is the best time visualize whatever you think of quickly. I find my self sketching a lot more now, and I can change things quickly as I go.
Always try to communicate your ideas with other people, you can find some depth just talking about it.
During the initial stages, when you are sketching, or wireframing, anything goes, it is the best time visualize whatever you think of quickly. I find my self sketching a lot more now, and I can change things quickly as I go.
It's wrap
It's wrap