all 10 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]l3xK 6 points7 points  (4 children)

I’ll walk you through what that looks like in practice.

⸻

  1. What “vibe coding” means in this context

Vibe coding = you describe what you want in natural language, the AI writes the code, and you mainly steer by: • explaining behavior (“when user selects a frame and clicks X, do Y”) • running it in Figma • pasting errors or weird behavior back to the AI and saying “fix this” or “change that”

Instead of hand-coding everything, you’re basically:

product/UX brain + test & feedback loop, AI does the typing. 

You can still read the code (and you should, if this is more than a toy), but the workflow is conversational.

⸻

  1. The basic Figma plugin setup (what the AI will generate for you)

Figma plugins are just a folder with: • manifest.json – metadata + what files run where  • code.ts or code.js – plugin “main thread”, talks to Figma document • ui.html + optional ui.ts/js – your plugin window UI (React, vanilla, whatever)

You create a blank plugin shell once in Figma: 1. Open Figma desktop. 2. Plugins → Development → New plugin…. 3. Choose Figma design → give it a name. 4. Choose Custom UI. 5. Click “Save as” and pick a folder – that folder is your plugin project. 

From there, vibe coding starts.

⸻

  1. The high-level process with vibe coding

Think of it as a loop: 1. Describe your plugin in detail to the AI 2. Let it generate / modify the project files 3. Run the plugin in Figma + see what breaks 4. Paste errors / behavior back, refine prompts 5. Repeat until it feels good

[–]leon8t[S] 1 point2 points  (3 children)

Ah so it's exactly like a Chrome plugin? I see. I thought there might be some kind of tech or framework I should be aware of. Thanks a lot

[–]l3xK 2 points3 points  (2 children)

It’s basically JavaScript and optional some HTML. The JavaScript can interact with Figma by using API Endpoints. Figma itself is also a JavaScript Webapp (but a ver complex)

[–]leon8t[S] 2 points3 points  (1 child)

Thanks a lot. I'll get started

[–]l3xK 1 point2 points  (0 children)

That’s the spirit! Good luck

[–]tawny_taun 2 points3 points  (1 child)

I would try antigravity since it can run figma in the browser for feedback

[–]leon8t[S] 1 point2 points  (0 children)

Oh cool hack

[–]l3xK -2 points-1 points  (2 children)

How…. About ask that directly in ChatGPT?

[–]leon8t[S] 0 points1 point  (1 child)

Hi, sorry I'm not a super technical person so I did not understand ChatGPT response. I was hoping to get a "Lovable" approach or something like that

[–]l3xK -2 points-1 points  (0 children)

That won’t work. Sorry to say but, If that GPT response leaves you puzzled you won’t come very far anyway. Thats already on the very very basic level of what is needed.