How I Built a Figma Plugin to Convert Markdown into AutoLayout (Step‑by‑Step)

This journey started from my need: to create a plugin that can convert input Markdown text into Figma AutoLayout.

The plugin should recognize headings (lines starting with #) and plain text in Markdown, then create corresponding text boxes in Figma with specific styles (font, size, color), and finally organize them into an AutoLayout.

When I first encountered Figma plugin development, I had no idea where to start. I didn't understand how code works in a plugin, and even struggled to purchase a GPT Plus membership.

First Encounter with Plugins

Because I had no clue, my first two questions were:

But the answer from GPT wasn't what I wanted:

I changed my approach, becoming a "hand‑up" user:

This time AI gave me a set of code and explained its purpose.

Although I had the code, I didn't know where to place it, so I asked again.

Finally I got the answer I wanted, step by step explaining how to create the plugin.

Thus I finally overcame the first hurdle: I know where the code goes and how it becomes a plugin. From the Figma plugin documentation, write JavaScript in Code.js to listen to UI messages, parse input text, then create text boxes and AutoLayout in Figma. In ui.html write the UI display.

Of course, I also got a piece of code that cannot run.

Implementing Core Functionality

The code didn't run successfully; I didn't know where the problem was. So I reported the error to GPT, received new code, tried it, and repeated until it worked.

During this process I asked GPT‑4 to add detailed comments to each code segment, making the code easier to understand. Even though I'm not very familiar with Java syntax, the comments helped me grasp the logic. Eventually I succeeded: the user selects a text layer in Figma, and the plugin automatically converts it to the desired format.

After that, I started iterating and optimizing the plugin. I changed the interaction: instead of requiring the user to input text in the UI, the user now simply selects a text layer in Figma, and the plugin converts it automatically.

Afterword

Overall the experience was enjoyable; the plugin is now published in the Figma community, and interested users can download it: https://www.figma.com/community/plugin/1258435261121234573/Markdown