Earlier this year, Emmanuel Onyebueke had the idea to develop a Figma plugin for Iconduck. It was something that resonated with me, since I originally built Iconduck with API integrations in mind.
Emmanuel (who likes to go by Olly) started working, and I did my best to support him with updates to the API. Over a month, he was able to build the proof of concept, and get it published on the Figma Community platform.
Fast forward a few months, and after 6.6k installs, I
decided to build version
2.0.0. The primary reason was that the initial
version was just a proof of concept that simply dumped the
vectors into a Figma design.
I wanted the new version to be brand consistent, have more features, and be faster and more flexible for future updates.
In this post, I'll go into some details on building the Figma Plugin.
v2.0.0
Currently, the Figma Plugin allows users to do the following:
- Quickly view the top ten searches of icons, and one-click a variety of those into a design (screenshot)
- Search through all icons, illustrations and emojis (screenshot)
- Right-click on any icons, and choose to view the icon set (screenshot / screenshot)
- Right-click on any icon, and choose to view similar icons (screenshot)
- Handle failed requests (eg. database is having issues) (screenshot)
- Show a UI when there are no results found (screenshot)
The following was also considered:
- Brand consistent
- Fun illustrations to communicate different states
- As fast as possible
- Keeping a history of a user's searches in order to suggest those again in the future (stored in Figma storage)
- UX improvements (for example, almost always focused on the search input so users can keep typing and pressing enter whenever they want to perform a new search)
- Perform a spellcheck on the query when a search results in 0 icons
Documentation
I want to point out that the Figma Documentation is pretty solid. It's detailed, and if you're familiar with building a browser extension, you'll notice similar patterns and paradigms.
There's also a Slack group that I stumbled on that can be useful for asking questions to Figma engineers.
Challenges
I ran into a number of challenges. I wanted to list some of them here.
-
It's cumbersome to load multiple HTML, CSS or JS files
into an extension. I'm not a fan of a lot of tooling and
prefer Vanilla JS approaches for small apps and
integrations.
Because of this, it made it pretty tough to figure out a solid flow for including separate HTML, CSS and JS files.
-
My plugin got stuck in an "approval" loop where I had to
wait about 5 days because I changed the password on my
Figma account. I appreciate this, but it's tough when
you're trying to hit a release date.
Be careful updating any account settings before attempting to publish your plugin or an update to it.
-
XHRrequests originating from the plugin aren't signed by Figma. This was a pretty big let down for me. I want to be able to verify requests that are hitting my server. Without any kind of proxy via Figma (and some request signatures being sent in those proxied requests), it prevents me from being able to open source my plugin easily.
-
XHRrequests made to a server with an invalid SSL certificate can't be accessed. While I understand this, it makes it tough for local testing (since I generally run a self-signed local server). With Chrome, this isn't an issue since you can typethisisunsafeto force Chrome to load the resource. But with Figma, this isn't really an option.
Conclusion
Figma is a pretty remarkable product. I only started using it about a year ago, but I'm amazed at the execution and polish.
I'm also amazed that with very little promotion, the Figma plugin was able to get to 11k+ installs in a few months.
While there seems to be some padding on this number by Figma (😉), I can see in my logs that there's a ton of usage.
This ecosystem is still quite early, but very active. It's worthwhile to invest time into it, but keep in mind that you'll likely need to dedicate a certain mental space to developing plugins for Figma.
Tooling, naming conventions, limitations and UI considerations all exist in their own little (but valuable) world here.