Figma widget for Planner
ETCHi, i'm Lovefield.
Recently, I've been writing wireframes using Figma. Working in a Figma environment with a larger area than in a narrow PPT environment, the planning form is being prepared much easier.I found something uncomfortable for a while. Because there is no space constraint, there are too many description blocks entered on one page. After finding the number of the description block on the wireframe, I had to move to the location where the description block was located to see the description again. It was quite far away and the process of checking the information became very cumbersome.
Situation to check the number and go back to the description block.
This problem is bigger when the wireframe has many description blocks. What was worse was that the description didn't have the same type. Wireframe has visible description, invisible description, tracking description and design description. There are 20 to 30 pieces of this information on each wireframe. That's hard to read. I had to find a solution.
Just in time, Figma is supporting the widget API. I've made a Figma plug-in once, so I was well aware of the related matters. In the end, I couldn't stand the inconvenience, so I decided to create a widget with a close designer. (https://www.figma.com/@designaeunkim)
A wireframe to create a widget
We were sure of what we wanted because we felt uncomfortable.I simply filled out the wireframe and handed it over to the designer. There are three key technologies. Make the description of the description block visible by clicking on the pointer, the number automatically sorts when the description block of the middle number is deleted, and the description block and page name and page description are not scattered. I wrote a proposal focusing on these functions.
Widget design
The designer was also aware of the inconvenience, so the understanding was high. After giving some technical guidance, the design proceeded quickly. Unfortunately, the status of the button could not be changed due to the functional issue, but the work was carried out without much deviation from the design.
I spent about a week researching features and developed widgets. It didn't take much time to understand the widget API because I had previously created a plug-in. Widgets were developed over two to three days and distributed to the Figma community after about four days of inspection.
I... I don't need to scroll?
After using the deployed widget, we confirmed that all of the features we intended were working properly. After fixing some bugs, we are applying them to the actual project. You no longer have to move the screen to check the information. I made a widget by capturing the inconveniences while planning with Figma. I hope it will help many people and I will end this article.
