Why did I choose to make this plugin? The Story

I've spent my career working with large enterprise-grade applications, starting from MS Paint to even Salesforce Cloud. These applications offer over 1000 features within a small user flow, compacting vast information into limited screen real estate. Every click is crucial, and every added page is frowned upon.

What am I trying to say here? In most of our day-to-day interactions, we use complex software packed with information. Yet, we often overlook the challenge it poses for designers in fitting all this necessary information that supports user navigation. Designers, like myself, have utilized various tools—from smaller font sizes to icons and helper text—to reduce information density while aiding users. However, the go-to tool that has been consistently invaluable is ToolTips!

How many times have we hovered over obscure icons, just to see pop-ups explaining their functions? Or how often have we searched for the information icon (i) next to peculiar questions like "Guess the number of fingers I have?" just to learn that "the question is asked for fun and the answer is 10, I'm human, not AI." Such a lovely tooltip!

I've encountered the same problem, needing to deliver precise information exactly when my user needs it while maintaining a clean UI, especially when designing the Jerry the Jr Research AIde application. Often, we forget how small elements like tooltips are an essential part of design. I did too, and that's when I immediately sought a solution.

What were my options?

1. Make the frame then and there.

2. Create a component and use it universally.

3. Look for a plugin, only to find none available!

   
   

The first two are feasible, and we've been following these steps, but they do take some time. The third option was non-existent. This is when the engineer in me sparked the idea to create "ToolTips" - my plugin.

How to get started with your plugin? My approach

First things first, this is a development project for designers. You need a basic understanding of frontend development or something similar to embark on this. Watch some videos if you're new to this. Stay if you're already familiar. Also, it's better to have an idea of what you want to create.

The journey is straightforward if you're using Figma. Let's explore their resources:

• Start here: First video in Figma API playlist [Link to YouTube]

• Figma Companion blogs: [Link to Figma Plugin Quickstart Guide]

• Advanced resources: Once you have the basics, explore more advanced concepts [Link to YouTube]

Don't skip this: [Link to Figma Plugin Documentation] - This is the most important resource.

Assuming you have a good idea of how things work, you can start by sketching or building the UI. Forget about functionality at this stage. You now have an idea of how to create a simple UI. For a more complex UI, utilize a CSS framework like Bootstrap or Tailwind. I used Bootstrap [Link to Bootstrap Documentation].

This is all you need to get started! Next, read further docs as needed and utilize ChatGPT for manual tasks like HTML, CSS, event listeners, etc. However, it won't assist with Figma API; you'll have to tackle that in the traditional way. I haven't tried Microsoft Edge AI for this purpose; it might help, but I'm unsure.

What I learned

Creating something that contributes to the community is a joyous experience! It gives hope in tough times and pushes me to learn new skills and concepts. Coming from an engineering background, the plugin was my way out.

Learning about APIs introduced me to a whole new world within Figma as a software. Even while using it as a designer, this new knowledge helps in better organizing documents and utilizing tools more effectively.

I know we're accustomed to learning through video tutorials, where someone shows and explains how things are done, but creating my learning path was a challenge. Determining the right document to read at the right time took effort.

What's Next?

For version two, I'm considering three potential features. I'll eventually choose one depending on what you all need, what I can manage, and current trends. However, a heads-up:

• AI integration: Assisting in writing concise and quick tooltip text.

• Component Creation and automatic Component detection/integration within your existing Design System.

• Adding Interactions via the plugin, at least eliminating the need to prototype this part.

Let me know what I should focus on next!

Thanks for reading!