Since this was my first plugin I looked for resources on how the process went. In the Figma app there's a section to create a plugin. When creating a plugin for Figma we're given a couple of options for templates. We went with option three since it seemed to cover what we needed the most.

With the project files created, what I needed to figure out was how to run the plugin. I learned that when you create your plugin Figma creates a reference to the created files. Allowing you to run your project files from where it is on your computer.

With that done, it was time for the UI. I added a CSS file and linked it to the HTML. I setup the general outline of the plugin and added in CSS for styling. I quickly found out that CSS can not be linked to your Figma plugin. After doing some reading, I learned that the plugin only loads files inside of the manifest.json. This was one of the files given to us when we created the plugin template. This means any CSS or JavaScript related to the UI should be written inside of the HTML file.

Our result so far was:

I created event listeners to keep the value controlled within JavaScript. Other listeners were attached to the Cancel and Create Card buttons. If a user clicked on one of these buttons it would send a message to the API. Either closing the plugin or creating the card.

Another option given was to use the Color API. If this is checked the generated card will have a name that is pulled from this API. I made sure to first check that the user has a valid color name. If this was good, we cut off the # from the hex code and send it to the API. We add the API's custom name to the message we send to Figma's API.

With the UI finished we can now focus on generating cards like these:

Our first task was to pick up the messages sent from the UI inside of the plugin code. After picking up the data from the user, we could start the card creation process. There's a couple of things that'll happen:

1. Initialize color code values for HEX, RGB, and HSL
2. Generate the card pieces
3. Combine the card pieces
4. Add the card to Figma
5. Alert user that the card is created

Initializing color codes

We initialize multiple color codes because these codes get added to the cards. The main problem with this was converting the values from HEX to RGB and HSL. This was a problem that has been solved before so I was able to find resources on how to do the conversion.

Building the cards

To build the cards, I took a look at a design I had already built in Figma. I had to read a lot of documentation to find the parts of the Figma API I needed to interact with. The most difficult piece of the API was figma.loadFontAsync. There seemed to be an issue that not only did I have to await this function call, but also function calls to any element that was using the loaded font.

I solved this issue by awaiting Promise.All. Each element that used the custom font was assured to be loaded before moving on, thanks to this. Everything else went smoothly. It was just create the element and add the configuration to it.

Once the pieces were made, the API had methods to combine the pieces. This process did have to be done in a specific order or the card would break. Lastly, with a frame.appendChild the card was finished and usable.

The code was complete, but there was one last step, publishing. To publish your plugin you needed to fill out the application and get accepted. The standout points where:

1. Creating an icon
2. Creating cover art
3. Documentation

My plugin was accepted in about a day, and has gone through an update to allow different card sizes. A future update will allow a user to place cards into a group.